호이스팅은 '끌어올리기'이다.
자바스크립트의 실행 컨텍스트를 이해했다면 이 개념 또한 이해할 수 있다.
요상한 것
자바스크립트로 코드를 작성하다보면 var 키워드로 변수를 선언했을 때 이상한 경험을 하게 된다.
console.log(num)
var num = 10;위 코드의 결과 undefined가 출력되게 된다.
아직 선언과 초기화가 이루어지지 않은 변수 num에 대해서 undefined 아직 정의되지 않았다는 값이 초기화되어 있는 것이다.
실행 컨텍스트
이전에 실행 컨텍스트를 이해하면서, 실행 컨텍스트의 2가지 단계에 대해서 알아봤다.
- Creation phase
- Execution phase
다시 떠올려보면, Creation phase, 실행 전 단계에서 실행 컨텍스트를 생성하고, 변수의 선언과 함수의 선언을 먼저 입력하는 단계가 있었다.
이로 인해 변수가 끌어올려져 먼저 선언된 것 같은 호이스팅을 볼 수 있는 것이다.
console.log(num)
var num = 10;- 실행 컨텍스트가 생성될 때,
num이라는 변수를 VO(Variable object)에 선언한다.undefined상태 - 아직 값은 초기화 되지 않은 상태에서
console.log(num)이 실행되어undefined를 출력한다. - 그리고 변수
num에 값을 할당한다.
let과 const
var의 경우 이렇게 진행되지만, let과 const는 다르다.
let과 const는 호이스팅 대상이 되지만 undefined로 초기화되지 않고, 초기화 이전 사용된다면 Reference Error가 발생한다.
이는 시간상 사각지대 (Temporal Dead Zone, TDZ)의 이해가 필요하다.
'use strict'
자바스크립트의 다양한 자유도 덕분에 개발 상 문제가 될 수 있다.
호이스팅과 같이 초기화되지 않은 변수를 가져다 쓸 수 있다거나, 변수의 오타를 전역변수로 생성해 사용한다던가, 여러가지 이유로 엄격한 모드 (strict mode)를 사용하도록 할 수 있다.
'use strict'
// 코드코드 상단에 'use strict'를 통해 사용할 수 있다.
참고
주니어 개발자입니다. 🚀