깊은 복사와 얕은 복사

깊은 복사(Deep Copy)

객체나 배열을 복사할 때 객체나 배열의 내부 요소를 모두 새로운 메모리 공간에 모두 복사하여 새로운 객체를 생성하는 것. 깊은 복사를 사용하는 이유는 객체 또는 배열을 얕은 복사하여 다른 변수에 할당하면 참조 관계가 복사되기 때문이다. 즉, 새로운 변수에서 원본 객체의 값을 변경하면 원본 객체도 함께 변경되기 때문에 의도치 않은 결과가 발생할 수 있습니다. 깊은 복사의 예시로는 JSON.stringify()와 JSON.parse(), Redux의 modules가 있다.

예시

• 배열 요소 변경

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

  arr라는 기존 배열을 복사하여 newArry라는 새로운 배열 생성

• 객체 속성 변경

const obj = { name: "Alice", age: 20 };
const newObj = { ...obj, age: 21 };

console.log(obj); // { name: 'Alice', age: 20 }
console.log(newObj); // { name: 'Alice', age: 21 }

obj라는 기존의 객체를 복사하여 newObj라는 새로운 객체 생성

참조(Reference)

메모리상에서 데이터가 위치한 주소

참조 관계(Reference Relationship)

변수가 메모리 상의 데이터를 참조하는 관계. 참조 관계는 언어에 따라 다르게 구현되어 있다. 일부 언어는 객체나 배열을 할당하면 참조 관계를 형성하고, 일부 언어는 기본 타입(primitive type) 변수를 할당하면 값 자체가 복사된다. 자바스크립트에서는 객체와 배열을 할당하면 참조 관계가 형성되고, 기본 타입 변수를 할당하면 값 자체가 복사된다.

const obj1 = { name: "Alice" };
const obj2 = obj1;

obj1.name = "Bob";
console.log(obj2.name); // "Bob"

obj2는 obj1을 참조하고 있으므로 obj1의 값이 변경되면 obj2도 같이 변경된다.

const num1 = 1;
const num2 = num1;

num1 = 2;
console.log(num2); // 1

이 경우 num2는 num1을 복사한 값이므로 num1의 값이 변경되어도 num2의 값은 변경되지 않는다.

얕은 복사(Shallow Copy)

객체나 배열을 복사할 때 해당 객체나 배열의 참조 값만을 복사하는 것. 즉, 복사된 객체나 배열은 원본과 같은 객체이지만, 내부의 요소나 속성 값이 변경되면 원본과 복사본의 값이 모두 변경된다. 내부의 객체나 배열이 많이 중첩되어 있는 경우엔 원치 않는 결과를 초래할 수 있으므로 깊은 복사를 사용하는 편이 좋다.

예시

• 객체 - Object.assign()

  const obj1 = { name: 'John', age: 30 };
   const obj2 = Object.assign({}, obj1);

  obj2는 obj1을 복사한 객체다. Object.assign() 메서드는 빈 객체{}와 obj1을 인자로 받아 obj1의 속성을 빈 객체에 복사한다. 고로 obj1과 obj2는 서로 다른 참조 값을 가지지만 속성 값은 같다.

• 배열 - slice(), 전개 연산자(Spread Operator)

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.slice();
const arr3 = [...arr1];

arr2, arr3는 arr1을 복사한 배열이다. slice() 메서드는 arr1의 요소를 복사한 새로운 배열을 반환하며, 전개 연산자는 arr1을 펼쳐서 새로운 배열을 생성한다. 고로 arr1과 arr2, arr3는 서로 다른 참조 값을 가지지만 요소 값은 같다.