7-2. 실행 컨텍스트와 클로저의 선행 개념2 : 호이스팅

호이스팅의 개념을 정리하는데 있어 js코드의 '평가'와 '실행' 과정을 알아야한다.

이 내용은 실행 컨텍스트 절 에서 자세히 다룰거며

지금은 호이스팅의 개념을 정리하는데 단순히 '평가'와 '실행' 용어만 사용하여 호이스팅을 정리하는데 중점을 두어 글을 작성했다.

 

1. var 호이스팅

js코드는 '평가'와 '실행' 과정을 거치게 된다. 이 두 과정에서 변수의 호이스팅이라는 현상이 발생한다. 

var 키워드로 선언된 var a= 10; 이란 코드를 보면 

코드의 평가 과정에서는 a가 등록되고 값으로 undefind가 할당된다. 

그리고 '실행' 과정에서 비로서 a에 10이라는 값이 할당된다. 

 

console.log(a);
var a = 10;

위 코드를 보면 '평가' 과정에서는 console.log()문이 실행되지 않고 a = undefined로 변수가 정의 된다. 

그리고 '실행' 과정에서 console.log(a)가 실행되고 그 이후 a에 10이 할당된다. 

위 코드만 단순히 보면 a의 값이 console.log()문보다 뒤에 있는데 어떻게 console.log문이 a의 값을 인지하지? 라고 생각할 수 있지만 실제로 '평과' '실행' 과정을 보면 a가 먼저 등록이 되기 때문에 코드의 '실행' 과정에서 a를 사용할 수 있게 된다. (단지 10이라는 값은 console.log 문 보다 뒤에 할당된다.)

이 처럼 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작하는 것이 호이스팅의 개념이다. 

 

 

 

2. let, const 호이스팅

var 키워드의 호이스팅 개념을 정리했는데 이것은 매우 치명적 단점이 될 수 있다. 

var 키워드의 호이스팅으로 인한 단점을 보완하기 위해 ES6부터 let과 const 변수 선언 키워드가 도입되었는데 

이 let, const 변수들은 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

이 문구를 잘 이해해야하는데 실제로는 let, const 역시 변수 호이스팅이 발생한다. 

 

변수 호이스팅이 발생한다 함은 var에서 정리한 것과 같이 코드의 평가 과정에서 먼저 변수의 선언이 이루어지고 실행 과정에서 값의 할당이 이루어지므로 변수 선언문이 어느 위치에 선언되어 있던 스코프의 제일 처음 위치에 선언된 것과 같은 현상을 말하는데 

 

let, const는 변수 호이스팅이 실제로 발생한다. -> 실제로 스코프의 선두에 선언된 것과 같은 효과를 가지긴한다.

let, const는 변수 호이스팅이 발생하기는 하지만 호이스팅이 발생하지 않는 것처럼 동작한다. ->

이 말의 뜻은 실제 선두에 선언되는 것처럼 동작하기는 하지만 var에서 예제 코드와 같이 사용하지는 못한다는 의미이다 

 

console.log(a)
let a = 10;

위 코드를 통해 다시 정리해보면 위 코드의 실행 결과는 결론적으로 ReferenceError을 발생 시킨다. 

위 코드가 '평가'되면 a가 선언되고 a의 값은 undefind가 선언되지 않고, 값을 <uninitialized>라고 부르기로 약속했다.

실제로 <uninitialized>이와 같은 값이 할당되는 것이 아니다. 

'평가'과정이 끝난 뒤 '실행'과정에서 console.log(a)먼저 실행되는데 a에는 아무런 값도 없기 때문에 ReferenceError를 발생시킨다. 

이 처럼 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)가지 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 이 구간을 '일시적 사각지대'라고 부르며 이런 '일시적 사각지대'라는 용어를 설명하기 위해 <uninitialized>라는 추상적인 개념이 도입된 것이다.