본문 바로가기
Frontend

자바스크립트 불변성 유지하려면?

by 신인프로그래머 2024. 3. 5.

 

자바스크립트 불변성 유지

 

 

자바스크립트에서 데이터의 불변성(Immutability)을 유지하는 것은 프로그램의 복잡성을 관리하고 예상치 못한 부작용을 방지하는 데 중요하다

불변성을 유지하면 함수나 컴포넌트가 예측 가능해지며, 디버깅이 용이해진다

 

다음은 자바스크립트에서 불변성을 유지하는 몇 가지 방법이다

 

1. 원시 데이터 타입 사용

원시 데이터 타입(예: Number, String, Boolean)은 불변적이다

이들은 변수에 할당된 값을 직접 변경할 수 없으며, 변경을 시도하면 새로운 값을 가진 새로운 변수가 생성된다

따라서, 원시 타입을 사용하는 것 자체가 불변성을 유지하는 방법이다

 

2. 객체와 배열의 불변성 유지

객체와 배열은 변경 가능한(mutable) 데이터 타입이므로, 이들의 불변성을 유지하기 위해서는 주의가 필요하다

객체나 배열을 변경할 때는 원본을 직접 변경하는 대신, 변경된 새로운 복사본을 생성해야 한다

 

객체의 경우, Object.assign() 함수나 스프레드 연산자 {...}를 사용하여 객체의 얕은 복사본을 만들고,

필요한 속성만 변경할 수 있다

const original = { a: 1, b: 2 };
const copy = { ...original, b: 3 }; // a: 1, b: 3

 

배열의 경우, 스프레드 연산자 [...], Array.slice(), Array.concat() 등을 사용하여 새로운 배열을 생성하고, 원본 배열은 변경하지 않는다

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // [1, 2, 3, 4]

 

3. 불변성을 지원하는 라이브러리 사용

자바스크립트에서 불변성을 쉽게 유지할 수 있도록 도와주는 여러 라이브러리가 있다

예를 들어, Immutable.js와 immer는 불변 데이터 구조를 제공하며, 복잡한 데이터 구조에서도 불변성을 유지하면서 효율적으로 작업할 수 있도록 도와준다

  • Immutable.js는 완전히 불변하는 데이터 구조를 제공하여, 데이터 변경 시 항상 새로운 데이터 구조를 반환한다
  • Immer는 "불변성 초안(draft)"을 사용하여 변경 가능한 방식으로 코드를 작성하되, 최종 결과는 불변하는 데이터 구조로 생성된다

 

4. 함수형 프로그래밍 기법 적용

함수형 프로그래밍은 불변성을 중요한 원칙으로 삼는다

순수 함수(pure functions)를 사용하고, 데이터 변형을 피하며, 고차 함수(higher-order functions)와 같은 함수형 프로그래밍 기법을 적용하면 자바스크립트에서 불변성을 유지하는 데 도움이 된다

자바스크립트에서 불변성을 유지하는 것은 애플리케이션의 상태 관리를 더욱 명확하고 예측 가능하게 만들어준다

'Frontend' 카테고리의 다른 글

requestAnimationFrame  (0) 2024.03.05
자바스크립트 this  (0) 2024.03.05
자바스크립트 깊은 복사 & 얕은 복사  (1) 2024.03.05
자바스크립트의 프로토타입(Prototype)  (0) 2024.03.05
자바스크립트 데이터 타입  (4) 2024.03.05