변수 호이스팅

"변수 호이스팅"

console.log(score); // undefined
var score = 10;

변수를 선언도 하기 전 참조를 하면 참조에러가 나올 것 같지만

undefined라는 값이 나온다. 이러한 현상을 변수 호이스팅이라고 한다.

호이스팅이란 얘기는 끌어올린다는 얘긴데 흡사 변수의 선언문이 끌어올려진 것처럼 동작한다고 해서 변수의 호이스팅이라고 한다.

 

자바스크립트 엔진이 자바스크립트를 실행할 때 동기적으로 실행되지만 코드 안에 있는 선언문만을 먼저 실행한다.

var score = 10; // 이 문은
var score; // 변수 선언문
score = 10; // 변수 할당문을 합친 것

console.log(score); // undefinde
var score;
score = 10;

세 줄의 자바스크립트 코드를 실행할 때 변수선언문인 2번 라인을 먼저 실행하게 됨.

1번 라인이 실행될 때에는 벌써 변수가 선언된 상태이다.

그러면 왜 10이 나오지 않고 undefined가 나오냐면 변수 할당문이 아닌 변수 선언문만 먼저 실행되기 때문이다.

할당문은 한 줄 한 줄 자바스크립트가 실행될 때 실행되기 때문이다.

var score;
console.log(score); // undefined
score = 10;

그래서 이런 식으로 실행된 것처럼 동작한다.

 

이것도 let이나 const와 var키워드 사이의 다른 점이다.
var키워드로 선언한 변수는 호이스팅 하지만 let이나 const로 선언한 변수는 변수 호이스팅이 되지 않는 것처럼 동작한다.