자바스크립트에서 불변성 유지하기
안녕하세요. 오늘은 자바스크립트에서 불변성 유지에 대해 알아보도록 하겠습니다.
정의와 개요
- 불변성(Immutability)은 데이터가 생성된 후 수정되지 않음을 보장하는 원칙입니다. 자바스크립트에서는 객체와 배열이 참조 타입(reference type)이기 때문에, 이러한 데이터의 변형이 예상치 못한 부작용을 초래할 수 있습니다. 불변성을 유지하면 코드의 예측 가능성과 신뢰성을 높이고, 특히 리액트(React)와 같은 상태 기반 라이브러리에서 상태 관리를 쉽게 할 수 있습니다.
불변성의 중요성
- 예측 가능성: 데이터 변경이 없으므로 코드가 예측 가능하게 작동합니다.
- 변경 추적: 변경된 부분만 추적할 수 있어 디버깅이 쉽습니다.
- 리액티브 프로그래밍: 상태가 변경될 때마다 UI를 다시 렌더링하는 리액트 같은 프레임워크에서 중요합니다.
자바스크립트에서 불변성 유지하기
- 자바스크립트는 기본적으로 객체와 배열이 가변(mutability) 상태를 가지므로, 불변성을 유지하기 위해서는 특별한 조치가 필요합니다.
- Object.assign과 스프레드 연산자 객체와 배열을 복사할 때 Object.assign과 스프레드 연산자를 사용하여 새로운 객체나 배열을 생성합니다.
1
2
3
4
5
6
7
8
9
10
11
12
| // Object.assign을 사용한 객체 복사
const originalObject = { a: 1, b: 2 };
const copiedObject = Object.assign({}, originalObject);
copiedObject.a = 3;
console.log(originalObject); // { a: 1, b: 2 }
console.log(copiedObject); // { a: 3, b: 2 }
// 스프레드 연산자를 사용한 객체 복사
const copiedObject2 = { ...originalObject, a: 3 };
console.log(originalObject); // { a: 1, b: 2 }
console.log(copiedObject2); // { a: 3, b: 2 }
|
- 배열 복사 ````javascript // 스프레드 연산자를 사용한 배열 복사 const originalArray = [1, 2, 3]; const copiedArray = […originalArray]; copiedArray.push(4);
console.log(originalArray); // [1, 2, 3] console.log(copiedArray); // [1, 2, 3, 4]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
2. 깊은 복사 (Deep Copy)
- 깊은 복사는 중첩된 객체나 배열을 복사하는 방법입니다. 얕은 복사(Shallow Copy)와 달리, 깊은 복사는 객체 내의 모든 중첩된 객체나 배열까지 복사합니다.
- JSON을 사용한 깊은 복사
- 주의: JSON 방법은 함수나 undefined 값을 복사하지 않습니다.
````javascript
const originalObject = { a: 1, b: { c: 2 } };
const deepCopiedObject = JSON.parse(JSON.stringify(originalObject));
deepCopiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(deepCopiedObject); // { a: 1, b: { c: 3 } }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| function deepCopy(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
if (Array.isArray(obj)) {
const arrCopy = [];
for (let i = 0; i < obj.length; i++) {
arrCopy[i] = deepCopy(obj[i]);
}
return arrCopy;
}
const objCopy = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
objCopy[key] = deepCopy(obj[key]);
}
}
return objCopy;
}
const originalObject = { a: 1, b: { c: 2 } };
const deepCopiedObject = deepCopy(originalObject);
deepCopiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(deepCopiedObject); // { a: 1, b: { c: 3 } }
|
- 라이브러리 활용
- 불변성을 유지하기 위해 많은 개발자가 라이브러리를 사용합니다. 대표적인 라이브러리로는 Immutable.js와 immer가 있습니다.
1
2
3
4
5
6
7
8
| 코드 복사
const { Map } = require('immutable');
let originalMap = Map({ a: 1, b: 2 });
let newMap = originalMap.set('a', 3);
console.log(originalMap.get('a')); // 1
console.log(newMap.get('a')); // 3
|
1
2
3
4
5
6
7
8
9
10
11
| 코드 복사
const produce = require('immer').produce;
const originalState = { a: 1, b: { c: 2 } };
const nextState = produce(originalState, draft => {
draft.b.c = 3;
});
console.log(originalState.b.c); // 2
console.log(nextState.b.c); // 3
|
- 함수형 프로그래밍 기법
- 함수형 프로그래밍은 불변성을 유지하는 데 중요한 기법을 제공합니다. 예를 들어, map, filter, reduce와 같은 배열 메서드를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 반환할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const originalArray = [1, 2, 3];
// map을 사용하여 새로운 배열 생성
const newArray = originalArray.map(x => x * 2);
console.log(originalArray); // [1, 2, 3]
console.log(newArray); // [2, 4, 6]
// filter를 사용하여 새로운 배열 생성
const filteredArray = originalArray.filter(x => x > 1);
console.log(originalArray); // [1, 2, 3]
console.log(filteredArray); // [2, 3]
|
결론
불변성은 자바스크립트에서 데이터의 신뢰성과 예측 가능성을 높이는 중요한 개념입니다. 이를 달성하기 위해 Object.assign, 스프레드 연산자, 깊은 복사, 함수형 프로그래밍 기법, 그리고 Immutable.js와 immer 같은 라이브러리를 사용할 수 있습니다. 이러한 기법과 도구들을 적절히 활용하여 코드의 품질을 높이고, 유지 보수를 쉽게 할 수 있습니다.
