JavaScript에서 const로 선언한 배열: 불변성을 이해하고 활용하기 - 좋은공간 좋은집

JavaScript에서 변수를 선언할 때는 var, let, const 세 가지 키워드를 사용할 수 있습니다. 그중 const는 상수(constant)를 선언하는 키워드로, 선언된 변수의 값을 변경할 수 없도록 보장합니다. 하지만, 배열이나 객체와 같은 참조 자료형을 const로 선언할 때는 조금 다른 개념이 적용됩니다. 이 글에서는 const로 선언된 배열의 동작 원리와 이를 효율적으로 활용하는 방법을 살펴보겠습니다.

const로 선언한 배열: 무엇이 고정되는가?

const 키워드로 배열을 선언하면, 배열의 참조가 고정됩니다. 즉, 배열 자체의 메모리 주소가 고정되어 다른 배열로 재할당할 수 없지만, 배열의 요소는 자유롭게 추가, 삭제, 수정할 수 있습니다.

배열의 참조는 고정되지만, 요소는 변경 가능

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

// 배열 요소 수정
fruits[1] = 'orange';
console.log(fruits);  // 결과: ['apple', 'orange', 'cherry']

// 배열에 요소 추가
fruits.push('grape');
console.log(fruits);  // 결과: ['apple', 'orange', 'cherry', 'grape']

// 배열을 재할당하려고 하면 오류 발생
fruits = ['melon', 'peach'];  // 오류: Assignment to constant variable.

위 예제에서 볼 수 있듯이, const로 선언한 배열은 배열 자체의 참조를 변경할 수 없기 때문에 다른 배열로 재할당할 수 없습니다. 하지만 배열의 요소를 수정하거나 추가하는 것은 가능합니다.

배열 조작 메서드와 const

JavaScript의 배열에는 push(), pop(), splice()와 같은 여러 가지 배열 조작 메서드가 있습니다. const로 선언된 배열도 이러한 메서드를 통해 배열의 내용을 변경할 수 있습니다. 이를 활용하면 const로 선언한 배열을 유연하게 사용할 수 있습니다.

push(): 배열에 요소 추가

const numbers = [1, 2, 3];

numbers.push(4);  // 배열에 요소 추가
console.log(numbers);  // 결과: [1, 2, 3, 4]

push() 메서드는 배열의 마지막에 새로운 요소를 추가합니다. const로 선언된 배열도 이 메서드를 통해 요소를 추가할 수 있습니다.

pop(): 배열의 마지막 요소 제거

const numbers = [1, 2, 3, 4];

numbers.pop();  // 마지막 요소 제거
console.log(numbers);  // 결과: [1, 2, 3]

pop() 메서드는 배열의 마지막 요소를 제거합니다. 이 역시 const 배열에서 사용 가능합니다.

splice(): 특정 위치에 있는 요소 추가 및 제거

const numbers = [1, 2, 3, 4];

// 인덱스 1에서 2개의 요소 제거
numbers.splice(1, 2);
console.log(numbers);  // 결과: [1, 4]

// 인덱스 1에 5와 6 추가
numbers.splice(1, 0, 5, 6);
console.log(numbers);  // 결과: [1, 5, 6, 4]

splice() 메서드는 배열의 특정 위치에 있는 요소를 추가하거나 제거할 수 있는 강력한 메서드입니다. const 배열에서도 이를 사용해 배열의 요소를 조작할 수 있습니다.

const로 선언된 배열의 불변성 개념

JavaScript에서 const로 선언된 배열은 불변하지 않습니다. 배열의 참조는 고정되지만, 배열 내부의 값은 자유롭게 변경될 수 있기 때문입니다. 이와 같은 참조 타입의 가변성은 const의 특성 중 하나입니다.

참조 타입의 가변성

배열과 객체와 같은 참조 타입 데이터는 const로 선언해도 내부 상태를 변경할 수 있습니다. 이는 참조 자체는 변경할 수 없지만, 내부 데이터는 조작할 수 있다는 의미입니다. 하지만 이러한 가변성은 때로는 의도하지 않은 동작을 초래할 수 있으므로 주의가 필요합니다.

const user = {
    name: 'John',
    age: 25
};

// 객체 속성 변경 가능
user.age = 26;
console.log(user);  // 결과: { name: 'John', age: 26 }

// 객체 자체를 재할당하려고 하면 오류 발생
user = { name: 'Jane', age: 30 };  // 오류: Assignment to constant variable.

위 예제에서는 객체의 속성을 변경할 수 있지만, 객체 자체를 재할당할 수 없음을 확인할 수 있습니다. 배열도 이와 같은 방식으로 동작합니다.

배열의 불변성 유지: const와 Object.freeze()

배열을 진정한 불변 객체로 만들고 싶다면 Object.freeze() 메서드를 사용할 수 있습니다. 이 메서드는 배열의 요소를 포함하여 완전히 변경할 수 없는 상태로 만듭니다.

const numbers = [1, 2, 3];

Object.freeze(numbers);

// 배열 요소를 변경하려고 하면 무시됨
numbers[0] = 100;
console.log(numbers);  // 결과: [1, 2, 3]

// 배열 자체를 재할당하려고 하면 여전히 오류 발생
numbers = [4, 5, 6];  // 오류: Assignment to constant variable.

Object.freeze()를 사용하면 배열의 요소도 더 이상 변경할 수 없으므로, 진정한 불변성을 유지할 수 있습니다. 하지만 내부 값이 변경되지 않기를 원할 때만 사용하는 것이 좋습니다.

언제 const로 배열을 선언해야 할까?

const로 배열을 선언하는 것은 코드의 의도를 명확히 할 수 있는 좋은 방법입니다. 배열 자체가 재할당되지 않음을 보장하므로, 다른 곳에서 의도치 않게 배열이 변경되지 않도록 막을 수 있습니다. 특히 배열의 참조를 변경할 필요가 없을 때는 let 대신 const를 사용하는 것이 바람직합니다.

결론

JavaScript에서 const로 선언한 배열은 참조 자체가 고정되지만, 내부 요소는 자유롭게 수정할 수 있습니다. 이를 통해 배열의 불필요한 재할당을 방지하면서도 요소를 유연하게 관리할 수 있습니다. 그러나 진정한 불변성을 유지하고자 한다면 Object.freeze()를 사용해 요소 수정도 막을 수 있습니다. 프로젝트에서 const와 배열의 가변성을 잘 이해하고 적절하게 활용해 안정적이고 읽기 쉬운 코드를 작성해보세요!