[자바스크립트] 자바스크립트 불변성 이해하기

자바스크립트 불변성은 객체가 생성된 후 상태를 변경할 수 없는 것을 의미합니다. 즉, 객체의 프로퍼티 값을 변경하거나 삭제할 수 없다는 것입니다. 반면, 가변 객체는 생성 후에도 값을 변경하거나 삭제할 수 있습니다.

불변성은 단순히 값 재할당과는 다릅니다. 값 재할당은 변수에 다른 값을 할당하는 것을 의미하는데, 이는 기존 객체의 상태를 변경하지 않습니다. 반면, 객체의 프로퍼티 값을 변경하면 객체 자체의 상태가 변하게 됩니다.

불변성의 장점

불변성을 사용하는 것은 다음과 같은 여러 장점을 제공합니다.

• 예측 가능한 코드: 불변 객체는 생성된 후 상태가 변경되지 않기 때문에 코드의 동작을 예측하기 쉽습니다. 이는 버그를 줄이고 코드를 이해하고 유지 관리하는 것을 용이하게 합니다.
• 스레드 안전: 불변 객체는 여러 스레드에서 동시에 안전하게 사용할 수 있습니다. 왜냐하면 한 스레드가 객체의 상태를 변경하면 다른 스레드에 영향을 미치지 않기 때문입니다.
• 테스트 용이: 불변 객체는 테스트하기 쉽습니다. 왜냐하면 객체의 상태가 테스트를 수행하는 동안 변경되지 않기 때문입니다.
• 간단한 디버깅: 불변 객체는 디버깅하기 쉽습니다. 왜냐하면 객체의 상태가 변경된 원인을 추적하기 쉽기 때문입니다.

자바스크립트에서 불변성 구현

자바스크립트에서 불변성을 구현하는 방법은 여러 가지가 있습니다.

• primitive 값 사용: number, string, boolean과 같은 primitive 값은 불변입니다. 즉, 생성된 후 값을 변경할 수 없습니다.
• const 키워드 사용: const 키워드를 사용하여 변수를 선언하면 해당 변수는 불변 객체를 참조하게 됩니다.
• Object.freeze() 메서드 사용: Object.freeze() 메서드를 사용하여 객체를 불변 객체로 만들 수 있습니다.
• 불변 객체 라이브러리 사용: immer와 같은 불변 객체 라이브러리를 사용하여 불변 객체를 쉽게 만들고 관리할 수 있습니다.

불변성 사용 사례

불변성은 다음과 같은 다양한 상황에서 사용될 수 있습니다.

• 데이터 모델링: 데이터 모델을 불변 객체로 표현하면 데이터 무결성을 보장하고 코드 오류를 줄이는 데 도움이 될 수 있습니다.
• 캐싱: 캐시된 데이터를 불변 객체로 저장하면 캐시 무결성을 보장하고 동시성 문제를 방지하는 데 도움이 될 수 있습니다.
• 구성 관리: 구성 데이터를 불변 객체로 저장하면 구성 데이터의 무결성을 보장하고 오류를 방지하는 데 도움이 될 수 있습니다.

자바스크립트에서 불변성을 구현하는 다양한 예제

자바스크립트에서 불변성을 구현하는 방법은 여러 가지가 있으며, 각 방법마다 장단점이 존재합니다. 상황에 맞는 적절한 방법을 선택하는 것이 중요합니다.

1. primitive 값 사용:

가장 간단한 방법은 primitive 값 (number, string, boolean)을 사용하는 것입니다. primitive 값은 불변성을 기본적으로 가지고 있기 때문에 별도의 처리 없이 사용할 수 있습니다.

const age = 30;
age = 31; // Uncaught TypeError: Assignment to constant variable.

2. const 키워드 사용:

const 키워드를 사용하여 변수를 선언하면 해당 변수는 불변 객체를 참조하게 됩니다.

const person = { name: '철수', age: 30 };
person.name = '영희'; // 객체의 프로퍼티는 변경 가능
console.log(person.name); // '영희'

3. Object.freeze() 메서드 사용:

Object.freeze() 메서드를 사용하여 객체를 불변 객체로 만들 수 있습니다. 이미 선언된 객체를 불변 객체로 만들 때 사용합니다.

const person = { name: '철수', age: 30 };
Object.freeze(person);
person.name = '영희'; // 오류 발생

 

4. 불변 객체 라이브러리 사용:

immer와 같은 불변 객체 라이브러리를 사용하면 불변 객체를 쉽게 만들고 관리할 수 있습니다. 라이브러리는 객체 복사, 프로퍼티 추가/수정/삭제 등 다양한 작업을 불변 객체 방식으로 수행하도록 지원합니다.

import { produce } from 'immer';

const person = { name: '철수', age: 30 };

const updatedPerson = produce(person, draft => {
  draft.name = '영희';
  draft.age = 31;
});

console.log(updatedPerson); // { name: '영희', age: 31 }
console.log(person); // { name: '철수', age: 30 } // 원본 객체는 변경되지 않음

5. 프록시 사용:

ES6에서 도입된 프록시를 사용하여 객체 접근 및 변경을 제어함으로써 불변성을 구현할 수 있습니다. 프록시는 객체에 대한 가상의 레이어를 만들고, 이 레이어를 통해 객체 접근 시점에 원하는 로직을 수행하도록 설정할 수 있습니다.

const person = new Proxy({ name: '철수', age: 30 }, {
  set: (target, property, value) => {
    if (property === 'name') {
      throw new Error('이름 변경 불가능');
    }
    target[property] = value;
    return true;
  }
});

person.age = 31; // 가능
person.name = '영희'; // 오류 발생

주의 사항:

• 불변 객체는 생성 후 상태를 변경할 수 없기 때문에 주의해서 사용해야 합니다.
• 객체의 프로퍼티 값을 읽는 것은 허용되지만, 변경하거나 삭제하는 것은 불가능합니다.
• 불변 객체를 사용하면 코드가 더 복잡해질 수 있으므로 필요한 경우에만 사용하는 것이 좋습니다.

결론

자바스크립트에서 불변성은 코드의 예측 가능성, 안전성, 유지 관리성을 향상시키는 데 도움이 되는 강력한 도구입니다. 다양한 방법을 활용하여 상황에 맞게 불변성을 구현할 수 있으며, 주의 사항을 이해하고 적절하게 사용하는 것이 중요합니다.