변수 var / let / const

 var, let, const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드

var는 ES5까지 유일하게 쓰였지만, 단점을 보완하기 위해서 ES6에서 let과 const를 도입

 

 

*호이스팅 : 변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 특성

1. var

• 스코프: 함수 스코프 (Function Scope)를 가지며, 변수가 선언된 함수 내부에서만 접근할 수 있다.
• *호이스팅: var로 선언된 변수는 호이스팅(hoisting)되어 변수 선언이 코드의 맨 위로 끌어올려진다. 단, 초기화는 이루어지지 않아 undefined 상태가 된다.
• 재할당/재선언: var로 선언된 변수는 재할당이 가능하고, 같은 스코프에서 재선언도 가능하다.

console.log(x); // undefined (변수 선언 전)
var x = 5;
var y = 1;
console.log(x); // 5 (변수 선언 후)
var x = 100;
var y;

console.log(x); // 100
console.log(y); // 1

var는 스코프와 호이스팅이 다소 불안정하게 작용할 수 있어서, 최신 코드에서는 잘 사용되지 않는 편

 

2. let

• 스코프: 블록 스코프(Block Scope)를 가집니다. 즉, 변수가 선언된 블록({}) 내부에서만 접근 가능
• * 호이스팅: let 역시 호이스팅되지만, 초기화는 선언문까지 지연되므로, 선언문 이전에 접근하면 ReferenceError가 발생
• 재할당/재선언: let으로 선언된 변수는 재할당이 가능하지만, 같은 스코프에서 재선언은 불가능

let y = 10;
if (true) { // 블록 스코프의 범위
    let y = 20;
    console.log(y); // 20
}
console.log(y); // 10

 

3. const

• 스코프: let과 동일하게 블록 스코프를 가진다.
• * 호이스팅: let과 마찬가지로 선언문 이전에 사용할 수 없다.
• 재할당/재선언: const로 선언된 변수는 재할당이 불가능하고, 같은 스코프에서 재선언할 수 없다. 선언 시 반드시 초기화가 필요

// 값을 변경하지 않을 변수를 선언
const z = 30;
// z = 40; // 30으로 선언하여 변경 불가능 
// Error: Assignment to constant variable.

// const로 선언한 객체나 배열의 경우, 내부 속성이나 요소는 변경 가능
const obj = { name: "Alice" };
obj.name = "Bob"; // 가능
console.log(obj); // { name: "Bob" }

const는 상수와 같이 값을 변경하지 않을 변수를 선언할 때 주로 사용한다.

다만, const로 선언한 객체나 배열의 경우, 내부 속성이나 요소는 변경 가능하다.

 

요약

• var: 함수 스코프, 호이스팅됨, 재할당 및 재선언 가능
• let: 블록 스코프, 호이스팅됨(초기화 전 사용 불가), 재할당 가능, 재선언 불가
• const: 블록 스코프, 호이스팅됨(초기화 전 사용 불가), 재할당 불가, 재선언 불가

최신 자바스크립트에서는 주로 let과 const를 사용하는 것을 권장