Record

자바스크립트 - 호이스팅 본문

HTML/수업리뷰

자바스크립트 - 호이스팅

pf.styx 2024. 4. 16. 19:39

호이스팅(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!"
```

호이스팅은 코드의 가독성을 향상시키지 않으며, 실수를 일으킬 수 있는 원인이 될 수 있으므로 주의해야 합니다. 코드를 작성할 때 변수 및 함수 선언을 그 위치에서 함께 사용하는 것이 가독성과 유지보수에 더 유리합니다.