var, let, const 그리고 hoisting

2022-01-20

목요일.

먼저 알아야 하는 내용

var: 선언 및 초기화 -> 할당
let, const: 선언 -> TDZ -> 초기화 -> 할당

함께 알아야 하는 내용

TDZ: Temporal Dead Zone, What is Temporal Dead Zone
hosting: 끌어올림. (맞다. 호이스트 장비라고 생각하면 쉽다.)

중요한 차이는 var의 경우 전역으로, let, const는 블럭으로 scope를 가진다는 것인데, 어려운 사항은 Java나 C만 하다가 JavaScript를 접하는 사람 입장에서는 hoisting이 발생하는 기준이나 TDZ가 이상한 언어라는 인식을 가지게 되는 것이다.

이렇게 생각하시라

C에는 포인터가 있고 Java Spring Framework에는 Injection이 있는데, 이것을 다른 언어만 아는 사람 입장에서 보면 얼마나 황당하겠는가?

value;
var value;

위 코드에서 value는 첫 줄에 undefined였다가 두 번째 줄에 undefined가 된다. 무슨 말장난 같지만 첫 줄에서 오류가 발생하지 않는다는 점이다.

hello(`first line`);

function hello(what) {
  console.log(`Called, ${what}.`);
}

hello(`second line`);

이건 첫 줄에 first line이 반환되고, 마지막 줄에 second line이 반환된다. (이상한가? 이상하다고 느껴야 한다.) 이상하지 않다면 일단 hoisting에 대해서 안다고 할 수 있다.

hello(`first line`);

function hello(what) {
  console.log(`Called, ${what}.`);
}

function hello(what) {
  console.log(`Other Called, ${what}.`);
}

hello(`second line`);

내용을 조금 수정해서, hello()를 파라메터도 동일하게 하나 더 만들어서 실행해보면, SI프로젝트에서 개발자들이 흔히 하는 실수를 볼 수 있다.

동일한 함수명으로 소스의 위쪽과 아래쪽에 코딩을 해 놓고, 위쪽 함수를 열심히 수정하면서 반영이 안된다고. 왜 컴파일? 에러가 안나냐고 신경질을 내는 개발자와 함께 일하는 것은 생각보다 흔한 경험이다.

알고가면 좋은 사항

let, const는 hoisting 대상이 아니다
함수선언문은 hoisting 대상이지만, 함수표현식은.. 잘 살펴봐야 한다
만약 변수 vs. 함수가 이름이 같다면? 변수가 우선된다.

결론적으로 ES6만 사랑한다면 var를 쓰지말고.. 다만.. 다만 말이다.

Javascript