[JS] 변수 hoisting과 값의 할당

 

 

 

호이스팅에 대해 공부하다가 변수참조 코드가 변수 선언문 앞에 있을 때 undefined 가 뜨는 것을 보고,

그렇다면 변수 값 할당이 변수 선언문 앞에 있을 때는 어떠할지 궁금해졌다.

 

 

 

변수 선언 실행 시점과 변수 호이스팅

 

console.log(js); // undefined 변수 참조 코드

let js; // 변수 선언

변수 선언보다 변수 참조 코드가 먼저 나온 경우, referenceError가 뜨지 않고 undefined가 뜬다.

이 결과를 이해하기 위해서는

1) 변수 선언 수행 단계    2) 호이스팅   에 대한 이해가 필요하다. 

 

 

1) 변수 선언 수행 단계

자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다

• 선언 단계 : 변수 이름을 등록해 자바스크립트  엔진에 변수의 존재를 알린다
• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로  undefined를 할당해 초기화한다

 

+) 변수 선언 시 undefined 를 할당해 초기화 하는 이유?

초기화 단계를 거치지 않을 시, 확보된 메모리 공간에 이전에 사용했던 값(garbage value)이 남아 있는 경우가 생길 수 있다.

다음과 같은 경우, 메모리 공간 확보 시 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다.

자바스크립트의 암묵적 초기화는 이러한 문제점을 예방한다. 

 

2)호이스팅

컴퓨터는 코드를 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 순차적으로 실행한다.

호이스팅은 이에 대한 예외로, 호이스팅 되는 대상은 그 위치가 어디에 있건 상관없이, 코드의 선두로 끌어올린 것처럼 동작하게 된다.

자바스크립트 엔진은 런타임(소스코드를 순차적으로 실행하는 것) 이전에 소스코드 평가 과정을 거치게 되는데, 

모든 선언문(변수선언, 함수선언, class키워드 선언 등)을 이때 먼저 실행한다. 

즉 호이스팅된 선언문은 런타임 이전에 실행한다. 

 

 

 

 

 

값의 할당

js = 'love'; // 값의 할당
let js;      // 변수 선언

console.log(js); // undefined 변수 참조

다음과 같은 경우 왜 변수 참조시 위에서 할당한 값이 나오지 않을까?

 

그 이유는 다음과 같다.

1. 기본적으로 모든 코드는 순차적으로 실행된다.

2. 호이스팅 되는 것은 변수에 관한 모든 것이 아닌 '변수 선언문'이다.

 

따라서 호이스팅 되는 것은 '변수 값의 할당'이 아닌 오직 '변수 선언문'이기 때문에 다음과 같은 결과값이 나오게 된다.