[js, ts] 변수 선언 방법

자바스크립트와 타입스크립트에서 변수를 선언하는 방법은 세가지가 있다.

• const
• let
• var

이 세가지의 차이를 정리하겠다.

const

• 변수 선언 후 같은 스코프 내에서 재선언 불가능
• 변수 선언 후 재할당 불가능
• 변수 선언은 되지만 초기화 전까지 접근 불가

let

• 변수 선언 후 같은 스코프 내에서 재선언 불가능
• 변수 선언 후 재할당 가능
• 변수 선언은 되지만 초기화 전까지 접근 불가

var

• 변수 선언 후 같은 스코프 내에서 재선언 가능
• 변수 선언 후 재할당 가능
• 선언과 동시에 undefined로 초기화, 호이스팅 가능

관련 표현

재선언

같은 변수명으로 다시 선언하는 것

재할당

변수에 새로운 값을 대입하는 것

호이스팅

변수 선언이 최상단으로 끌어올려지는 현상

재선언 예제

// var
var x = 10;
var x = 20; // 재선언 가능

// let
let y = 10;
let y = 20; // 오류 발생 (SyntaxError)

// const
const z = 10;
const z = 20; // 오류 발생 (SyntaxError)

재할당 예제

// var
var a = 10;
a = 20; // 재할당 가능

// let
let b = 10;
b = 20; // 재할당 가능

// const
const c = 10;
c = 20; // 오류 발생 (TypeError)

호이스팅 예제

// var
console.log(x); // "undefined" 출력 (호이스팅과 함께 undefined로 초기화됨)
var x = 10;

// let
console.log(y); // ReferenceError 발생 (TDZ에 있음)
let y = 10;

// const
console.log(z); // ReferenceError 발생 (TDZ에 있음)
const z = 10;

스코프 추가 예제

// 재선언과 스코프
function example() {
   var a = 1; // 함수 스코프
   var a = 2; // 가능

   if (true) {
      let b = 3; // 블록 스코프
      // let b = 4; // 같은 블록 내 재선언 불가
   }
}

// 재할당
let x = 10;
x = 20; // 가능

const obj = { name: "John" };
obj.name = "Jane"; // 객체 내부 값 변경 가능
// obj = { name: "Mike" }; // 전체 재할당 불가

마무리

const를 기본으로 사용하고 값을 변경해야 하는 경우 let을 쓰는 것이 좋아 보인다.