[자바스크립트]ES6 문법정리(2) - 호이스팅 그리고 const, let

목차

1. [자바스크립트]ES6 문법정리(1) - var의 문제점

 
 
지난 문법정리에서는 자바스크립트에서 var을 사용함으로써 발생하는 문제점들을 나열해보았다. 
간단하게 정리해보면, var은 블럭레벨에서 선언했음에도 불구하고 그 범위를 벗어났을 때 계속 남아있었다. 또한, 긴 코드문을 작성할 때 변수를 중복선언해도 오류가 없이 작동하여 유지보수 시간이 늘어날 수 있다. 또 변수를 나중에 선언했음에도 앞쪽에서 변수를 사용했을 때 undefined라는 값이 찍히며 정상으로 작동한다. 이는, 오늘 알아볼 변수의 호이스팅 때문이다.
 
 

호이스팅

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

위 페이지의 설명글을 인용하자면, JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 인터프리터(Interpreter)란, 해석기 혹은 통역사라는 의미로 프로그래밍 적으로는 소스 코드를 바로 실행하는 환경을 말한다. 즉 자바스크립트의 개발 환경에서 소스를 실행시켰을 때 메모리 공간을 먼저 할당하는 것이라고 볼 수 있다.
 

예제 1-4

console.log("sum = ", sum); //sum = undefined
var sum;

 
예제 1-4를 보면 var로 선언된 변수 sum이 나중에 선언되었음에도 console.log에는 값이 undefined라고 찍힌 것을 볼 수 있다. var의 경우 변수를 선언하면 undefined로 초기화되어 호이스팅 된다. 이 초기화 과정은 앞서 설명한 대로 코드를 실행시키기 전 메모리 공간을 할당하는 것이기 때문에 가장 앞쪽으로 끌어올려져 실행되는 형태가 되는 것이다.
 

예제 1-5

console.log("sum = ", sum); //sum = undefined
var sum; //선언
sum = 3; //초기화

 
예제 1-5의 경우 sum=3이라고 선언 후 초기화를 하였지만 undefined라고 찍힌 것을 볼 수 있다. 자바스크립트는 초기화를 제외한 선언만 호이스팅한다.
 
앞서 말했듯 var로 선언한 변수는 undefined로 초기화되어 호이스팅되기 때문에 문제가 발생할 수 있다. 그래서 ES6에서 var대신 const, let을 사용할 수 있게 되었다.
 

const, let

이 둘 또한 var과 마찬가지로 변수를 선언할 때 사용한다. 하지만 const와 let은 var과는 달리 undefined로 초기화되어 호이스팅되지 않는다.
 

예제 1-6

console.log("sum = ", sum); //Error: Uncaught ReferenceError: sum is not defined
let sum;

console.log("sum = ", sum); //undefined

 
예제 1-5와 마찬가지로 변수를 선언하기 전 호출한 모습이다. var과는 달리 참조 에러메시지가 노출된다. 에러메시지로 인해 어느 부분에서 해당 코드를 사용했는지 쉽게 알 수 있다. 휴먼에러가 발생하더라도 더욱 빠르게 유지보수를 할 수 있다.
 
변수는 '선언 단계 > 초기화 단계 > 할당 단계' 에 걸쳐 생성된다.
var의 경우 선언과 초기화 단계가 동시에 일어나지만, let과 const의 경우 선언과 초기화 단계가 분리되어 진행된다.
때문에, 스코프의 선두에 선언 단계가 최초 실행되지만 초기화 단계는 아직 발생하지 않아 참조에러(ReferenceError)가 발생하고 변수 선언문에서 초기화 단계가 실행되어 두번째 console.log에서 undefined라는 값이 찍히는 것이다.
 
이렇게 선언과 초기화단계가 분리되면서 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지게 된다. 

let과 const간의 차이점도 존재하는데 let은 변수 재할당이 가능하지만 const는 재할당이 불가능하다.

예제 1-7

let sum;
console.log(＂sum = ＂, sum); //undefined

sum = 3;
console.log(＂sum = ＂, sum); //sum = 3

const sum2;
console.log(＂sum2 = ＂, sum2); //undefined

sum2 = 3;
console.log(＂sum2 = ＂, sum2); //ERROR

위와 같이 let은 재할당을 통해 변수의 값을 변경할 수 있지만 const는 constant(상수)의 의미대로 최초 선언 후 값을 변경할 수 없다는 점이 있다. 이는 불필요한 변수의 재사용을 방지한다.

다음은, 함수 호이스팅과 화살표 함수(Arrow Function)에 대해 학습해보고자 한다.