Javascript-var hoisting

hoisting의 의미

코드를 실행하기 전, 변수(함수) 선언이 해당 스코프의 최상단으로 끌어올라간 것 같은 현상이다. 실제로 위로 올라간 게 아니다.

실행 컨택스트

• 자바스크립트에는 실행 컨택스트가 있다. 실행 가능한 코드가 실행되기 위해 필요한 환경정보를 모아놓은 객체이다.
• 자바스크립트 엔진은 코드를 실행하기 전에 실행 컨택스트를 생성하는 과정에서 식별자(변수와 함수 이름)를 수집하여 메모리에 미리 저장해둔다.

실행하기도 전에 자바스크립트는 어떤 변수와 함수가 있는지 다 알고 있다🤓

변수의 생성 단계

1. 선언
2. 초기화
3. 할당

• var foo; 선언과 함께 undefined로 초기화되어 메모리에 저장된다.
• let foo; const bar; 선언은 되지만 초기화는 되지 않는다.

초기화되지 않으면 변수를 참조할 수 없다.

var

1. 변수 선언 이전에 변수를 참조할 수 있다.

console.log(a); ---> undefined🫥
var a = 1;

2. 블록 레벨 스코프를 따르지 않는다.

var foo = 123; // 전역 변수

console.log(foo); ---> 123

{
    var foo = 456; // 전역 변수
}

console.log(foo); ---> 456

3. 이름을 중복해서 할당할 수 있다.

var foo = 123;
var foo = 456;

let

1. 변수 선언 이전에 변수를 참조할 수 없다. 초기화되는 문장을 만나기 전까지 변수를 참조할 수 없는데, 이를 일시적 사각지대(Temporal Dead Zone; TDZ)라고 한다.

console.log(a); ---> Error🚨
let a = 1;

Uncaught ReferenceError: Cannot access 'a' before initialization

2. 지역 변수와 전역변수의 경계가 명확하다.

let foo = 123; // 전역 변수

console.log(foo);

{
    let foo = 456; // 지역 변수
}

console.log(foo);

3. 이름을 중복해서 사용할 수 없다.

let foo = 123; 
let foo = 456; ---> Error🚨

const

재할당이 불가하다.

참고 자료

• hanamon
• robinkim93