호이스팅(Hoisting)

자바스크립트에서 코드가 도달하기도 전에 미리 변수를 사용하거나 함수를 호출하는 경우가 있다. 이는 호이스팅 현상 때문인데 이 호이스팅에 대해 살펴보겠다.

---

호이스팅(Hoisting)

호이스팅은 자바스크립트에서 변수와 함수 선언이 본인 스코프에서 가장 위로 끌어올려지는 현상을 말한다.

변수와 함수 선언은 호이스팅되어 코드가 실행되기 전에 메모리에 저장되며 미리 참조하거나 호출할 수 있다.

하지만 호이스팅이 적용되는 것은 var, function 키워드의 선언 뿐이다.

변수 생성 과정
1. 선언
2. 초기화 : undefined를 할당
3. 할당

function

function으로 선언된 함수는 호이스팅 되어 함수를 정의하기 전에 호출해도 에러를 발생하지 않는다.

test();

function test(){
    console.log(1) // 1 출력
}

하지만 화살표 함수(Arrow Function)은 let, const와 함께 사용되어 호이스팅 되지 않으니 주의해서 사용해야 한다.

test(); // ReferenceError: Cannot access 'test' before initialization

const test = () => {
    console.log(1) //
}

var

var은 호이스팅이 되어 선언될 때 초기화도 동시에 진행된다.

var은 js파일이 실행되면 호이스팅으로 인해 undefined로 선언과 초기화가 된다. 이 변수는 바로 사용해도 에러를 발생하지 않으며 할당 코드에 도달해야 데이터가 변경된다.

console.log(test) // undefined

test = 1;
console.log(test) // 1

var test;

let

TDZ(Temporal Dead Zone) : 자바스크립트에서 let과 const 키워드로 선언된 변수가 호이스팅 되지만, 그들이 실제로 초기화되기 전까지 접근할 수 없는 코드 영역

let은 호이스팅 되어 선언되지만 TDZ(Temporal Dead Zone)로 인해 접근할 수 없다, 이러한 이유로 let은 선언 단계, 초기화 단계, 할당 단계가 모두 코드에 도달해야 접근할 수 있다.

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

let test = 5;

console.log(test) // 5

const

const 역시 호이스팅되어 초기에 선언되지만 TDZ(Temporal Dead Zone)로 인해 접근할 수 없고 선언과 할당 코드에 도달해야 접근이 가능하다.

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

const test = 5;

console.log(test) // 5

const는 선언과 할당이 동시에 되어야 한다.

const test; // 'const' declarations must be initialized.ts(1155)

test = 5;
console.log(test) // 5