[회고] (22.08.20) JS 변수, 호이스팅, 객체

 

오늘 공부한 것

1. 변수 & 호이스팅

• 호이스팅 개념 정립이 잘 안되어 있던 것 같아 다시 정리해본다.
  • 호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다.
  •  
• 변수의 생성 3단계도 다시 정리해본다.
  • 선언 단계(Declaration phase)
    • 변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
  • 초기화 단계(Initialization phase)
    • 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 변수는 undefined로 초기화된다.
  • 할당 단계(Assignment phase)
    • undefined로 초기화된 변수에 실제값을 할당한다.

2. 객체

• 자바스크립트에서 객체는 아래 3개로 구분된다.

출처 : 포이마웹, https://poiemaweb.com/js-built-in-object#2121-eval

Navite object

• 네이티브 객체
  • 네이티브 객체(Native objects or Built-in objects or Global Objects)는 ECMAScript 명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있다.
  • Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.
  • 네이티브 객체를 Global Objects라고 부르기도 하는데 이것은 전역 객체(Global Object)와 다른 의미로 사용되므로 혼동에 주의하여야 한다.
  • 전역 객체(Global Object)는 모든 객체의 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다.
• 래퍼 객체(Wrapper Object)
  • 각 네이티브 객체는 각자의 프로퍼티와 메소드를 가진다. 정적(static) 프로퍼티, 메소드는 해당 인스턴스를 생성하지 않아도 사용할 수 있고 prototype에 속해있는 메소드는 해당 prototype을 상속받은 인스턴스가 있어야만 사용할 수 있다. 그런데 원시 타입 값에 대해 표준 빌트인 객체의 메소드를 호출하면 정상적으로 작동한다.
  • 원시 타입 값에 대해 표준 빌트인 객체의 메소드를 호출할 때, 원시 타입 값은 연관된 객체(Wrapper 객체)로 일시 변환 되기 때문에 가능한 것이다. 그리고 메소드 호출이 종료되면 객체로 변환된 원시 타입 값은 다시 원시 타입 값으로 복귀한다.
  • 래퍼객체는 String, Number, Boolean이 있다.

Host object

• Web API
• Window
• console.log()
  • 항상 콘솔이 어떻게 찍히는 건지 궁금했는데, Web API 중 하나고 window 객체의 속성으로 포함하고 있다 한다.
  • console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공한다.
  • Window.console의 형태로 노출되어 있으므로 간단하게 console로 참조할 수 있다.
  • console 객체는 아무 전역 객체에서나 접근할 수 있다.

 

회고

• 호스트 객체가 궁금해서 window 를 알아보고, 그러다가 Web API 를 알아보고, 방대한 정보량을 보고.. 아 오늘 본다고 해서 다 알 수 있는게 아니겠구나 싶었다. 그래도 객체의 큰 분류를 이해할 수 있었고, API 라는 것에 대한 이해가 더 생겼다.

 

 

 

 

 

공부할 때 참고한 자료

poiemaweb, let, const와 블록 레벨 스코프

모던 자바스크립트 딥 다이브 21장 빌트인 객체

[MDN] Web API

[MDN] Window

Web API MDN 내용 정리