var, let 그리고 const

You Don't Know JS Yet 책에서 계속 var, let 그리고 const에 대해 언급하여 변수 선언 키워드들의 차이점을 정리해볼까 한다.

중복 선언 가능 여부, 재할당 가능 여부, 스코프 범위, 호이스팅 동작 방식 을 기준으로 차이점을 살펴보자.

중복 선언 가능 여부

중복 선언 이란 이미 선언했던 변수의 이름과 동일한 이름으로 다시 변수를 선언하는 것을 말한다.

중복 선언에는 명확한 단점이 몇 가지 존재한다.

1. 유연하지만 기존에 선언해둔 변수를 잊고 재선언하는 경우 문제가 발생할 수 있다. (코드 규모가 클 경우 분명한 단점이 될 수 있다고 생각한다)

2. 값이 어디서 덮어 씌워졌는지 알지 못해 디버깅에 어려움이 생길 수 있다.

3. 코드의 가독성과 유지보수성을 떨어뜨린다.

You Don't Know JS Yet 저자는 var 도 상황에 맞게 쓴다면 좋다고 한 적이 있는데, 대규모의 코드에 var을 활용할 수 있을까하는 의문이 든다.

var은 명백한 단점이 존재하기에, 반드시 활용해야 할 상황이 아니고서야 쓰지 않는 것이 나는 좋다고 생각한다.

그래서 다음엔 var을 써야만 하는 상황이 있을 수 있는가? 에 대해서 알아보려고 한다.

중복 선언의 예시에 대해 살펴보자.

// 중복 선언 예시

var name1 = "홍길동";

...

// 중복 선언
var name1 = "김아무개";

var : 중복 선언 가능
let : 중복 선언 불가
const : 중복 선언 불가

재할당 가능 여부

재할당 이란 이미 값이 저장된 변수에 값을 새로운 값을 다시 할당하는 것을 말한다.

// 재할당 예시

let height = 170;

...

// let, var은 재할당이 가능
height = 183; 

var : 재할당 가능
let : 재할당 가능
const : 재할당 불가

스코프 범위

JS는 변수가 선언될 때의 코드 위치에 따라 변수의 유효 범위가 결정되는 렉시컬 스코프를 따른다.

var로 선언된 변수는 함수 스코프(function scope)를 따른다. 이 말은 함수 내에서 선언된 변수는 블록({})과 상관없이 해당 함수 어느 곳에서든 참조할 수 있다는 의미이다.

// 함수 레벨 스코프 예시

function example() {
  if (true) {
    var name = "이도현";
  }
  console.log(name); // "이도현" - 블록 밖에서도 접근 가능
}

example();

let과 const는 블록 스코프(block scope)를 따른다. 이 말은 변수가 선언된 블록내에서만 유효하다는 의미이다.

// 블록 레벨 스코프 예시

if (true) {
  let name = "이도현"; 
  console.log(name); // 블록 안에서는 접근 가능
}

console.log(name); // ReferenceError - 블록 밖에서는 접근 불가

var : 함수 레벨 스코프
let : 블록 레벨 스코프
const : 블록 레벨 스코프

호이스팅 동작 방식

호이스팅 이란 JS의 실행 컨텍스트에서 변수 선언과 함수 선언이 코드가 실행되기 전에 위로 끌어올려지는 현상을 말한다.

이 때 혼동하면 안되는 점은, 선언이 끌어올려진다는 것이지, 할당된 값이 끌어올려진다는 것이 아니라는 점이다.

예시를 통해 이해하는 것이 더 쉬우니 살펴보자.

var의 호이스팅 동작 방식

var은 선언과 동시에 undefined 로 초기화된다는 점을 기억하고 아래 예시를 살펴보자.

console.log(x);  // undefined
var x = 10;
console.log(x);  // 10

위의 코드는 아래의 순서와 같이 동작한다.

1. 호이스팅으로 인해 var x; 코드가 최상단으로 끌어올려진다.
2. var은 선언과 동시에 undefined로 초기화된다.
3. 1번 line :undefined가 출력된다.
4. 2번 line : x의 값이 10으로 할당된다.
5. 3번 line : 10이 출력된다.

let과 const의 호이스팅 동작 방식
let과 const는 var과 달리 선언과 동시에 undefined로 초기화되지 않는다.

아까 코드에서 var -> let 으로 바꾼 코드를 살펴보자.

console.log(x); // ReferenceError
let x = 10;
console.log(x);  // 10

var은 선언과 동시에 undefined로 초기화 되어 해당 코드에 문제가 없었다.

하지만, let과 const는 변수 선언과 동시에 초기화 하지 않았기 때문에 1번 line의 x는 참조할 수 없는 상태가 된다. 이 상태를 일시적 사각지대(TDZ: Temporal Dead Zone) 이라고 한다.

초기화 전에 참조할 수 없도록 하는 동작 방식이 변수 안전성 을 보장하고 코드 예측 가능성을 높여준다!

var : 선언과 동시에 undefined 로 초기화. TDZ 상태에서 오류 발생 X
let : TDZ 상태에서 오류 발생 O
const : TDZ 상태에서 오류 발생 O

정리

기준	var	let	const
중복 선언 가능 여부	O	X	X
재할당 가능 여부	O	O	X
스코프 범위	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
호이스팅 동작 방식	선언과 함께 undefined 초기화 TDZ 상태 오류 발생 X	TDZ 상태 오류 발생 O	TDZ 상태 오류 발생 X