JavaScript의 대표적인 변수 선언 방식인 let과 const의 차이에 대해 알아보자.
let : 재할당 가능
const : 재할당 불가능
let x = 1;
console.log(x); //1
x = 2;
console.log(x); //2
const y = 3;
console.log(y); //3
y = 4;
console.log(y); //Uncaught TypeError: Assignment to constant variable.let으로 선언한 변수는 재할당이 가능하므로 값을 계속 변경 가능하지만
const로 선언한 변수는 새로운 값을 할당할 경우 오류가 발생한다.
예제
let fruit1 = ['Strawberry', 'Mango', 'Peach'];
const fruit2 = fruit1;
fruit1.splice(2, 1, 'Grape');
fruit2.splice(2, 1, 'Cherry');
console.log(fruit1); //['Strawberry', 'Mango', 'Cherry']
console.log(fruit); //['Strawberry', 'Mango', 'Cherry']먼저 첫 번째 줄에서 let 키워드로 변수 fruit1을 선언하고 배열을 할당한 후,
두 번째 줄에서 const 키워드로 변수 fruit2를 선언하고 fruit1을 할당하였다.
배열은 참조형 값으로 이때 주소 값이 복사되어 일단 fruit1과 fruit2는 서로 같은 배열을 가리킨다.
세 번째 줄에서 splice 메소드를 통해 fruit1의 값을 변경하였고 (2번 인덱스 값 'Grape'로 수정),
여기까지 fruit1과 fruit2가 함께 가리키는 배열의 모습은 ['Strawberry', 'Mango', 'Grape']이다.
네 번째 줄은 const로 선언한 변수 fruit2의 값을 변경하는데, const로 선언된 변수는 값을 재할당할 수 없지만 할당된 값이 객체나 배열일 경우 메소드를 통해 값을 변경할 수 있다.
따라서 위 코드는 에러가 발생하지 않아 2번 인덱스 값이 'Cherry'로 변경된다.
fruit1, fruit2가 동일한 배열을 가리키고 있으므로 결과적으로 두 변수가 가리키는 배열은 ['Strawberry', 'Mango', 'Cherry']가 된다.
