모던 자바스크립트 Deep Dive - let, const 키워드와 블록 레벨 스코프

keyword : [ var , let , const , 변수 중복 선언 , 함수 레벨 스코프 , 블록 레벨 스코프 , 호이스팅 , 선언 단계 , 초기화 단계 ]

 

ES5까지 변수 선언 방법은 var 키워드 사용이였다.

 

---

Var

---

 

[ 변수 중복 선언 허용 ]

var x = 1;
var y = 1;


...

var x = 100;

console.log(x);  // 100

 

var 키워드로 선언한 변수는 초기화문 유무에 따라 다르게 동작한다.

 

var x = 10;

var x ; (초기화문이 존재하지 않음 => 무시)

console.log(x);   //  10;

 

[ 함수 레벨 스코프 ]

var 키워드로 생성한 변수는 함수 코드 블록만 지역 스코프로 인정한다.

즉, 함수 외부에서 var 키워드로 선언한 변수는 전역 변수가 된다.

var x = 10;

if(true){
	var x = 20;
}

console.log(x);  // 20

 

[ 호이스팅 ]

console.log(x);  // undefined

var x = 10;

console.log(x);  // 10

코드가 실행될때 변수의 생성 과정은 선언 단계와 초기화 단계가 존재한다.

var 키워드는 선언 단계와 초기화 단계가 동시에 발생한다.

즉, 위 코드는 아래와 같이 동작한다고 볼 수 있다.

var x ;
x = undefined;

console.log(x);

x = 10;

console.log(x);

 

---

let

---

var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드 생성

 

[ 변수 중복 선언 금지 ]

let 키워드로 변수를 중복 선언하면 문법 에러가 발생한다.

 

[ 블록 레벨 스코프 ]

let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정한다.

 

[ 변수 호이스팅 ]

let과 const는 선언 단계와 초기화 단계가 동시에 발생하지 않는다.
선언 단계는 런타임 이전에 실행되지만
초기화 단계는 변수 선언문에 도달했을때 실행된다.

console.log(x);  // error

let x ;
console.log(x);  // undefined

x = 10;

console.log(x);  // 10

 

결국, 스코프의 시작 지점부터 초기화 단계 까지 변수를 참조할 수 없다. 이 구간을 일시적 사각지대 (TDZ) 라고 한다.

let x = 10;

{
    console.log(x); // reference error
    let x = 20;
}

 

이러한 현상으로 let 키워드는 변수 호이스팅이 작동하지 않는다고 많이 생각하지만,

 

(1) 호이스팅 X

let x = 10;
{
    console.log(x);  // 스코프 체인을 타고 전역 변수에 접근 해서 10을 출력했어야 한다.
    let x = 20;
}

 

(2) 호이스팅 O

let x = 10;
{
    let x;  // 선언만하고 undefined로 초기화 하지 않음. 밑에 x = 20을 만나야 20으로 값을 초기화 한다.
    console.log(x);
    let x = 20;
}

 

결국 let과 const는 호이스팅이 발생 한다.

 

---

const

---

 

const 키워드는 상수를 선언하기 위해 사용한다.
let 키워드와 대부분 동일하다.

 

[ 선언과 초기화 ]

const 키워드는 반드시 선언과 초기화가 동시에 발생한다.

const x = 1;
console.log(x); // 1

const x; // error

 

[ 재 할당 금지 ]

const x = 1;
x = 2; // error

 

[ 상수 ]

const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없다.
따라서, const 키워드를 상수를 표현할 때 사용하기도 한다.

 

[ 객체 ]

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.

const 키워드는 재할당을 금지할 뿐  ' 불 변 ' 을 의미하지는 않는다.