모던자바스크립트 Deep Dive - 2

연꽃·2021년 12월 8일

컴퓨터 서적

목록 보기

3/14

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

🏀 호이스팅이란?

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 즉, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것이다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

이는 자바스크립트에서 소스크드를 순차적으로 실행하는 런타임 이전에, 소스코드 실행을 위한 준비 단계인 소스코드의 평가과정이 있기 때문이다. 소스코드의 평가 과정도 '선언단계', '초기화 단계'로 나뉜다.


console.log(dodo)

var dodo //선언단계

dodo === undifined //초기화 단계

dodo = 1 //할당 단계

위 코드에서 선언단계와 초기화 단계가 소스코드의 평가 과정에서 실행된다. 그렇기 때문에 실행을 가장 위의 코드에서 해주어도, ReferenceError이 발생하는 것이 아니라 undifined가 나오게 된다.

🏀 var의 문제점

변수 중복 허용 : 이는 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다.
함수 레벨 스코프 : 이전의 공부에서 살펴본 것과 같이 var는 함수 레벨 스코프이다. 따라서 if문이나 for문과 같은 블록 레벨 스코프에서는 var로 선언한 변수가 전역 변수가 된다. 이는 전역 변수를 남발할 가능성을 높이기 때문에 문제가 될 수 있다.

🏀 let

let은 var의 단점을 보안하기 위해 ES6에서 도입되었다.

변수 중복 선언 금지
let은 변수 중복 선언을 금지한다.

let dodo = 111;
let dodo = 444; //SyntaxError: Identifier 'dodo' has already been declared

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

let bin = 1;
{
  let bin = 2;
  let eun = 3;
  console.log(bin) // 2
}
console.log(bin); // 1
console.log(eun); // ReferenceError: eun is not defined

변수 호이스팅
var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작한다.

console.log(bin); // ReferenceError: bin is not defined

let bin;

이는 변수의 생명주기와 관련이 있다.

위 표에서 보이는 것처럼, var 키워드로 선언한 변수의 경우 선언, 초기화 단계가 한 번에 이루어 지지만 let 키워드로 선언한 변수는 선언단계 이후 일시적 사각지대가 존재하고 그 이후에 초기화 단계가 이루어진다. 그렇기 때문에 일시적 사각지대에서는 변수를 참조할 수 없다. 때문에 ReferenceError가 발생한다.