var, let, const의 차이점

 

모던 자바스크립트 정리를 하다가 var, let, const의 차이점을 한번 정리하고 가면 좋을 것 같아서 따로 빼서 글을 써보려고 해요.

 

우선은, 블록 스코프(Block Scope)와 함수 스코프(Function Scope), 그리고 호이스팅에 대해서 개념을 알면 var, let, const의 차이점에 대해서 이해하는데 훨씬 도움이 될 것 같아요.

 

블록스코프와 함수 스코프

변수에는 접근할 수 있는 범위(스코프)가 정해져 있어요.

 

1. 블록 스코프(Block Scope)

• { } 중괄호로 감싸진 범위를 벗어나면 변수에 접근할 수 없어요.
• let과 const는 블록 스코프를 따라요.
• 하지만 const는 선언과 동시에 값을 할당해야하며, 이후 값 변경이 불가능해요.

if (true) {
    let a = 10;
    const b = 20;
    console.log(a, b); // 10, 20 (블록 내부에서는 접근 가능)
}
// console.log(a, b); // 오류 발생 (블록 밖에서는 접근 불가)

 

2. 함수 스코프(Function Scope)

• 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없어요.
• var는 함수 스코프를 따라요.

function example() {
    var x = 10;
    console.log(x); // 10
}
example();
// console.log(x); // 오류 발생 (함수 외부에서는 접근 불가)

 

호이스팅

호이스팅(Hoisting)은 변수나 함수 선언이 코드 실행 전에 최상단으로 끌어올려지는 것처럼 동작하는 현상이에요.

 

var의 호이스팅

• var는 선언부만 끌어올려지고, 값 할당은 그대로 남아 있어요.
• 그래서 선언하기 전에 변수에 접근할 수 있어 예상치 못한 동작이 발생할 수 있어요.

console.log(a); // undefined (변수 선언부은 올라가지만, 값은 할당되지 않음)

var a = 10;

console.log(a); // 10

 

let, const의 호이스팅

• let과 const도 호이스팅이 되지만, TDZ(Temporal Dead Zone) 때문에 선언 전에 접근하면 오류가 발생해요.
• TDZ란 변수가 선언되었지만 초기화되기 전까지 접근할 수 없는 구간을 의미해요.

console.log(b); // 오류 발생 (TDZ로 인해 접근 불가)

let b = 20;

console.log(b); // 20

 

정리

키워드	스코프	재선언	재할당	특징
var	함수 스코프	가능	가능	호이스팅이 발생하고, 예기치 않은 동작이 가능해져요.
let	블록 스코프	불가능	가능	var의 단점을 보완해서 일반적인 변수 선언에 적합해요.
const	블록 스코프	불가능	불가능	상수값을 저장할 때 사용하고, 객체 내부에서 변경 가능해요.

 

• 기본적으로 const를 사용하고, 값이 바뀌어야 할 경우 let을 사용해요
• var는 사용하지 않는 것을 권장해요.