[JS] var, let, const의 차이

var의 특징과 한계

1. 함수 레벨 스코프만을 가지며, 블록 스코프는 지원하지 않는다.

→ 함수 레벨 스코프 이외에 생성한 변수는 모두 전역 변수가 되어 의도치 않은 변수 충돌이 발생할 수 있다.

function foo() {
  var x = "Function-level scope";
}

if (true) {
  var y = "Block-level scope";
}

foo();
console.log(x); // 에러: 함수 스코프 외부에서 변수에 접근할 수 없음
console.log(y); // 접근 가능, "Block-level scope" 출력

 

2. 중복 선언이 가능하며, 같은 변수 이름으로 여러 번 선언해도 오류가 발생하지 않는다.

→ 변수 값이 덮어 씌워지는 현상이 일어날 수 있다.

var x = 10;
var x = 20; // 중복 선언 가능

 

3. 호이스팅으로 인해서 변수를 선언하기 이전에 참조할 수 있다.

→  변수가 선언되기 전에 변수를 참조하면 "undefined" 값을 갖게 된다. 이로 인해 코드에서 변수의 초기 값이 어디서 설정되는지 예측하기 어렵다.

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

 

let의 특징

변수 중복 선언 금지

같은 스코프 내에서 동일한 이름을 갖는 변수를 중복해서 선언할 수 없다. 변수를 중복 선언하면 문법 에러가 발생한다.

let x = 5;
let x = 10; // 에러: 변수 x가 이미 선언

 

블록 레벨 스코프

var는 함수 레벨 스코프만 가지지만 let은 블록 레벨 스코프를 가진다. 블록 레벨 스코프에서 선언된 변수는 전역 스코프에서 참조할 수 없다.

if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // 에러: 변수 x에 접근할 수 없음

 

변수 호이스팅

let도 호이스팅의 영향을 받지만, 초기화되기 전까지는 변수에 접근할 수 없기 때문에 변수를 사용하려고 시도하면 에러가 발생한다.

console.log(x); // 에러: 변수 x가 선언되기 전에 사용
let x = 10;

 

const의 특징

선언과 할당

const는 선언과 동시에 할당이 필수다. 즉, 선언과 할당이 별도로 이루어지지 않는다는 의미이다.

const y; // 에러: 할당되지 않은 const 변수

 

블록 레벨 스코프

let과 마찬가지로 블록 스코프를 가진다. 블록 내에서 선언되면 블록 내에서만 유효하다.

 

상수 선언

const로 선언된 변수는 상수 값을 나타낸다. 이는 변수에 한 번 값을 할당하면 이후에는 그 값을 변경할 수 없다는 뜻이다. 따라서 const는 재할당이 불가능하다.

const pi = 3.14159;
pi = 3.14; // 에러: 상수 pi에 대한 재할당 시도

 

var vs let vs const

var	let	const
중복 선언 가능	중복 선언 금지	중복 선언 금지
재할당 가능	재할당 가능	재할당 금지
함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프