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

 

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

15.1.1 변수 중복 선언 허용

• var 키워드를 사용하면 중복 선언이 가능하다!
  • 단, 초기화를 위한 할당을 하지 않으면 적용되지 않는다.

 

15.1.2 함수 레벨 스코프

• 함수의 코드 블록만 지역 스코프로 인정한다.
  • if, for 등 함수가 아닌 스코프는 스코프로 인정하지 않는다.

 

15.1.3 변수 호이스팅

• 할당을 하기 전까지는 undifined로 초기화되고, 할당 후 값이 적용된다.
  • var 을 이용해 아래에 선언해 놓아도 호이스팅을 통해 에러가 나지 않는다.

 

15.2 let 키워드

15.2.1 변수 중복 선언 금지

• 이미 선언된 변수를 중복 선언시 에러가 발생한다.

 

15.2.2 블록 레벨 스코프

• 모든 코드 블록을 스코프로 인정한다.
  • 지역 변수의 범위가 var 보다 좁다.

 

15.2.3 변수 호이스팅

• var 과 동일하게 호이스팅이 동작하나, 변수가 초기화되기 전이라면 참조에러가 발생한다.
  • 선언을 통해 메모리를 확보한 단계부터 초기화 전까지는 변수 사용시 참조에러가 발생한다.
  • 호이스팅이 동작하지 않는 것처럼 보인다. → 일시적 사각지대

let foo = 1;
{
	console.log(foo); // Reference Error
	let foo = 2;
}

• 위의 동작에서 호이스팅이 일어난다고 알 수 있는 것은 지역 스코프 내부의 foo는 전역변수를 참조하고 있지 않다.
  • 순서대로 동작한다면 log의 foo는 전역변수의 foo를 참조해야하는데, 스코프 내부에서 호이스팅이 일어났기 때문에 foo가 선언된 상태이기 때문에 참조에러가 발생!

 

15.2.4 전역 객체와 let

• var 키워드로 선언한 변수와 함수, 암묵적 전역(키워드로 선언하지 않고 할당한 변수)는 전역 객체 window의 프로퍼티가 된다.
  • let 은 전역으로 선언해도 전역객체의 프로퍼티가 아니다.

var x = 3;
y = 4;

console.log(window.x); // 3;
console.log(window.y); // 4;

 

15.3 const 키워드

• 상수 선언을 위해 활용

 

15.3.1 선언과 초기화

• 선언을 하며 동시에 초기화를 해야한다!
  • 초기화 안할시 Syntax Error
• 또한 블록 레벨 스코프를 가지며 호이스팅이 되지 않는 것 같지만 호이스팅되고 있다.

 

15.3.2 재할당 금지

 

15.3.3 상수

• 재할당이 금지된 변수
• 변경되지 않는 값을 상수로 할당해 놓으면 유지보수에 수월하다.
  • 상수는 대문자로 선언한다. 스네이크 케이스를 따른다.
    • ex) TAX_RATE

 

15.3.4 const 키워드와 객체

• 원시 값은 변경 불가능한 값이다. const 로 선언하면 값을 변경할 수 없다.
• 객체는 변경이 가능한 값이다. const 로 객체를 선언하면 객체의 프로퍼티는 자유롭게 수정이 가능하다.