var - let - const 차이점과 사용법

JavaScript 에서 변수를 선언하는 방법에는 var , let ,const 세 가지 방법이 있다.

다른 특성과 사용법을 가지고 있으면  ES6 이후 개발자들은 let 과 const 를 더 선호하는 추세이다.

이번엔 이 세가지의 차이점과 특성을 비교해 보자

---

1. var

var는 가장 오래된 선언 방식이다

var 의 특징

• Function Scope: var 로 선언된 변수는 함수 내에서만 유효하며, 함수 밖에서는 접근할 수 없다. 하지만 Block Scope 를 가지지 않기 때문에 if, for 등의 블록내에서 선언해도 함수 전체에서 접근할 수 있다.
• Hoisting: var로 선언된 변수는 선언이 끌어올려지기 때문에 선언문 이전에 변수에 접근할 수 있다.

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

 

2. let 

var 에서 발생할 수 있는 문제점을 해결하기 위해 만들어졌다. let은 Block Scope를 가지며 hoisting과 관련된 문제도 개선하였다.

 

let 의 특징

• Block Scope: let으로 선언된 변수는 블록내에서만 유효하다.

let y = 10;
if (true) {
  let y = 20;
  console.log(y); // 20 (블록 내의 y)
}
console.log(y); // 10 (블록 밖의 y)

• Hoisting: let도 호이스팅이 일어나지만, var와 달리 변수의 선언은 끌어올려지지만 초기화는 선언지점에서 이루어 진다. 초기화 전에 별수를 참조하려고 하면 ReferenceError가 발생한다

console.log(z); // ReferenceError: z is not defined
let z = 5;

 

3. const

const는 let과 유사하지만 선언된 변수의 값을 변경할 수 없는 상수를 정의하는데 사용된다. const는 재할당이 불가능하며 선언과 동시에 초기화가 이루어져야한다.

const 의 특징

• Block Scope: const도 let과 마찬가지로 블록 스코프를 가진다.
• 재할당 불가: const 로 선언된 변수는 재할당 할 수 없다.

const a = 10;
a = 20; // Error: Assignment to constant variable.

const person = { name: "Alice" };
person.name = "Bob"; // 내부 속성 변경 가능
console.log(person.name); // "Bob"

 

• Hoisting: cont도 let과 마찬가지로 선언전에 접근하면 ReferenceError가 발생한다.

 

4. var , let , const 비교

특성	var	let	const
Scope	Function	Blcok	Blcok
Hoisting	선언과 초기화가 Hoisting	선언만 Hoisting, 초기화는 선언지점에서	선언만 Hoisting, 초기화는 선언지점에서
재할당 가능 여부	가능	가능	불가능
초기화 필수 여부	선택	선택	필수

 

5. 뭘 사용해야 할까?

• var: 최신코드에서 var는 사용하지 않는 것이 좋다.
• let: 값이 변경될 수 있는 변수, 재할당이 필요한 변수, 반복문에서 사용되는 인덱스, 변경가능한 상태에 사용
• const: 변경되지 않아야 하는 상수 값을 나타낼 때 사용

가능하면 const 를 default 로 사용하고 재할당이 필요한 경우에만 let을 사용하는 것이 좋은 패턴이다

---

var, let ,const 의 차이점을 알고 상황에 맞게 적절한 변수를 선언하여 토드의 안정성과 가독성을 높여보자