[Javascript]var, let 그리고 hoisting에 대해 알아보자

이번 포스팅에서는 Javascript의 var와 let 그리고 hoisting에 대해서 알아봅시다.

 

Javascript에서 변수를 선언하는 방법은 var, let, const가 있습니다. 기존에는 var만 있었으나 es6 부터 등장한 것이 let과 const 입니다. 저는 자바스크립트 이외의 언어를 메인으로 공부했기 때문에 애초에 var가 가진 문제점에 대해서 잘 몰랐고 사용할 일도 없어서 신경을 안썼지만 어쩌다 알아버렸으니 정리를 안할 수 없겠죠.

 

자바스크립트의 var는 흔히들 사용하는 C/C++ 또는 Python 에서의 변수 선언과 상당히 다른 느낌을 지니고 있습니다. 예를 들어 이렇게 작성해보겠습니다.

 

// Javascript

console.log(a)
var a = 1
console.log(a)

/*
>>
undefined
1
*/

 

뭔가 이상하죠? 파이썬 같으면 신택스 에러가 나야 정상입니다. 하지만 자바스크립트의 var는 이렇게 하더라도 에러 없이 실행이 가능하죠. 왜 이런 일이 발생하는지, 자바스크립트의 호이스팅(Hoisting)이 무엇인지 한 번 알아봅시다.

 

자바스크립트에는 호이스팅이라고 하는 과정이 코드의 실행 전에 일어납니다. 호이스팅이랑 인터프리터가 코드를 실행하기 전에 여러 함수나 변수 등의 선언문들을 먼저 진행하는 과정을 말합니다. c언어를 좀 해보신 분들은 사용자 정의 함수가 main보다 아래에 있을 경우에 제대로 동작하지 않거나 경고 메시지가 뜨는 것을 본 경험이 있으실텐데요. 그래서 그걸 해결하기 위해 그런 것들을 전부 main 위로 옮겨주거나 애초에 다른 파일로 작성해서 main보다 위에서 import 하는 과정을 거쳐본 적이 있을 것 같습니다. 자바스크립트에서는 그런 과정을 호이스팅을 통해서 인터프리터가 알아서 해준다는 뜻이죠. 아하~ 왜 hoisting 이라고 부르는 지 알 것 같죠? hoist, 그러니까 높이 들어올리는 과정이라는 얘기죠.

 

사실 이외에도 자바스크립트는 어느 정도 문법적인 에러를 인터프리터가 알아서 보정을 해주는 과정을 거쳐서 자유도가 높은 언어라고 불리기도 합니다. 특히 잔실수가 많을 수 있는 시절에는 이런 기능들이 좋을 수 있겠죠. 하지만 저를 포함한 대부분의 사람들은 오히려 이렇게 컨트롤되지 않는 환경이 더 불편하실 것 같습니다. 흔히들 그런 얘기 하잖아요. 이게 왜 안되지 보다는 이게 왜 되지가 더 무섭다고요. 그래서 자바스크립트 개발자들도 이런 부분을 인지했는지 let과 const가 등장하게 되었습니다.

 

let과 const는 다른 언어에서 쓰는 것처럼 사용하시면 됩니다. let은 변수, const는 상수입니다. 평범하게 선언 전에 사용하면 에러가 나고, 블록 레벨 스코프로 작동합니다. 이게 아마 다들 마음이 편하실거에요.