[JavaScript] let vs. var vs. const

개요

이전 포스팅에서 var로 변수를 선언하는 것은 오래된 방식이라 했다.

이번 포스팅에서는 let과 const가 나오게 된 배경(?)에 대해 알아보도록 하겠다.

var에는 크게 3가지의 문제점이 있다.

하나씩 자세히 알아보자.

같은 이름의 변수를 중복으로 선언이 가능하여 예기치 못한 값을 반환할 수 있게된다.

var apple = 2
var apple = 3
var apple
// apple 변수의 중복 선언

먼저 스코프가 무엇인지 알아보도록 하자.

스코프란 식별자의 유효 범위를 말한다.

보통 선언 위치에 따라 정해진다.

만약 함수 내부에 선언했다면 해당 함수 내부에서만 사용 가능하게끔 정해지는 것이다.

다시 함수 레벨 스코프로 돌아와서...

자바스크립트에서는 모든 코드 블록이 지역 스코프를 만든다. 이를 블록 레벨 스코프라 한다.

var 키워드 사용시 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 한다.

스크립트를 작성할 때에는 전역 변수보다는 최대한 좁은 유효 범위를 설정하는 것을 권장한다고 한다.

따라서 함수의 코드 블록이 아닌 경우 전부 전역 변수가 되어버리는 var 사용을 지양하는 것이다.

변수 선언문 이전에 해당 변수를 참조하려고 하면 undefined를 반환한다.

console.log(a) // undefined
var a

이게 왜 문제가 되는 것일까?

변수를 초기화 하지 않아도 똑같이 undefined를 반환하기 때문이다.

var a
console.log(a) // undefined

이렇게 두 경우가 똑같다면 변수를 이전에 선언을 했었는지, 아니면 값 할당을 안한건지 구분이 안되기 때문에 문제가 된다.

그렇다면 왜 var는 두 경우 모두 undefined를 반환하는 것일까.

이를 이해하려면 호이스팅을 알아야 한다.

호이스팅이란 자바스크립트 내부적으로 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다.

즉, 변수 선언은 런타임이 아닌 그 이전 단계에서 먼저 실행된다. 아래 예제로 알아보자.

console.log(message); // undefined, 변수 선언문보다 앞에 있지만 참조 에러가 발생하지 않음
var message; // 변수 선언문

자바스크립트 엔진은 소스코드를 실행하기 전에 평가 과정을 거치면서 실행 준비를 한다. 이때 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아 먼저 실행한다. 이후에 모든 선언문을 제외한 소스코드를 순차적으로 실행하게 된다.

따라서 변수 선언문의 위치에 관계없이 다른 코드보다 먼저 실행돼 어디서든지 변수를 참조할 수 있다.

이와 같이 변수 선언문이 코드의 최상단으로 옮겨진 것처럼 동작하는 특징을 변수 호이스팅^hoisting이라 한다.

변수 선언뿐만 아니라 아래 키워드를 사용한 함수, 클래스 등의 선언도 호이스팅된다.

var, let, const, function, function*, class

MDN에서는 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것으로 설명하고 있다.

let과 const는 위의 3가지 문제점을 해결한 아이들이다.

하지만 const로 선언된 객체는 값의 재할당이 가능하다.

💡