JavaScript의 const와 상수 개념, 불변 데이터 구조 만들기

JavaScript의 const와 상수 개념, 불변 데이터 구조 만들기

자바스크립트(JavaScript)에서 const는 변수의 재할당을 방지하는 기능을 제공하며, 이를 통해 불변 데이터 구조를 만드는 데 중요한 역할을 합니다. 이 글에서는 const 키워드의 동작 원리, 불변성의 개념, 그리고 실무에서 어떻게 불변 데이터를 활용할 수 있는지에 대해 심도 있게 다루어 보겠습니다.

 

 

목차

1. const 키워드란?
2. const의 특징과 동작 방식
3. 불변성의 개념과 필요성
4. const로 불변 데이터 구조 만들기
5. const와 객체 불변성
6. const 사용 시 주의할 점
7. 실무에서 const 활용 예제

 

const 키워드란?

const는 ES6(ECMAScript 2015)에서 도입된 변수 선언 키워드로, 변수를 선언할 때 재할당을 방지하는 역할을 합니다. 이는 코드에서 데이터의 변경을 원하지 않을 때 사용되며, 특히 상수(constant)를 정의할 때 자주 사용됩니다.

const PI = 3.14159;

위 코드에서 PI는 상수로 선언되며, 이후 이 값을 변경하려 하면 에러가 발생합니다.

 

 

const의 특징과 동작 방식

const로 선언된 변수는 선언 시 반드시 초기화되어야 하며, 이후 재할당이 불가능합니다. 하지만 const는 변수 자체의 재할당만을 막을 뿐, 객체나 배열과 같은 참조형 데이터의 내부 상태는 변경이 가능합니다.

const arr = [1, 2, 3];
arr.push(4); // arr은 [1, 2, 3, 4]가 됩니다.
arr = [5, 6, 7]; // 오류 발생: 재할당 불가

위 예제에서 arr에 새로운 배열을 재할당하려 하면 오류가 발생합니다. 하지만 배열의 내용은 변경할 수 있습니다.

 

 

불변성의 개념과 필요성

불변성(Immutability)이란 데이터가 생성된 이후 변경되지 않는 성질을 말합니다. 불변성을 유지하면 데이터의 상태 추적이 용이해지고, 특히 복잡한 상태 관리가 요구되는 애플리케이션에서 버그를 줄이고 디버깅을 용이하게 할 수 있습니다. 불변 데이터 구조는 함수형 프로그래밍에서 중요한 개념 중 하나로, 상태 관리와 관련된 여러 이점들을 제공합니다.

 

 

const로 불변 데이터 구조 만들기

const를 활용하여 불변 데이터 구조를 만들려면, 변수 자체뿐 아니라 내부 데이터도 변경되지 않도록 해야 합니다. 이를 위해 Object.freeze()와 같은 메서드를 사용하여 객체의 변경을 방지할 수 있습니다.

const obj = Object.freeze({ name: "Alice", age: 30 });
obj.age = 31; // 변경되지 않음
console.log(obj.age); // 30

위 코드에서 obj는 Object.freeze()로 동결되었기 때문에 내부 속성을 변경하려 해도 변경되지 않습니다.

 

 

const와 객체 불변성

객체 불변성을 완전하게 유지하기 위해서는 얕은 동결(shallow freeze) 외에도 깊은 동결(deep freeze)이 필요할 때가 있습니다. Object.freeze()는 얕은 동결만을 지원하므로, 객체 내 중첩된 객체까지 동결하려면 재귀적으로 동결하는 유틸리티 함수가 필요합니다.

function deepFreeze(obj) {
    Object.keys(obj).forEach((key) => {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            deepFreeze(obj[key]);
        }
    });
    return Object.freeze(obj);
}

const deeplyFrozenObj = deepFreeze({ person: { name: "Alice" } });
deeplyFrozenObj.person.name = "Bob"; // 변경되지 않음

이 예제에서 deepFreeze 함수는 객체 내 모든 중첩된 객체까지 동결하여 완전한 불변성을 유지할 수 있도록 합니다.

 

 

 

 

const 사용 시 주의할 점

const는 강력한 도구이지만, 사용 시 주의할 몇 가지 사항이 있습니다. 특히 참조형 데이터 타입의 경우 const로 선언해도 내부 데이터는 변경 가능하므로, 불변성을 유지하려면 추가적인 조치가 필요합니다. 또한, 재할당이 필요한 경우 let 키워드를 사용하는 것이 적절합니다.

 

 

실무에서 const 활용 예제

실무에서는 const를 사용하여 불변 데이터를 활용한 상태 관리, 상수 정의, 그리고 함수형 프로그래밍 패턴을 구현할 수 있습니다. 예를 들어, 리덕스(Redux)와 같은 상태 관리 라이브러리에서는 불변성이 매우 중요한 역할을 합니다:

const initialState = Object.freeze({
    count: 0,
});

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        default:
            return state;
    }
}

위 코드에서 initialState는 불변 객체로 정의되어, 상태가 변경될 때마다 새로운 상태 객체를 생성함으로써 원본 상태는 변경되지 않도록 합니다.

자바스크립트(JavaScript)에서 const는 재할당을 방지하고 불변성을 유지하는 데 중요한 역할을 합니다. 이 글에서 다룬 개념과 예제를 통해 const의 올바른 사용법을 익히고, 불변 데이터 구조를 효과적으로 활용해 보시기 바랍니다.