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
는 재할당이 불가능한 상수에 사용됩니다. 이들을 적절히 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.
다음 글에서는 템플릿 리터럴에 대해 알아보겠습니다.
다음 글에서 만나요!
'JavaScript 최신 기능 시리즈 (ES6 이후)' 카테고리의 다른 글
[JavaScript 최신 기능 시리즈] 6일차: JavaScript 모듈 시스템 이해하기 (0) | 2024.08.06 |
---|---|
[JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기 (0) | 2024.08.05 |
[JavaScript 최신 기능 시리즈] 4일차: JavaScript 화살표 함수 이해하기 (0) | 2024.08.04 |
[JavaScript 최신 기능 시리즈] 3일차: JavaScript 디스트럭처링 할당 이해하기 (0) | 2024.08.03 |
[JavaScript 최신 기능 시리즈] 2일차: JavaScript 템플릿 리터럴 이해하기 (0) | 2024.08.02 |