134 lines
3.5 KiB
Markdown
134 lines
3.5 KiB
Markdown
# 호이스팅 (Hoisting)
|
|
|
|
호이스팅에 대해 알아보자.
|
|
|
|
## 목차
|
|
|
|
- [호이스팅이란?](#호이스팅이란?)
|
|
- [호이스팅 예제](#호이스팅-예제)
|
|
- [let과 const의 호이스팅](#let과-const의-호이스팅)
|
|
|
|
---
|
|
|
|
### 호이스팅이란?
|
|
|
|
호이스팅(Hoisting)이란 단어 뜻 그대로 끌어올리는 역할을 한다.
|
|
자바스크립트에서 변수나 함수의 선언이 `유효범위`의 최상단으로 끌어올려지는 것을 의미한다.
|
|
> 실제로는 최상단으로 끌어올려지지 않고 작성한 위치에 그대로 있다.
|
|
> 외부적으로 끌어올려지는 것처럼 보일 뿐.
|
|
|
|
호이스팅을 사용하면
|
|
1. 선언하지 않은 변수에 접근할 수 있다는 장점아닌 장점을 가지고 있다.
|
|
2. 코드 상에서 아직 선언되지 않은 함수를 실행할 수도 있다.
|
|
|
|
코드를 통해 자세히 알아보자.
|
|
|
|
---
|
|
|
|
### 호이스팅 예제
|
|
|
|
```javascript
|
|
console.log(simple())
|
|
function simple() {
|
|
return 'simple';
|
|
}
|
|
|
|
console.log(simple2())
|
|
var simple2 = function() {
|
|
return 'simple2';
|
|
}
|
|
|
|
console.log(simple3())
|
|
const simple3 = function() {
|
|
return 'simple3';
|
|
}
|
|
|
|
|
|
```
|
|
|
|
5개의 출력의 결과값은 각각 어떻게 될까?
|
|
|
|
1.
|
|
```javascript
|
|
console.log(simple()) // 'simple'
|
|
function simple() {
|
|
return 'simple';
|
|
}
|
|
```
|
|
|
|
가장 일반적인 구조의 함수 선언문이다.
|
|
`function` 키워드를 통해 선언한 함수는 유효범위의 최상단으로 호이스팅되어 `simple`을 반환한다.
|
|
|
|
---
|
|
|
|
2.
|
|
```javascript
|
|
console.log(simple2()) // TypeError: simple2 is not a function
|
|
var simple2 = function() {
|
|
return 'simple2';
|
|
}
|
|
```
|
|
|
|
위의 코드는 호이스팅에 의해 다음과 같은 모습이 될 것이다.
|
|
|
|
```javascript
|
|
var simple2;
|
|
console.log(simple2()) // TypeError: simple2 is not a function
|
|
simple2 = function() {
|
|
return 'simple2';
|
|
}
|
|
```
|
|
|
|
최상단으로 끌어올려진 `simple2` 변수는 초기화가 되어있지 않아 `undefined` 값을 갖는다.
|
|
결과적으로 TypeError을 발생시킨다.
|
|
|
|
---
|
|
|
|
3.
|
|
```javascript
|
|
console.log(simple3()) // ReferenceError: Cannot access 'simple3' before initialization
|
|
const simple3 = function() {
|
|
return 'simple3';
|
|
}
|
|
```
|
|
2번의 코드에서 `var` -> `const`로 바꾸었다.
|
|
const는 var와 달리 ReferenceError을 낸다.
|
|
|
|
`simple2는 함수가 아니다.` 라는 에러와 `simple3가 초기화 되기 전에는 접근할 수 없다.`
|
|
|
|
후자가 에러의 원인을 더 쉽게 찾을 수 있지 않을까?
|
|
|
|
***그나저나 `const`는 호이스팅이 일어난걸까?***
|
|
|
|
`let과 const의 호이스팅`에 대해서는 밑에서 다루겠다.
|
|
|
|
|
|
---
|
|
|
|
### let과 const의 호이스팅
|
|
|
|
위의 3번 예제에서 `let, const`도 호이스팅이 발생하는가에 대한 의문을 가지게 되었다.
|
|
다음의 코드를 살펴보자.
|
|
|
|
```javascript
|
|
const x = 'global';
|
|
function test() {
|
|
console.log(x);
|
|
const x = 'local';
|
|
};
|
|
|
|
test(); // ReferenceError: Cannot access 'x' before initialization
|
|
```
|
|
|
|
위 test 함수를 실행하면 레퍼런스 에러가 발생한다. 왜 그럴까?
|
|
const가 호이스팅이 발생하지 않는다면 `'global'`이 출력되어야만 한다.
|
|
|
|
**즉, const에서도 호이스팅이 일어났음을 알 수 있다.**
|
|
|
|
추가적으로 변수의 선언과 변수에 값을 할당하는 과정 사이에 `TDZ(Temporal Dead Zone)`라는 것이 존재한다.
|
|
|
|
위 코드에서 3번라인에서 x를 출력하려는 시도는 아직 TDZ에 해당하는 x에 대해 접근했기 때문에 레퍼런스 에러가 발생한 것이다. *(초기화, 즉 const의 경우 할당이 일어나기 전의 접근은 차단한다)*
|
|
|
|
---
|
|
|