JS - 객체지향?

 

Intro

---

js를 쓰는 이유는 html의 태그를 조작하고 싶어서다. 

사람들이 뭘 누르면 반응해서 뭐가 바뀌고, 버튼이 눌리면 전송이 되고, 데이터를 받아와서 표현해 주고 등

 

근데 DOM을 조작하는데 항상 어려웠던게

HTMLCollection<Elements>?

NodeList? 

각각의 단어는 알겠는데 저게 저렇게 있는 게 무슨 문법인가? 뭐지? 싶었다.

NodeList에서 Node는 Node.js라는 서버 딴의 JS가 있어서 이름도 많이 들어 익숙한데,

그래서 노드가 뭐고, 노드리스트는 또 뭐란 말인가??

 

DOM 요소를 불렀을 때, 콘솔로그로 찍어서 보면

어떤 때는 HTMLCollectionOf<Element> 라고 나오고

어떨 때는 NodeList[] 라고 나오고

화살표 눌러서 밑으로 내려보면 쫘악!! 엄청나게 많은 단어들이 나오는데 이게 뭔지도 모르겠고....

 

이 궁금증 해결하기 위해 MDN을 뒤지고 열심히 번역해 가며 공부한 결과를 쏙쏙 남겨놓겠다.

나중의 나를 위해. 또 까먹을 수 있으니깐...

빈 노드리스트

Main

---

어렵게 설명하는 거 싫다.

Js = 객체지향 프로그래밍 어쩌고저쩌고... 다 필요 없고,

쉽게 이렇게 이해하면 된다.

 

JavaScript = 
사람:👨‍💼
지구:🌍
별:⭐
...

 

이런 땡땡이(콜론 :)로 이뤄진 한 쌍의 내용들이 모여있는 것이 바로 자바스크립트JS다.

실제 가치가 있는 정보( 👨‍💼, 🌍 , ⭐ )를 개발자가 멋대로 이름(사람, 지구, 별)을 붙여서 모아둔 것.

 

이거를 문서로 대입해 보면

JavaScript = 
문서: HTML
헤더: header
본문: body
...

귀엽게 표현하면 

HTML:📜 , div:🧱, link:🔗

이런 것이다.

 

다만 이렇게 쓰면 컴퓨터랑 소통하기가 어렵기 때문에

JS는 조금 더 규칙을 가진 방식으로 표현한다.

{HTML: 📜}, {div:🧱}, {link:🔗}

이 것을 조금 더 실질적인 js로 바꿔보자면

{link:🔗} = {link:"https://ugkim.tistory.com"}

이렇게 표현할 수 있다. 

이모티콘이 글자로 바뀐 것!

 

{link:"https://ugkim.tistory.com"}

이것을 우리는 Object(이하 오브젝(obj), 한글로 번역하면 객체인데, 번역말이 더 어렵다. 그냥 하나의 독립적인 물건 개념으로 생각하자)

우리가 연필도 실제 연필 물건✏️이 있고 그걸 사람들이 "연필"이라고 부르자고 약속했기 때문에 연필이 되었듯.

땡땡이(콜론) 왼쪽에 있는 것이 사람들이 부르는 이름"key", 땡땡이 오른쪽이 실제 내용"value"의 쌍으로 이뤄졌다고 보면 된다.

 

오브젝트 구조
{이름:실제내용} = {key:value}

 

 

JS에서는 내가 만든 변수와 누군가 만들어놓은 {오브젝}를 활용하여 프로그래밍을 하는 것이라고 보면 된다.

 

예시:

1번 변수 = {1번 오브젝} (예시= {숫자:5})

2번 변수 = {2번 오브젝} (예시= {숫자:3})

3번 변수 = {1번 오브젝 - 2번 오브젝}

 

프로그램 결과 = (1번 변수 * 3번 변수 ) / 2번 변수 = ( {1번 오브젝}  * ( {1번 오브젝 - 2번 오브젝} )) / {2번 오브젝}

예시 결과 = (5 * 2) / 3

= 10 / 3

= 3.333333333

 

여기서 {1번 오브젝}가 고정된 값이 아니라 브라우저에서 사용자가 입력하는 값에 따라 변한다면?

회원정보 창의 나이 입력칸 <input>의 value(사용자가 직접적은 내용)를 1번 변수에 넣어준다면?

즉, 변수는 그대로 1,2,3번으로 식을 만들어놓지만 각 변수에 들어갈 내용은 사용자의 입력, 반응에 따라서 결과값이 다르게 나오는 것이다.

# 변수로 만든 식
(1번 변수 * 3번변수 ) / 2번 변수

 

오브젝은 거의 제한 없이 만들 수 있다.

하나의 오브젝에 여러 가지가 들어가도 된다.

문서오브젝 = { HTML:📜 , div:🧱, link:🔗}

자연오브젝 = {사람:👨‍💼, 지구:🌍 , 별:⭐ }

...

여기서 내가 문서오브젝의 링크를 가지고 오고 싶다면

"문서오브젝.link" 라고 쓰는 것 만으로 링크를 가져올 수 있다.

 

자, 그러면 이 기본 개념을 가지고 다시 위에 사진을 보면

빈 노드리스트

짙은 자주색 글자로 entries: f entries{ ... 솰라솰라 쓰여있다. (벌써부터 영어 천지라 읽기가 싫다..)

그리고 옅은 자주색 글자로

  Symbol(src)_1.8r7zjlrxhxj: 'function entries() {[native code]} 

  length:0

  name:"entries"

  ....

이런 식으로 쓰여있는 게 보인다.

 

영어는 어려우니 쉬운 영어로 보면 

맨 위 entries라는 오브젝트는 

"entries"라는 실제 가치가 있는 정보(여기선 텍스트)를 name이라고 불러주기로 한 것이다.

name:"entries"

 

이런 entries 오브젝트에는 name 뿐만 아니라 length, arguments 등 다양한 것들이 들어있다.

entries:ƒ entries()
Symbol(src)_1.8r7zjlrxhxj:"function entries() { [native code] }"
length:0
name:"entries"
arguments:(...)
caller:(...)
[[Prototype]]:ƒ ()
[[Scopes]]:Scopes[0]

 

이제 대충 뭔지 알겠나요?

그런데 왜 검정삼각버튼으로 하위구조로 되어 있느냐...

왜냐하면 {오브젝}은 {다른오브젝}을 포함할 수 있어서 그렇다.

 

내오브제 = { 새로운오브제:{자식오브제:{막내오브제,막내쌍둥이오브제,아기오브제,쁘띠오브제,응애오브제} } } ;

이걸 세로로 표현하면

{

  새로운오브제:{

         자식오브제:{

            막내오브제:"나 막내",

            막내쌍둥이오브제:"나 그 옆에 막내",

            아기오브제: 10,

            쁘띠오브제: "France",

            응애오브제: eungAe_sound_url

         }

  }

}

이렇게 되기 때문에,

위쪽에서 본 구조와 유사해 보인다.

 

Conclusion

---

그렇다.

웹브라우저에서 보이는 모든 웹문서는 HTML(document)이라는 오브젝으로 만들어진 것이다..!

즉 필요한 다양한 특성의 {종이쪼가리}들을 모아서 {웹페이지}로 만든 것... 그래서 객체(오브젝)지향 언어라고 부른다.