불변 데이터와 자바스크립트 모듈화

데이터의 불변성은 프로그래밍에서 매우 중요한 개념입니다. 불변 데이터란 한 번 정의된 후에는 변경될 수 없는 데이터를 말합니다. 자바스크립트에서도 이러한 불변성을 유지하는 것이 좋은 프로그래밍 습관이며 여러 가지 이점을 가져다줍니다.

불변 데이터의 이점

1. 예측 가능한 동작

불변 데이터는 한 번 만들어지면 절대로 변하지 않는 특성을 가지고 있습니다. 이는 코드의 예측 가능성을 높여줍니다. 변경 가능한 데이터의 경우 값이 언제든지 바뀔 수 있으므로 코드의 동작이 예측하기 어렵습니다.

2. 성능 향상

불변 데이터는 변경이 불가능하기 때문에 수정이 필요하지 않습니다. 이는 메모리 사용량을 줄이고, 복사 및 생성 비용을 낮추어 성능 향상에 도움을 줍니다.

3. 동시성 제어

불변 데이터는 동시에 여러 개의 스레드에서 접근해도 안전합니다. 변경 가능한 데이터의 경우 동시에 접근하면 예기치 않은 결과가 발생할 수 있습니다. 불변 데이터는 스레드 간의 공유되는 데이터로 사용하기 적합합니다.

자바스크립트에서의 불변 데이터

1. 객체(Object) 불변성

자바스크립트에서는 객체가 참조 형식이기 때문에 객체의 불변성을 유지하기 어렵습니다. 하지만 Object.freeze() 메서드를 사용하여 객체를 얼리면 해당 객체는 수정이 불가능해집니다. 또한, 객체를 수정하는 대신에 새로운 객체를 생성하는 방식을 사용하여 불변성을 유지할 수 있습니다.

const obj = Object.freeze({ name: "John", age: 30 });
// obj.name = "Mike"; // TypeError: Cannot assign to read only property 'name' of object Object

const updatedObj = { ...obj, name: "Mike" };
console.log(updatedObj); // { name: "Mike", age: 30 }

2. 배열(Array) 불변성

배열의 경우에도 Object.freeze() 메서드를 사용하여 불변성을 유지할 수 있습니다. 또한, concat(), slice(), map() 등의 배열 메서드를 사용하여 원본 배열을 수정하지 않고 새로운 배열을 반환하는 방식을 사용할 수 있습니다.

const arr = Object.freeze([1, 2, 3]);
// arr.push(4); // TypeError: Cannot add property 3, object is not extensible

const newArr = arr.concat(4);
console.log(newArr); // [1, 2, 3, 4]

자바스크립트 모듈화

모듈화는 코드를 재사용하고 유지보수하기 쉽게 만드는 중요한 개념입니다. ES6에서 도입된 자바스크립트 모듈화는 importexport 키워드를 사용하여 모듈을 정의하고 가져올 수 있게 해줍니다.

모듈 정의

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

모듈 가져오기

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

자바스크립트 모듈화를 사용하면 함수, 변수, 클래스 등을 모듈로 분리하여 필요한 곳에서 가져와서 사용할 수 있습니다. 이를 통해 코드의 가독성과 관리성을 향상시킬 수 있습니다.

결론

불변 데이터와 자바스크립트 모듈화는 코드의 예측 가능성, 성능 향상, 동시성 제어 등을 강화시켜 줍니다. 자바스크립트에서 불변성을 유지하고, 모듈화를 통해 코드를 구조화하여 활용하면 유지보수가 용이한 프로그래밍을 할 수 있습니다.

#참고자료