깊은 복사, 얕은 복사

김하은·2023년 5월 27일

얕은 복사

객체나 배열을 스프레드 연산자를 사용해 복사하는 방법
단, 객체 안에 객체가 있는 경우 ==> 스프레드를 사용할 경우 해당 객체가 있는 주소값이 그대로 들어가기에 이 객체 안에서도 스프레드를 사용해야함.

깊은 복사

위에서 스프레드를 활용했으나, 제대로 복사가 되지 않은 마지막 예시를 해결할 수 있는 방법은 복사할 객체를 전부 문자열로 바꾸고 변수에 담은뒤, 다시 객체로 바꾸면 새 객체를 만든것과 마찬가지의 효과를 얻게되어 원하는 형태의 복사를 할 수 있음.

const profile = {
  name:"철수",
  age:12,
  school:"토끼초등학교"
}

let profile2 = JSON.stringify(profile) =>// profile이라는 객체를 문자열로 바꾸어 profile2라는 변수에 담아줌. ==> 하나의 문자열이됨.
JSON.parse(profile2)// => 이렇게 문자열로 바뀐것을 넣어주면 다시 객체로 바뀜.(새객체 => 문자열을 가지고 새롭게 다시 만든것이기에)

다만, 배열이나 객체가 복잡할 수록 성능이 느려질 수 있다.
이것을 더 효율적으로 사용할 수 있는 라이브러리도 존재한다. => 대표적으로 lodash 라는 것이 있다.
npm에서 검색하거나 lodash홈페이지를 들어가면 자세히 알 수 있다.
보통

import _ from 'lodash';

_.cloneDeep() =>깊은복사

얕은복사 실습

const child1 = {
  name:"철수",
  age:13,
  school:"다람쥐초등학교"
}

const child2 = {
  ...child1
}

깊은복사 다른 방법(stringify와 parse를 같이 진행)

child2.name.first = "최";
child2.name.last = "영희";

const로 선언했는데 값이 바뀐다??
객체나 배열은 const 로 선언 했더라도 값이 바로 할당된것이 아니고 값이 위치한 주소가 할당되어 때문에 child1.name등으로 접근하여 변경이 가능한 것이다.
만약 일반 변수처럼 const로 선언하여 값을 변경(재할당)하지 못하게 하는 것처럼, 객체도 값의 변경을 막으려면 Object.freeze()라는 것으로 묶어주면 값을 변경하지 못하게된다.

REST파라미터

객체에서 일부 요소를 지우고 싶을때!

delete child.money
delete child.hobby
이렇게 delete를 사용하여도 가능하지만, 원본을 건드리게되어, 코드의 복잡성이 높아지면 어디서 사용되고 있을지도 모르기 때문에 좋은 방법은 아니다.
이럴때 사용하는것이 rest 파라미터이다.
이것을 사용하면 필요하지 않은 요소들이 지워진 새로운 객체가 만들어지게 된다.
(스프레드연산자와, 구조분해할당을 사용한다.)