Hoisting : (var) vs (let)
Hoisting
javascript에서 Hoisting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
(hoist 라는 용어는 '감아 올린다'라는 말을 내포하고 있다.)
C에 대한 경험이 있다면 C는 순차적인 언어(Procedural Language)이기에 함수의 원형 (Prototype)을 가장 윗부분에 선언해주었던 기억이 있을 것이다.
Javascript에서는 함수 선언 전에 해당 함수를 호출한다고 하였을 때, 이미 Hoisting으로 해당 함수에 대한 정보가 있기에 에러를 발생시키지 않고 함수가 실행이 된다. 또한 변수의 경우에도 선언 이전의 변수에 대해 console.log를 찍어본다고 가정하면, 에러가 발생하지 않는다.
위의 예제는 호이스팅으로 인해 아래의 예제처럼 작동할 것이다.
Var vs Let
한편 Javascript의 var는 다음과 같은 문제가 발생할 수 있다.
반복문 내에서만 변수를 사용하고싶은 목적으로 C, Java 같은 언어처럼 block level scope를 기대하였는데, 정작 i라는 변수가 전역 변수처럼 사용되고 있다.
아무리 Clever한 프로그래머라고 한들 1000/10000 단위의 코드를 다루면서 이러한 변수들을 일일이 Checking 하는 것은 불가능에 가까운 일이다.
Javascript는 웹의 동적인 동작을 위해 10일 만에 급조하여 탄생한 언어이기에 상당한 문제를 많이 가지고 있었다.
이에 거듭되는 ECMA Script version update로 문제들을 해결해오고 있었는데, 이 케이스의 문제를 해결하기 위해서 ES6(Ecma Script 6 - 2015) 버전에서는 let이라는 변수가 도입되었다.
이처럼 let을 사용하면 지역변수의 효과를 얻을 수 있게 되는데, 또한 var가 가지고 있던 hoisting issue도 보완할 수 있다.
var의 경우라면 에러를 표출하지 않고 undefined를 표출했을 텐데, let을 사용함으로써 변수 사용의 혼란을 줄일 수 있게 된다.
따라서 "제발 Var를 쓰지 말고 Let을 쓰자!!"라는 움직임이 활발해지게 되었다.
