LHJ

I'm a FE developer.

10-1. Object 오브젝트(ES3 기준) / 자바스크립트 오브젝트 구분, 네이티브/호스트 오브젝트, 오브젝트와 인스턴스

26 Nov 2020 » js_beginner

10-1. Object 오브젝트(ES3 기준) / 자바스크립트 오브젝트 구분, 네이티브/호스트 오브젝트, 오브젝트와 인스턴스

이번장은 빌트인 오브젝트 오브젝트입니다.
빌트인 오브젝트를 살펴보기 앞서 자바스크립트의 오브젝트를 살펴보겠습니다.

자바스크립트 오브젝트

  • 오브젝트 구분

    • 빌트인 오브젝트(Built-in Object)
    • 네이티브 오브젝트(Native Object)
    • 호스트 오브젝트(Host Object)

네이티브 오브젝트

  • 빌트인 오브젝트

    • 사전에 만들어 놓은 오브젝트
    • 빌트인 Number 오브젝트,
      빌트인 String 오브젝트,
      …

ES5 기준으로 11개의 빌트인 오브젝트가 있습니다.

  • 네이티브 오브젝트

    • JS 스펙에서 정의한 오브젝트
    • 여기에 빌트인 오브젝트 포함
    • JS 코드를 실행할 때 만드는 오브젝트
    • 예 : Argument 오브젝트

    Argument 오브젝트는 함수가 호출되면 함수 안에서 만들고 함수를 빠져나오면 자바스크립트 엔진이 자동적으로 지웁니다.
    물론 이것도 빌트인 오브젝트이지만 사용성에서 약간 차이가 있죠?
    즉 자바스크립트 오브젝트는 빌트인 오브젝트가 네이티브 오브젝트에 속하므로 네이티브 오브젝트와 호스트 오브젝트로 나눌 수 있습니다.
    ES5 기준입니다.
    ES6에선 보다 더 세밀하게 구분됩니다.

호스트 오브젝트

  • 빌트인, 네이티브 오브젝트를 제외한 오브젝트

    • 예: window, DOM 오브젝트
      DOM 오브젝트 : Document Object Model
      이 오브젝트는 우리가 마우스를 클릭했을 때 클릭한 것을 인식하는 기능을 제공해줍니다.

        var node = document.querySelector("div");
  console.log(node.nodeName); // DIV
      1. querySelector()는 DOM 함수
      2. DOM에서 제공하는 오브젝트를 호스트(Host) 오브젝트라고 부릅니다.
      3. 마치 JS 함수처럼 DOM 함수를 사용

querySelector

이 함수는 자바스크립트에서 제공하는 것이 아니라, 즉 자바스크립트 스펙에 작성된 함수가 아니라 DOM 스펙에 작성된 함수입니다.
그런데도 마치 자바스크립트 함수처럼 보이죠?
그리고 어떠한 처리도 하지않고 바로 사용할 수 있죠?

여기서 이 함수의 구조를 보면 document.querySelector()
.이 있죠?
.이 있으니깐 . 앞(document)은 오브젝트가되고 그 뒤엔 함수가 되겠네요.
이때 이러한 오브젝트를 호스트 오브젝트라고 부릅니다.

  • JS는 호스트 환경에서

    • 브라우저의 모든 요소 기술을
    • 연결하고 융합하며 이를 제어

즉, 자바스크립트는 이러한 호스트 오브젝트를 마치 자바스크립트처럼 사용할 수가 있습니다.
그리고 호스트 오브젝트는 자바스크립트에서 사용할 수 있는 형태로 만들어서 제공합니다.
이러한 환경을 호스트 환경이라고 합니다.

자바스크립트는 이러한 호스트 환경에서 브라우저의 모든 요소기술을..(요소기술 = 호스트 오브젝트)
이러한 기술들을 연결하고 융합하며 이를 제어합니다.

예를 들어 Dom Object Model 에서 이벤트를 인식하게 하려면 이벤트를 설정해야겠죠?
그것도 DOM에서 제공합니다.
하지만 그것을 자바스크립트 파일 안에 작성합니다.
마치 자바스크립트처럼요.

그리고 클릭을 하게되면 클릭한 것을 인식해야겠죠?
그것도 DOM에서 제공합니다.
그러나 자바스크립트처럼 사용할 수 있는거죠.
클릭을 했으니 뭔가 처리를 해야겠죠?
그때 자바스크립트로 처리하는 거죠.
그에따라서 연결되는 처리가 있으면 또 연결하고 .. 이러한 호스트 환경에서 자바스크립트가 실행됩니다.

이 시점에서 이러한 것을 말씀드리는 이유.

자바스크립트 개발자는 자바스크립트 하나만으로 끝나는 것이 아니다라는 거죠.
즉, 이런 호스트 환경의 호스트 오브젝트들을 하나씩하나씩 배워나가야 됩니다.
마우스 클릭을 인식하려면 DOM을 배워야됩니다.
그런데 브라우저의 요소 기술들은 매우 많습니다.
그리고 앞으로도 계속 나올거라는 거죠.
이것이 자바스크립트 개발자의 방향성입니다.

이것을 말씀드리기 위해서 호스트 오브젝트 개념을 말씀드렸습니다.
자바스크립트 개발자는 자바스크립트에서 끝나는 것이 아니다.
계속해서 호스트 오브젝트라는 것을 배워야된다.

오브젝트와 인스턴스

  • 강좌에서는

    • 오브젝트, 인스턴스를 구분

Related Posts