자바스크립트 var, let 차이점과 호이스팅

 

 

자바스크립트를 처음 공부하다보면 변수를 정의할 때 사용하는 var와 let을 제대로 구분하지 못하고 사용하는 경우가 많다. 보통 구글링을 해보면 자바스크립트의 표준인 ES6가 나온 2015년 전 글들은 대부분 var을, 그 이후에는 점차 let으로 변수를 표시하는 예제들이 많아진다. 결론은 변수를 선언할 때 var를 쓰지 말고 let을 쓰자는게 관건인데, 어떤 이유에서 그런 것인지 간단하게 설명하도록 하겠다.

 

var num = 100
var name = "jay"
console.log(num)

 

C/C++과 같은 언어들과 다르게 자바스크립트에는 특이한 특징이 있는데, 자바스크립트 코드를 실행시킬 때 코드가 실행되기 전에 선언해둔 변수들과 함수들을 미리 검색해서 메모리에 저장을 해둔다. 그러다가 위의 코드에서 console.log 함수로 출력할 때, 메모리에 저장해둔 num을 가져와서 사용한다. 이게 호이스팅(Hoisting)이라는 개념인데, 쉽게 이해하자면 코드를 실행하기 전에 안에 있는 변수들을 최상단으로 끌어올리는 것이라고 생각하면 된다.

 

console.log(num)
var num = 100
console.log(num)

 

위의 코드를 보면  C/C++ 개발자 입장에서는 num을 찾을 수 없다는 에러가 나는 코드로 보일텐데, 자바스크립트에서는 위에서 설명한 호이스팅이라는 개념 덕분에 실행이 가능하다. 일단 결과는 undefined와 100이 출력된다. 자바스크립트 코드를 실행시키는 엔진이 미리 num이라는 변수를 메모리에 저장했기에, 첫 번째 출력에서 num을 읽어올 수 있지만 할당이 되지 않아서 undefined가 호출된다. 두 번째 출력에서는 num에 100이 할당된 상태이기 때문에 우리가 예상하는 100이 나온다. 처음 호이스팅 될 때 변수의 선언과 함께 undefined로 초기화시켜버리고, 할당은 코드가 처음부터 실행되면서 해당 줄에 가서 할당을 하는 것이다.

 

console.log(num)
num = 100
var num
console.log(num)

 

심지어 자바스크립트에서는 위와 같은 코드도 실행된다. 선언이 안된 변수에 값을 넣고 뒤에서 선언을 해도 호이스팅 때문에 실행이 가능한 것이다. 상당히 자바스크립트가 느슨하고 포용력이 좋은 언어라는 것을 알 수 있다. 참고로 자바스크립트에서는 동일한 이름의 변수를 두 개 선언해도 실행이 가능하다.

 

 

console.log(num)
let num = 100
console.log(num)

 

var에서 변수를 정의하기 전에 값을 먼저 넣거나, undefined로 정의하되고 변수가 중복되어 발생하는 문제들 때문에 나온 것이 let인데, 위와 같은 코드를 실행하면 C/C++과 마찬가지로 첫 번째 출력 때 num을 찾을 수 없다는 참조 에러가 나온다. 이러한 참조 에러가 나오는 이유가 let이 가진 TDZ(Temporal Death Zone) 개념 때문이다. 즉, 자바스크립트 엔진에서 호이스팅으로 num이 선언된 것은 알겠으나, 선언문이 나오기 전까지 첫 번째 줄은 일시적으로 죽은 영역이라는 것을 알려서 접근을 막는 것이다.

여기까지 자바스크립트에서 호이스팅과 var가 가진 문제점들, let과 TDZ라는 개념을 함께 소개했다. C/C++ 개발자 입장에서는 사실 당연히 변수 선언에 있어서는 개념적으로 처음부터 let을 사용하는 것이 맞다 생각하겠지만, let이 2015년에 나왔다는 것을 감안해볼 때 var와 같은 변수 선언이 인터프리터 언어에서는 기본적인 특징이 아니었을까 생각해본다. 요즘 웹 개발 면접에서 var와 let 차이점을 물어보는 경우도 있다고 하는데, 이와 같은 내용을 알고 있다면 도움이 되지 않을까 싶다.