호이스팅과 TDZ는 무엇일까 ?

스코프, 호이스팅, TDZ

스코프

스코프란 사전적으로 '영역','범위' 라는 뜻을 가지고 있다.

자바스크립트에서는 이를 변수에 영향을 미칠 수 있는 범위 혹은 변수에 접근할 수 있는 범위이다.

이러한 관점에서 스코프는 전역(global) 스코프와 지역(local) 스코프로 분류할 수 있다.
전역 스코프란 변수가 함수 바깥에 선언되어 있거나, 변수 선언 시 var 키워드를 사용하지 않으면 변수는 전역 스코프에 포함된다.

 

호이스팅(hoisting) 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 

let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

 

TDZ
TDZ은 일시적인 사각 지대라는 뜻으로, 스코프 시작지점부터 초기화 시작지점 사이의 구간을 의미한다.

다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있다.

자바스크립트에서 변수는 선언 - 초기화 - 할당 의 단계를 거쳐서 생성된다.

 

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

let, const, var, function 의 실행원리

Var : 중복 선언 가능
var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하다.

이와 같은 경우, 마지막에 할당된 값이 변수에 저장된다. 위의 예제를 보면 에러 없이 각기 다른 값이 출력되는 것을 볼 수 있다.

 

let : 중복 선언 불가능, 재할당 가능
var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지가 출력된다. 이처럼 중복 선언이 불가능하다.
name = 'vue' 와 같이 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수는 있다.

 

 const : 중복 선언 불가능, 재할당 불가능
let 과 const 의 차이점은 immutable 의 여부이다.

let 은 변수에 다른 값을 재할당할 수 있지만, const 는 재할당 시 에러 메시지가 출력된다.
이처럼 const 는 constant(상수)를 뜻하기 때문에 한 번만 선언이 가능하며 값을 바꿀 수도 없다. 하지만 위 예제와 같이 배열과 오브젝트의 값을 변경하는 것은 가능하다.
결과적으로 const 는 불변을 의미하는 것과 다르게, 값을 재할당하는 코드만 불가능하다고 볼 수 있다.
새롭게 만든 변수에 기존에 존재하던 배열과 객체를 할당할 때, 같은 데이터를 가진 새로운 배열 또는 객체가 생성되는 것이 아닌 원본과 같은 참조를 가지게 된다.그렇기 때문에 새로 만든 변수의 값을 변경하면 원본 데이터도 바뀌게 되며, 이 경우 원본 데이터가 훼손되지 않도록 유지하는 방법이 필요하다. 

 

실행 컨텍스트와 콜 스택

실행 컨텍스트

Execution Context 는 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다.
더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념.
모든 코드는 특정한 실행 컨텍스트 안에서 실행된다.
javascript는 어떤 execution context가 활성화되는 시점에 선언된 변수들을 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생한다.

자바스크립트의 주요한 실행 컨텍스트에는 두 가지가 있다.

 

1. Global Execution Context

디폴트 실행 컨텍스트로, 자바스크립트 파일이 엔진에 의해 처음 로드되었을 때 실행되기 시작하는 환경이다.

2. Fuction Execution Context

우리가 execution context를 따로 구성하는 방법은 함수를 실행하는 것 뿐이다.

함수가 호출되고 실행됨에 따라서 해당 함수 안에서 생성되는 컨텍스트. 각각의 함수는 고유의 실행 컨텍스트를 가진다.

그리고 전역 실행 컨텍스트에 언제나 접근할 수 있다.

 

 

콜 스택

call은 호출을 뜻한다.
stack은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조다.

따라서 callstack은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다.

항상 맨 위에 놓인 함수를 우선으로 실행된다. 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

 

 

스코프 체인, 변수 은닉화

스코프 체인(Scope Chain)

일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.

자바스크립트 엔진은 변수(식별자)를 찾을 때 일단 자신이 속한 스코프에서부터 찾아보고, 그 스코프에 찾는 변수가 없으면 상위 스코프를 타고 올라가며 차례차례 찾아 나간다.

이를 스코프 체인(Scope Chain)이라고 하며, 스코프가 중첩되어있는 모든 상황에서 발생

 

변수 은닉화

직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 함

  - 클로저를 통한 은닉화

클로저를 사용하여 외부에서 직접적으로 변수에 접근할 수 있도록 캡슐화(은닉화)할 수 있다.