호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 동작을 의미합니다. 이는 코드의 실행 과정에서 변수 및 함수가 선언된 위치와 관계없이 스코프의 최상단으로 끌어올려져서 해석됩니다.
호이스팅은 다음과 같은 두 가지 현상을 포함합니다:
1. **변수 호이스팅(Variable Hoisting)**:
- 변수 선언(var, let, const)이 스코프의 최상단으로 끌어올려지는 현상입니다.
- 변수는 선언 단계에서 메모리에 할당되지만, 초기화 단계는 변수가 사용되는 코드에 도달했을 때 실행됩니다.
```javascript
console.log(x); // 출력: undefined
var x = 10;
```
위 코드는 다음과 같이 해석됩니다:
```javascript
var x;
console.log(x); // 출력: undefined
x = 10;
```
2. **함수 호이스팅(Function Hoisting)**:
- 함수 선언문(Function Declaration)은 해당 스코프의 최상단으로 끌어올려집니다.
- 함수 표현식(Function Expression)은 호이스팅되지 않습니다.
```javascript
exampleFunction(); // 출력: "Hello, World!"
function exampleFunction() {
console.log("Hello, World!");
}
```
위 코드는 다음과 같이 해석됩니다:
```javascript
function exampleFunction() {
console.log("Hello, World!");
}
exampleFunction(); // 출력: "Hello, World!"
```
호이스팅은 코드의 가독성을 향상시키지 않으며, 실수를 일으킬 수 있는 원인이 될 수 있으므로 주의해야 합니다. 코드를 작성할 때 변수 및 함수 선언을 그 위치에서 함께 사용하는 것이 가독성과 유지보수에 더 유리합니다.