Javascript 호이스팅에 대해 설명해주세요.

dowon kim·2023년 8월 20일

JavaScript에서 호이스팅(Hoisting)이라는 용어는 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상을 의미합니다. 이 과정은 컴파일 단계에서 발생하며, 변수와 함수가 선언되기 전에 참조되어도 오류가 발생하지 않습니다. 호이스팅은 아래와 같이 구체화될 수 있습니다.

변수 호이스팅 (Variable Hoisting):
var로 선언된 변수는 선언이 실행 컨텍스트의 변수 객체(Variable Object)에 추가되며, 그 변수는 선언된 코드 라인에 도달하기 전까지 undefined로 초기화됩니다.

예시:
```
console.log(a); // undefined
var a = 5;
console.log(a); // 5
```
위 코드는 컴파일 단계에서 아래와 같이 변환됩니다.
```
var a = undefined;
console.log(a); // undefined
a = 5;
console.log(a); // 5
```
함수 호이스팅 (Function Hoisting):
함수 선언식은 전체 함수가 호이스팅되며, 함수 표현식은 변수 호이스팅과 동일하게 처리됩니다. 함수 선언식은 아래와 같이 작동합니다.

예시:
```
console.log(foo()); // "Hello!"
function foo() {
  return "Hello!";
}
```
함수 표현식의 경우:
```
console.log(foo()); // TypeError: foo is not a function
var foo = function() {
  return "Hello!";
};
```
함수 선언식은 선언 전에 호출할 수 있지만, 함수 표현식은 그렇지 않습니다.
let과 const의 호이스팅:
let과 const는 var와 달리 선언 전에 참조하려고 하면 참조 오류(ReferenceError)가 발생합니다. 이는 일시적 사각 영역(Temporal Dead Zone, TDZ) 때문에 발생하며, 호이스팅이 발생하더라도 값에 접근할 수 없는 상태를 나타냅니다.
중복 선언의 문제:
함수 선언과 변수 선언이 같은 스코프 내에 있을 경우, 변수 선언이 함수 선언을 덮어쓸 수 있습니다.