[javascript] Lodash의 클론 함수들과 사용 예제

21 Nov 2023

javascript

Lodash는 자바스크립트 유틸리티 라이브러리로, 다양한 기능들을 제공합니다. 그 중에서도 클론(clone)과 관련된 함수들은 매우 유용합니다. 클론 함수들은 객체나 배열을 깊은 복사(deep copy)하거나 얕은 복사(shallow copy)할 때 사용됩니다. 이번 글에서는 Lodash의 주요 클론 함수들과 간단한 사용 예제들을 살펴보겠습니다.

1. _.cloneDeep

_.cloneDeep 함수는 객체나 배열을 깊은 복사하여 새로운 객체나 배열을 생성합니다. 원본 객체나 배열의 모든 값을 재귀적으로 복사하므로, 원본과 완전히 독립된 새로운 객체 또는 배열을 얻을 수 있습니다.

사용 예제:

const originalObject = { name: "John", age: 30, address: { city: "New York", country: "USA" } };
const clonedObject = _.cloneDeep(originalObject);

// clonedObject를 수정해도 originalObject는 영향을 받지 않음
clonedObject.name = "Michael";
clonedObject.address.city = "Los Angeles";

console.log(originalObject); // { name: "John", age: 30, address: { city: "New York", country: "USA" } }
console.log(clonedObject); // { name: "Michael", age: 30, address: { city: "Los Angeles", country: "USA" } }

2. _.clone

_.clone 함수는 객체나 배열을 얕은 복사하여 새로운 객체나 배열을 생성합니다. 원본 객체나 배열의 최상위 값들만 복사하므로, 내부 객체나 배열은 참조로 유지됩니다.

사용 예제:

const originalArray = [1, 2, 3, [4, 5]];
const clonedArray = _.clone(originalArray);

// clonedArray를 수정하면 originalArray도 영향을 받음
clonedArray.push(6);

console.log(originalArray); // [1, 2, 3, [4, 5], 6]
console.log(clonedArray); // [1, 2, 3, [4, 5], 6]

3. _.cloneDeepWith

_.cloneDeepWith 함수는 깊은 복사를 수행하되, 사용자 정의 로직을 적용할 수 있습니다. 사용자 정의 로직을 통해 특정 형식의 데이터를 수정하거나 무시할 수 있습니다.

사용 예제:

const originalObject = { name: "John", age: 30, password: "secret" };
const clonedObject = _.cloneDeepWith(originalObject, (value) => {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  return undefined; // password 필드를 무시
});

console.log(originalObject); // { name: "John", age: 30, password: "secret" }
console.log(clonedObject); // { name: "JOHN", age: 30 }

Lodash의 클론 함수들은 복사 작업을 간편하게 처리할 수 있도록 도와줍니다. 프로젝트에서 객체나 배열을 복사해야 할 경우에는 Lodash의 클론 함수들을 활용해보세요.

더 자세한 내용은 Lodash 공식 문서를 참고하시기 바랍니다.