let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

1. 변수 중복 선언 허용

2. 함수 레벨 스코프

- var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

- 따라서 함수 외부에서 var 키워드로 선언한 변수는 블록 내에서 선언해도 모두 전역 변수가 된다.

3. 변수 호이스팅

- var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진 것처럼 동작한다.

- 즉 변수 호이스팅에 의해 var 키워드로 선언한 변수는변수 선언문 이전에 참조할 수 있다.

- 에러를 발생시키지는 않지만 프로그램 흐름상 맞지 않을뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

 

 

let 키워드

1. 변수 중복 선언 금지 가능

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

2. 블록레벨 스코프

- 코드블록(함수, if문,for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 가진다.

3. 변수 호이스팅

아래는 var 키워드 예제다.

- 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

- let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행된다.

- 즉 런타임 이전에 자바스크립트 엔진에 의해 선언단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

- let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수선언문)까지 변수를 참조할 수 없다.

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

- let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보이지만 그렇지 않다,

- 아래 예제를 봐보자

- let 키워드로 선언한 변수의 경우 변수 호이스팅이 발생하지 않는다면

위 예제는 전역변수 foo의 값을 출력해야한다.

하지만 let 키워드로 선언한 변수도 여전히 호이스팅을 발생하기 때문에

 코드 블록의 시작점부터, 초기화가 이루어지는 지점까지의  TDZ에 의해 ReferenceError를 발생하게 된다.

 

 

 

const 키워드

- const 키워드는 상수를 선언하기 위해 사용된다.

- const 키워드로 선언한 변소는 반드시 선언과 동시에 초기화해야한다.

- 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

- 재할당이 금지 된다.

- 상수는 재할당이 금지된 변수이므로 const 키워드를 상수로 표현하는데 사용하기도 한다.

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

 -> 변경 불가능한 원시 값은 재할당 없이 변경할 수 있는 방법이 없지만 변경 가능한 값인 객체는 재할당 없이도 직접 변경이 가능하기 때문이다.

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