[JavaScript] 얕은 복사, 깊은 복사

자바스크립트의 데이터 복사

• 원시 값(String, Number)를 복사할 때, 복사한 값은 메모리 공간에 할당되지 않기에 복사 이전의 값을 바꿔도 바뀌지 않음 (깊은 복사)

• 참조 값(배열, 객체, 함수)를 복사할 때, 동일한 메모리 공간을 바라보고 있어, 이전의 값을 바꾸면 동일하게 값이 바뀜 (얕은 복사)

// 얕은 복사
const shllowCopy1 = 1;
let shllowCopy2 = shllowCopy1;

shllowCopy2 = 2

console.log(shllowCopy1); //1
console.log(shllowCopy2); //2

// 깊은 복사
const deepCopy1 = {number: 1};
let deepCopy2 = deepCopy1;

deepCopy2.number = 2

console.log(deepCopy1); // {number: 2}
console.log(deepCopy2); // {number: 2}

얕은 복사 방법

• Array.prototype.slice()

• Object.assign()

• 기본 할당

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

// Object.assign
const copiedObj1 = Object.assign({}, obj);

copiedObj1.b.c = 3

console.log(obj === copiedObj1);	// false
console.log(obj.b.c === copiedObj1.b.c); // true

// 기본 할당
const copiedObj2 = obj;

copiedObj2.b.c = 3

console.log(obj === copiedObj2); 	// false
console.log(obj.b.c === copiedObj2.b.c) // true

깊은 복사 방법

• JSON.parse(JSON.stringify(jsonObject)) : 객체를 String으로 변환 후, 다시 객체로 할당

• JSON에서 사용 가능한 자료형(Number, String, Boolean, Object, Array, null)만 사용 가능

• 객체의 프로퍼티의 타입이 function일때 JSON.stringify를 쓸 때 undefined로 변환 / NaN은 null로 변환되기에 사용에 유의해야한다.

• 재귀함수

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

// JSON.parse(JSON.stringify());
const copiedObj1 = JSON.parse(JSON.stringify(obj));

copiedObj1.b.c = 3

// 재귀함수
function copyObj(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      result[key] = copyObj(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }

  return result;
}

const copiedObj2 = copyObj(obj);

copiedObj2.b.c = 3

obj.b.c === copiedObj.b.c //false

출처)
https://velog.io/@lhj5924/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC
https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC