▶ JavaScript Tutorial

JavaScript Array Const

JavaScript Array Const: `const`로 선언된 배열의 이해와 활용

JavaScript에서 const 키워드는 **상수(Constant)**를 선언할 때 사용되며, 이 값은 재할당이 불가능합니다. 그러나 const로 선언된 배열은 배열의 참조 값만 불변할 뿐, 배열 내부의 요소를 변경하거나 추가, 삭제하는 것은 가능합니다. 이 가이드는 const로 선언된 배열의 동작 방식과 이를 다루는 방법을 설명합니다.

1. `const`로 선언된 배열의 기본 개념

1.1. `const` 배열 선언

const로 배열을 선언하면, 배열의 참조는 변경할 수 없습니다. 즉, 배열 자체를 다른 배열로 재할당할 수 없지만, 배열의 **내용(요소)**은 변경할 수 있습니다.

const fruits = ["apple", "banana", "cherry"];

이 배열의 요소를 변경하거나 추가하는 것은 가능하지만, 배열 자체를 다른 값으로 재할당할 수는 없습니다.

1.2. 참조 불변

const로 선언된 배열을 다른 배열로 재할당하려고 시도하면 오류가 발생합니다.

const fruits = ["apple", "banana"];

// 배열 자체를 재할당하려고 하면 오류 발생
fruits = ["grape", "pear"]; // TypeError: Assignment to constant variable.

1.3. 배열의 내용 변경 가능

const로 선언된 배열의 요소를 변경하거나 추가/삭제하는 것은 가능합니다.

const fruits = ["apple", "banana", "cherry"];

// 배열의 요소를 변경
fruits[0] = "grape";
console.log(fruits); // 출력: ["grape", "banana", "cherry"]

// 배열에 요소 추가
fruits.push("orange");
console.log(fruits); // 출력: ["grape", "banana", "cherry", "orange"]

// 배열의 마지막 요소를 제거
fruits.pop();
console.log(fruits); // 출력: ["grape", "banana", "cherry"]

2. `const`로 선언된 배열의 활용

2.1. 배열 요소 추가 및 삭제

const로 선언된 배열에 요소를 추가하거나 삭제할 때 사용하는 메서드는 배열의 참조가 변경되지 않기 때문에 사용할 수 있습니다.

const numbers = [1, 2, 3];

// 요소 추가
numbers.push(4);
console.log(numbers); // 출력: [1, 2, 3, 4]

// 요소 제거
numbers.pop();
console.log(numbers); // 출력: [1, 2, 3]

2.2. 배열 내용 변경

배열의 특정 인덱스에 접근하여 값을 변경할 수도 있습니다.

const colors = ["red", "green", "blue"];

// 인덱스 1의 요소 변경
colors[1] = "yellow";
console.log(colors); // 출력: ["red", "yellow", "blue"]

2.3. 배열 복사 및 병합

배열을 얕은 복사하거나 병합하는 작업도 가능합니다.

const fruits = ["apple", "banana", "cherry"];

// 배열 복사
const newFruits = [...fruits]; // 스프레드 연산자를 사용한 얕은 복사
console.log(newFruits); // 출력: ["apple", "banana", "cherry"]

// 배열 병합
const tropicalFruits = ["mango", "pineapple"];
const allFruits = [...fruits, ...tropicalFruits];
console.log(allFruits); // 출력: ["apple", "banana", "cherry", "mango", "pineapple"]

3. `const` 배열과 `let` 배열의 차이점

const: 배열의 참조가 변경되지 않음. 배열의 요소는 수정할 수 있지만, 배열 자체를 다른 값으로 재할당할 수 없습니다.
let: 배열의 참조가 변경 가능. 배열 자체를 다른 배열로 재할당할 수 있으며, 요소 역시 수정 가능합니다.

// const 배열
const arr1 = [1, 2, 3];
arr1.push(4); // 가능
console.log(arr1); // 출력: [1, 2, 3, 4]
// arr1 = [5, 6, 7]; // 오류 발생

// let 배열
let arr2 = [1, 2, 3];
arr2.push(4); // 가능
console.log(arr2); // 출력: [1, 2, 3, 4]
arr2 = [5, 6, 7]; // 재할당 가능
console.log(arr2); // 출력: [5, 6, 7]

4. 주의사항

참조의 불변성: const로 선언된 배열은 참조 자체가 변경될 수 없으므로, 배열을 다른 배열로 재할당하려고 하면 오류가 발생합니다.
내용의 변경 가능성: 배열의 내부 요소를 변경하거나 추가, 삭제하는 것은 가능하므로, 배열의 내용은 불변하지 않다는 점에 유의해야 합니다.

요약

const 배열: 배열의 참조 자체는 불변이지만, 배열의 내용은 변경 가능.
배열 요소 추가 및 삭제: push(), pop() 등의 메서드를 사용하여 배열의 요소를 추가하거나 제거할 수 있음.
let과 차이점: let으로 선언된 배열은 참조가 변경 가능하지만, const로 선언된 배열은 참조 자체가 불변임.

JavaScript에서 const로 배열을 선언하는 것은 배열의 참조를 보호하는 동시에, 배열의 요소를 자유롭게 수정할 수 있도록 해줍니다. 이를 적절히 활용하면 코드의 안정성을 높이면서도 유연한 배열 조작이 가능합니다.

코딩 스쿨 JavaScript