자바스크립트에서 불변 데이터와 디자인 패턴
자바스크립트는 유연하고 동적인 언어이지만, 때로는 데이터의 불변성을 유지해야 하는 경우가 있습니다. 데이터의 불변성은 코드의 예측 가능성과 안정성을 향상시키는 중요한 요소입니다. 이번 블로그 포스트에서는 자바스크립트에서 불변 데이터를 다루는 방법과 일반적인 디자인 패턴에 대해 알아보겠습니다.
불변 데이터란?
불변 데이터는 생성 후 변경할 수 없는 데이터를 말합니다. 이는 데이터에 대한 수정이나 갱신을 허용하지 않는 것을 의미합니다. 불변 데이터를 사용하면 예측 가능하고 안전한 코드를 작성할 수 있으며, 데이터 변경으로 인한 예기치 못한 부작용을 방지할 수 있습니다.
불변 데이터 사용 방법
- 객체(Object) 불변성 유지하기: 불변 데이터를 사용하려면 객체(Object)를 변경할 수 없게 만들어야 합니다. 이를 위해
Object.freeze메소드를 사용할 수 있습니다. 이 메소드를 사용하면 객체의 추가, 삭제, 수정이 불가능해집니다.
const person = { name: "John", age: 30 };
Object.freeze(person);
person.name = "Jane"; // 변경해도 적용되지 않음
console.log(person); // Output: { name: "John", age: 30 }
- 배열(Array) 불변성 유지하기: 자바스크립트에서 배열은 기본적으로 가변입니다. 그러나 불변성을 유지하려면
Array.prototype.concat또는 스프레드 연산자(...)를 사용하여 원본 배열에 새 요소를 추가하는 방식을 사용할 수 있습니다.
const numbers = [1, 2, 3];
const newNumbers = numbers.concat(4); // [1, 2, 3, 4]
console.log(numbers); // Output: [1, 2, 3]
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4]; // [1, 2, 3, 4]
console.log(numbers); // Output: [1, 2, 3]
불변 데이터와 디자인 패턴
불변 데이터를 사용할 때 일반적으로 사용되는 디자인 패턴 중 일부를 살펴보겠습니다.
- Immutable.js: Immutable.js는 페이스북에서 개발한 자바스크립트 라이브러리로, 불변성을 위해 특별히 설계되었습니다. 이 라이브러리를 사용하면 자바스크립트에서 불변 데이터를 더 쉽게 다룰 수 있습니다.
예시 코드:
const { Map } = require("immutable");
const person = Map({ name: "John", age: 30 });
const newPerson = person.set("name", "Jane");
console.log(person.get("name")); // Output: John
console.log(newPerson.get("name")); // Output: Jane
- Redux: Redux는 자바스크립트 애플리케이션 상태 관리를 위한 상태 관리 라이브러리입니다. 이 라이브러리는 불변성을 강조하며, 상태 변경은 순수한 함수인 리듀서(reducer)를 통해 이루어집니다.
예시 코드:
// 상태 초기화
const initialState = {
count: 0,
};
// 리듀서 정의
function reducer(state = initialState, action) {
switch (action.type) {
case "INCREMENT":
return { ...state, count: state.count + 1 };
case "DECREMENT":
return { ...state, count: state.count - 1 };
default:
return state;
}
}
// 상태 변경
let state = reducer(undefined, {});
console.log(state); // Output: { count: 0 }
state = reducer(state, { type: "INCREMENT" });
console.log(state); // Output: { count: 1 }
마무리
불변 데이터는 자바스크립트에서 예측 가능하고 안전한 코드를 작성하는 핵심 요소입니다. 불변 데이터를 유지하면 코드를 더 쉽게 디버깅하고 테스트할 수 있으며, 애플리케이션의 성능을 향상시킬 수 있습니다. 불변 데이터를 다루는 디자인 패턴을 익혀서 보다 효율적으로 코드를 작성해보세요!