[JavaScript] 호이스팅(hoisting)

호이스팅(hoisting)

자바스크립트에서 호이스팅은 코드 실행 전 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 동작을 의미한다.

1. 변수 호이스팅

1.1. var

console.log(myAge); // undefined
var myAge = 28;

해당 코드는 우리가 알고 있는 동기 처리의 개념에서는 에러가 발생할 것 같지만 결과값은 undefined가 출력된다.

이는 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데 호이스팅으로 인해 실제로는 아래의 코드와 같이 동작을 한다.

var myAge;
console.log(myAge); // undefined
myAge = 28;

1.2 let,const

console.log(myAge); // ReferenceError: Cannot access 'myAge' before initialization
let myAge = 28;

console.log(myName); // ReferenceError: Cannot access 'myName' before initialization
const myName = "Lee";

var는 선언, 초기화가 동시에 이루어지기 때문에 위의 코드처럼 동작하지만
let,const는 선언단계만 호이스팅 되기 때문에 Reference Error를 출력되게 된다.

2. 함수 호이스팅

2.1 함수 선언문

함수의 선언문은 전체가 호이스팅되어 선언된 위치와 관계없이 코드 실행 전에 메모리에 올려진다.

hoisting();
function hoisting() {
  console.log('hoisting');
}

2.2 함수 표현식

함수 표현식의 경우에는 호이스팅이 되지 않는다.

hoisting(); // TypeError: hoisting is not a function
const hoisting = function() {
  console.log('hoisting');
}

References

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/hoisting.md