DOM. 관련 개념 정리

DOM 관련 강의를 듣고 있는데 어제 쓴 글이랑 관련 있는 게 나와서 생각나는 부분만 정리해 보려고 한다.

강의는 인프런에 'DOM 기본' 이란 강의다. 오늘은 설명할 부분은 ECMAscript Overview부분을 설명한다. 밑에 참고하면 된다.

https://tc39.es/ecma262/#sec-ecmascript-overview

ECMAScript® 2022 Language Specification

여기서 object를 정의하기로 0개 이상의 프로퍼티를 가진 것을 오브젝트라고 한다. 프로퍼티는 프로퍼티 키와 값으로 구성된다. 또 이러한 프로퍼티는 속성 값을 가진다.  프로퍼티는 컨테이너로 다른 오브젝트가 들어올 수 있다.

또한 new객체로 생성한 것은 인스턴스라고 부르는데 사실상 오브젝트랑 똑같다고 보면 됨 구분하기 위해서 그렇게 부른다. 오브젝트가 더 큰 개념이라 보면 되겠다. 

오브젝트는 프로퍼티의 컬렉션으로 자바스크립트는 object를 기반으로 하며  object를 구성하는 것이 방금 말한 것처럼 프로퍼티 이므로 자바스크립트 형태와 구조의 바탕은 object와 프로퍼티이다.  다음은 간단한 예제 코드다.

const sports={swim:"수영"}
Object.defineProperty(sports, "baseball", {value:"야구", writable: false, enuerable:true})
sports.baseball="축구"
console.log(sports.baseball)

속성 값에 writable을 false로 줘서 수정을 할 수가 없다. 자세한 속성은 위의 사이트에 가면 나와있다.

다음으로 기억에 나는 부분이 함수와 메서드를 구분해야 하는 점이다.

지금은 거의 같은 쓰임새로 쓰이지만 개발자라면 구분을 하는 게 좋다고 하신다. 구분해야 하는 이유는 다음과 같다.

• function이 작성된 위치 즉, 구조가 다르기 때문
• 함수는 인스턴스에 포함되지 않는다.
• 이에 따라 코딩 형태가 달라져서 그렇다고 한다.

함수는 callable object로 함수를 프로토타입에 연결해서 작성하면 메서드라고 한다. 간단히 정리하면 함수는 객체로부터 독립적이며, 메소드는 객체에 종속적이다. 오브젝트. function의 형태가 함수이고, 인스턴스. function() 형태가 메서드이다.

다음과 같은 예시를 보자

function getTitle(){
 	return "callable"
  };
  console.log(getTitle())
  
  const values = [1,2,3]
  console.log(Array.isArray(values)
  
  class Sports{
  	static getItem(){
    	return "펜싱";
      }
  }
  console.log(Sports.getItem())

마지막의 경우 static 함수로 선언해서 클래스 함수처럼 사용할 수 있게 만들었다. 어제 글에서 예제에서 쓴 Array.prototype.slice.apply(arguments)  같은 경우도 메소드로 객체를 바인딩해서 써준 것이다. 저걸 그냥 arguments.slice() 이렇게 써줘도 당연히 된다. 어제 글 쓴게 생각나서 따로 정리를 해봤다. 

또 한 가지 추가로 강의에서는 context를 단순히 문맥이라고 이야기하기보다는 어떤 실행 덩어리로 말하는 게 더 시맨틱과 뉘앙스가 맞다고 말씀하신다. 그니까 내 생각에는 내가 이 개념에 대해 설명을 잘하려면 그 개념이 말하는 시맨틱과 뉘앙스에 맞는 단어로 설명을 해야 되는 걸 뜻하는 거 같다.  나는 실행 콘텍스트를 어떤 코드가 실행하기 위한 환경으로 생각하고 그런 식으로 접근을 했었는데, 덩어리라는 표현도 나쁘지 않은 거 같다.

근데 이게 단순히 단어를 해석만 하면 안 되는 문제여서 그런 거 같기도 하고, 저번에 '자바스크립트는 왜 프로토타입을 선택했을까?'라는 글에서 보면 개발자들이 execution Context라고 한 이유를 조금은 알 수 있다. 그래서 영어로 된 개념을 단순히 해석해서 받아들이는 일은 당연히 없지만, 저런 상황들을 어느 정도 이해하고 context를 문맥으로 받아들인다면 그 어떤 상황 정도로? 볼 수 있지 않을까 싶다. 또 이게 언어 간 해석을 해도 단어의 괴리가 조금 있을 수도 있다고 본다.

또 추가할 부분은 ES3에서 scope chain과 activation object로 설명되던 부분이 ES6의 Lexical environments 개념이 새로생기면서 사라졌다고 한다.