[쏙쏙 들어오는 함수형 코딩] CH6 ~ CH7 (얕은 복사, 깊은 복사)

얕은 복사(Shallow Copy)

얕은 복사는 객체나 배열을 복사할 때, 첫 번째 레벨만 복사하는 것을 말합니다.

내부의 객체나 배열은 참조가 공유됩니다.

`카피-온-라이트` 형태로 함수를 변경하여 사용됩니다.

 

`카피-온-라이트` 규칙

1. 복사본 만들기
2. 복사본 변경하기
3. 복사본 리턴하기

const alter_hobbies = (originalObject, key, value) => {
  let copy = Object.assign({}, originalObject);
  copy[key] = value;
  return copy;
};

let originalObject = {
  name: "jin",
  age: 30,
  hobbies: ["reading", "gaming"],
};

console.log(alter_hobbies(originalObject, "age", 25));

Object.assign() 메서드를 통해 객체를 얕은 복사 하고, age를 변경합니다.

 

깊은 복사(Deep Copy)

깊은 복사는 객체의 모든 레벨을 재귀적으로 복사하여 새로운 객체를 생성하는 것을 말합니다.

이 방법은 내부의 객체나 배열까지 모두 복사됩니다.

 

위 얕은 복사의 경우에서는, 객체 내부에 있는 배열의 요소에 접근해서 값을 바꿀 수 없습니다.

hobbies의 0번째 인덱스 값을 변경하려면 객체를 deepCopy 해야 합니다.

 

const alter_hobbies = (originalObject, key, value) => {
  // deepCopy 함수
  const deepCopy = (obj) => {
    if (typeof obj !== "object" || obj === null) {
      return obj;
    }

    let newObj = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = deepCopy(obj[key]);
      }
    }

    return newObj;
  };

  let copy = deepCopy(originalObject);
  copy.hobbies[key] = value;
  return copy;
};

let originalObject = {
  name: "jin",
  age: 30,
  hobbies: ["reading", "gaming"],
};

console.log(alter_hobbies(originalObject, 0, "cooking"));

deepCopy 함수를 사용해서 배열의 0번째 인덱스 값을 변경

 

+ 방어적 복사(Deep Copy)를 실습하기 위해 `lodash`와 같은 라이브러리를 사용할 수 있습니다!

 

 

카피온라이트 형식의 Javascript 메서드

Javascript에는 배열을 다루는 데에 유용한 다양한 메서드가 제공됩니다. 

Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 담은 새로운 배열을 생성합니다!

이 때, 기존 배열은 변경되지 않습니다. 

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);

 

Array.prototype.toSorted()

배열의 원소를 정렬 지정 방식에 따라 새롭게 정렬합니다.

sort()와 동일하나 원본이 아닌 정렬된 복사본을 반환합니다.