이번 글에서는 JavaScript 의 var 와 let 의 간단한 차이를 알아보려합니다.
JavaScript 에서는 변수 선언을 var, let, const 로 사용이 가능합니다.
const 는 상수형으로 재할당과 재선언이 불가능합니다. 아래와 같은 코드가 가능하지만요..ㅎ
const blog = {
title: 'blog title'
}
blog.title = 'changed';
console.log(`blog.title = ${blog.title}`)
재할당과 재선언이 아니기 때문입니다
호이스팅
var 와 let 을 이해하기 위해서는 호이스팅의 개념을 이해해야합니다. 호이스팅 개념을 처음 들어보신다면 호이스팅 개념을 찾아보시기를 권합니다.
호이스팅을 간단히 요약해보면 아래와 같이 요약할 수 있습니다.
JS 엔진은 함수와 변수 선언의 정보를 미리 알고 있다
var, let 차이
변수는 선언, 초기화, 할당 3 단계로 동작합니다.
- 선언 : 변수 객체에 변수를 수집하여 등록한다.
- 초기화 : 등록된 변수를 위한 메모리 할당 후 undefined 로 초기화한다.
- 할당 : 실제 값을 할당한다.
var
var 는 선언과 초기화가 일련의 과정으로 이루어집니다.
메모리 할당이 되었기 때문에 선언 순서에 상관없이 사용이 가능
let
let 은 선언만 이루어집니다.
메모리 할당은 선언부에서 이루어지기 때문에 선언부 위에서는 변수 참조 불가능
변수 할당 예제
var foo = 1;
console.log(`foo = ${foo}`);
if (foo) {
var foo = 2;
console.log(`foo = ${foo}`);
}
console.log(`foo = ${foo}`);
let bar = 1;
console.log(`bar = ${bar}`);
if (bar) {
let bar = 2;
console.log(`bar = ${bar}`);
}
console.log(`bar = ${bar}`);
foo = 1
foo = 2
foo = 2
bar = 1
bar = 2
bar = 1
let 은 정의된 블록 안쪽 범위에서만 유효하다.
개인적으로는 특별한 이유 없이는 var 가 아니라 let 을 사용해야한다고 생각합니다. TypeScript 열거형 글을 보면 TypeScript 의 enum 을 보면 var 를 유연하게 사용한 것을 볼 수 있습니다. var 가 가진 특성이 유연한 상황을 만들 수 있지만 위험도 있기 때문에 최대한 자제하는 것이 바람직하다고 조심스레 생각해봅니다.