[JavaScript 최신 기능 시리즈] 1일차: JavaScript의 let과 const 키워드 이해하기

1. let과 const 키워드

let과 const 키워드란 무엇인가?

ES6(ECMAScript 2015)에서 도입된 let과 const 키워드는 변수를 선언하는 새로운 방법을 제공합니다. 이들은 var 키워드에 비해 몇 가지 중요한 개선 사항을 가지고 있습니다.

let 키워드

let 키워드는 블록 스코프를 가지며, 변수의 재할당이 가능합니다.

1. 블록 스코프

let으로 선언된 변수는 블록 내에서만 유효합니다.

{
  let x = 10;
  console.log(x);  // 출력: 10
}
// console.log(x);  // 오류 발생: x is not defined

2. 재할당 가능

let으로 선언된 변수는 값을 재할당할 수 있습니다.

let y = 20;
y = 30;
console.log(y);  // 출력: 30

3. 호이스팅

let 변수는 선언 전에 접근할 수 없습니다. 이는 "일시적 사각지대(Temporal Dead Zone)"라고 불리는 현상 때문입니다.

// console.log(z);  // 오류 발생: Cannot access 'z' before initialization
let z = 40;

const 키워드

const 키워드는 상수 선언에 사용되며, 선언과 동시에 초기화해야 하고, 재할당이 불가능합니다.

1. 블록 스코프

const로 선언된 변수도 블록 스코프를 가집니다.

{
  const a = 50;
  console.log(a);  // 출력: 50
}
// console.log(a);  // 오류 발생: a is not defined

2. 재할당 불가능

const로 선언된 변수는 값을 재할당할 수 없습니다.

const b = 60;
// b = 70;  // 오류 발생: Assignment to constant variable.
console.log(b);  // 출력: 60

3. 객체와 배열의 불변성

const로 선언된 객체와 배열은 내부 값을 변경할 수 있지만, 참조를 변경할 수는 없습니다.

const person = {
  name: 'Alice',
  age: 25
};

// 객체의 속성은 변경 가능
person.age = 26;
console.log(person.age);  // 출력: 26

// 객체 자체는 재할당 불가능
// person = {};  // 오류 발생: Assignment to constant variable.

const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);  // 출력: [1, 2, 3, 4]

// 배열 자체는 재할당 불가능
// numbers = [5, 6, 7];  // 오류 발생: Assignment to constant variable.

let과 const의 사용 사례

1. 변할 수 있는 값을 가질 때 let 사용

let counter = 0;
counter++;
console.log(counter);  // 출력: 1

2. 변하지 않는 상수값을 가질 때 const 사용

const PI = 3.14;
console.log(PI);  // 출력: 3.14

3. 객체와 배열을 사용할 때는 주로 const 사용

const user = {
  name: 'Bob',
  age: 30
};

user.age = 31;  // 객체의 속성 변경 가능
console.log(user.age);  // 출력: 31

결론

let과 const 키워드는 변수를 선언할 때 보다 안전하고 명확하게 사용할 수 있게 합니다. let은 블록 스코프를 가지며 재할당이 가능한 변수에 사용되고, const는 재할당이 불가능한 상수에 사용됩니다. 이들을 적절히 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

다음 글에서는 템플릿 리터럴에 대해 알아보겠습니다.

다음 글에서 만나요!