불변 데이터와 자바스크립트 비즈니스 로직 개발

07 Nov 2023

javascript

자바스크립트는 동적이고 유연한 언어로 유명합니다. 그러나 이러한 유연성은 때로는 코드의 복잡성을 증가시키고 예기치 않은 버그를 발생시킬 수 있습니다. 특히 비즈니스 로직을 다룰 때 불변 데이터의 중요성이 부각됩니다.

불변 데이터란 무엇인가요?

불변 데이터는 해당 데이터가 변경할 수 없는 것을 의미합니다. 자바스크립트에서는 객체와 배열에 대한 불변성을 유지하기 위해 몇 가지 방법을 사용할 수 있습니다. 여기에는 Object.freeze() 메서드를 사용하여 객체를 변경할 수 없도록 만들거나, 새로운 배열을 생성하고 기존 배열을 변경하지 않는 등의 방법이 있습니다.

불변 데이터의 장점

불변 데이터를 사용하면 여러 가지 이점이 있습니다.

첫째, 예측 가능한 코드를 작성할 수 있습니다. 데이터가 변경될 수 없으므로 코드의 작동 방식을 예측하기 쉽고 의도한 대로 동작함을 보장할 수 있습니다.

둘째, 성능을 향상시킬 수 있습니다. 불변 데이터를 사용하면 변경된 데이터를 새로 생성하는 대신 기존 데이터를 재사용할 수 있으므로 메모리 사용량과 CPU 사용량을 줄일 수 있습니다.

셋째, 동시성을 지원합니다. 불변 데이터는 여러 스레드 사이에서 안전하게 공유될 수 있습니다. 동시에 데이터를 변경하면 예기치 않은 결과가 발생할 수 있지만, 불변 데이터를 사용하면 데이터의 일관성을 보장할 수 있습니다.

자바스크립트 비즈니스 로직 개발의 팁

자바스크립트로 비즈니스 로직을 개발할 때 불변 데이터를 사용하는 몇 가지 팁이 있습니다.

객체 또는 배열을 변경하는 대신 새로운 객체 또는 배열을 생성하세요. 이를 위해 전개 연산자 ... 를 사용하여 기존 데이터를 복제한 후 변경 사항을 추가하거나 수정할 수 있습니다.

예시 코드:

const oldArray = [1, 2, 3];

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

const oldObject = { name: 'John', age: 30 };

const newObject = { ...oldObject, age: 31 }; // { name: 'John', age: 31 }

함수의 인자로 전달되는 데이터를 수정하지 마세요. 대신 필요한 계산을 수행한 후 결과를 반환하세요.

예시 코드:

// 잘못된 예
function doubleArray(array) {
  for (let i = 0; i < array.length; i++) {
    array[i] = array[i] * 2; // 입력된 배열의 값 변경
  }
  return array;
}

// 올바른 예
function doubleArray(array) {
  const doubledArray = [];
  for (let i = 0; i < array.length; i++) {
    doubledArray.push(array[i] * 2); // 새로운 배열 생성
  }
  return doubledArray;
}

객체나 배열을 비교할 때 얕은 비교(===) 대신 깊은 비교를 수행하세요. 깊은 비교를 위해 lodash 같은 라이브러리를 사용할 수 있습니다. 이렇게 하면 객체 또는 배열의 내용이 변경되었는지 알 수 있습니다.

예시 코드:

const oldArray = [1, 2, 3];
const newArray = [1, 2, 3];

console.log(oldArray === newArray); // false

const isEqual = _.isEqual(oldArray, newArray);
console.log(isEqual); // true

불변 데이터와 이에 따른 비즈니스 로직 개발 방법을 사용하면 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다.