자바스크립트 변수 타입

Author: 주니용

 

자바스크립트를 사용하다 보면 3가지의 변수 선언 타입이 존재한다.

이들의 차이점을 알기 위해서는 Hoisting & Scope 의 개념이 필요한데, 

 

Hoisting

 

모든 자바스크립트 변수 선언은 호이스트된다.

호이스트: 변수의 정의가 그 범위에 따라 선언 / 초기화 / 할당 분리되는 것을 의미

 

위 소스는 문제가 없다.

근데 아래 소스는 문제가 생긴다.

 

let으로 선언된 변수는 에러가 발생된다.

이유는 생성 순서의 문제가 있다.

가장 먼저 실행되는 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의하는데,

이 때 변수 let/const가 생성이 된다. 

환경이 생성이 된 후, TDZ가 생성이 되는데 설명은 아래에 있다.

 

* TDZ(Temporal Dead Zone) : 스코프에 진입할 때 변수가 만들어지고 생성

 

즉, let/const 변수가 스코프 생성 시점에 생성이 되므로 문맥상 에러가 발생하는 것이다.

축약하면 다음과 같다.

Context(let, const 정의 가능) -> TDZ(var만 생성 가능) 

 

Scope

 

자바스크립트에서는 어떤 변수들이 접근할 수 있는지 구역을 나눴다.

전역 스코프와 지역 스코프의 두 가지로 나뉘게 되는데,

 

전역 스코프: 변수가 함수 바깥이나 '{}' 바깥에서 선언되었을 때 정의

 

지역 스코프: 특정 코드 부분에서만 접근/사용 가능한 변수

 

var vs. let vs. const

 

var: EcmaScript 5버전 이하에서 사용했던 변수 선언 방식, 값이 유동적으로 변경될 수 있음

 

let: EcmaScript 6버전 이후로 추가된 변수 선언 방식, 중복 선언을 방지하고 값을 유동적으로 변경할 수 있음

 

const: var와 함께 출시, 값을 변환할 수 없음(즉, 처음에 선언된 값으로 고정되므로 자바의 final 상수와 같은 역할)

 

참고: https://velog.io/@marcus/2019-02-10-1702-%EC%9E%91%EC%84%B1%EB%90%A8