• var, let, const는 모두 JavaScript에서 변수를 선언할 때 사용하는 키워드. 다만 동작 방식과 범위에서 중요한 차이점이 있다.

간단 정리

var는 ES6 이전까지 변수/함수를 선언하는 유일한 키워드.

let, const는 var의 문제점을 개선하기 위해 ES6에서 새롭게 추가된 변수/함수 선언 키워드.

ES6 이후에서는 var를 사용하지 말고, let/const만을 사용할 것을 권장하고 있다.

• ES6는 2015년. 지금 시점에서는 var를 사용할 이유가 없다. 레거시 코드 유지보수가 목적이 아니라면, let과 const를 사용하는 것이 Javascript를 사용하는 웹 개발의 표준 방법이다.

var

스코프(scope)

var는 함수 스코프. 함수 내부에서 선언되면 해당 함수 내에서만 접근할 수 있지만, 함수 밖에서 선언된 경우 전역 스코프를 갖는다. if나 for 같은 블록 안에서 선언된 경우에도 함수 단위로 스코프가 제한.

재선언 가능

같은 이름으로 여러 번 선언이 가능, 선언을 다시 하면 이전 값을 덮어쓴다.

호이스팅(hoisting)

var로 선언한 변수는 호이스팅, 선언 위치와 관계없이 코드의 최상단으로 끌어올려진 것처럼 작동. 다만, 초기화가 아닌 선언만 끌어올려지기에, 초기화 전에는 undefined 값을 가진다.

console.log(x);  // undefined (호이스팅으로 인해 선언은 끌어올려짐)
var x = 5;

let

스코프(scope)

let은 블록 스코프. 즉, {}로 감싸진 블록 내에서만 유효, 블록을 벗어나면 접근할 수 없다.

재선언 불가능

같은 스코프 내에서는 동일한 이름으로 변수를 재선언할 수 없다. (단, 값 재할당은 가능)

호이스팅

let도 호이스팅이 발생하지만, TDZ(Temporal Dead Zone)이라는 개념에 따라 선언 이전에 변수를 사용할 수 없다. 선언 이전에 변수에 접근하면 오류가 발생.

const z = 20;
z = 30;  // TypeError (const는 재할당 불가)

const

스코프(scope)

const도 블록 스코프.

재선언 및 재할당 불가능

const로 선언된 변수는 재선언할 수 없고, 선언 후 값을 변경할 수 없다. 즉, 상수로 사용.

호이스팅

const도 let과 마찬가지로 TDZ에 의해 선언 이전에 사용할 수 없다.

함수 스코프와 블록 스코프

• 스코프? 변수가 접근 가능한 범위를 정의하는 개념.

함수 스코프(Function Scope)

• 변수가 선언된 함수 내에서만 유효한 범위. 함수 안에서 선언된 변수는 함수 밖에서는 접근할 수 없다.

function exampleFunction() {
  var x = 10;  // x는 exampleFunction 내에서만 유효
  console.log(x);  // 10
}
console.log(x);  // ReferenceError: x is not defined (함수 밖에서 접근 불가)

블록 스코프(Block Scope)

• {}로 감싸진 코드 블록 내에서만 유효한 범위. if, for, while 등의 제어 구문이나 함수의 블록 {} 내부에서 선언된 변수가 블록을 벗어나면 접근할 수 없다.

if (true) {
  let y = 20;  // y는 if 블록 내에서만 유효
  console.log(y);  // 20
}
console.log(y);  // ReferenceError: y is not defined (블록 밖에서 접근 불가)

함수 스코프 vs 블록 스코프 비교

함수 스코프

var로 선언된 변수는 함수 전체에서 유효, 함수 바깥에서는 접근할 수 없다.

블록 스코프

let과 const로 선언된 변수는 선언된 블록 {} 내에서만 유효, 블록을 벗어나면 접근할 수 없다.