얕은 복사 깊은 복사

lbr·2022년 7월 11일
0

얕은 복사(Shallow copy)와 깊은 복사(Deep copy)

얕은 복사 방법

전개 연산자 활용 방법

const user = {
  name: 'Heropy',
  age: 85,
  emails: ['thesecon@gmail.com']
}
const copyUser = {...user};
console.log(copyUser === user); // false

Object.assign();

const user = {
  name: 'Heropy',
  age: 85,
  emails: ['thesecon@gmail.com']
}
const copyUser = Object.assign({}, user);
console.log(copyUser === user); // false

깊은 복사

위 얕은 복사 코드에 이어서...

user.emails.push('neo@zillinks.com');
console.log(user.emails === copyUser.emails); // true
  • 복사를 했음에도 결과값 true가 나옵니다.
  • 속성 emails가 배열인 점에 주목해봅니다. 우리는 참조형 데이터인 user 객체를 복사처리를 했지만, 같은 참조형 데이터인 emails배열을 복사처리를 한적은 없습니다.
  • 이 때 필요한 것이 깊은 복사입니다.

깊은 복사 방법

lodash 활용

npm i lodash로 lodash 설치 후,

import _ from 'lodash';

const user = {
  name: 'Heropy',
  age: 85,
  emails: ['thesecon@gmail.com']
}

const copyUser = _.cloneDeep(user);
console.log(copyUser === user); // false

user.emails.push('neo@zillinks.com');
console.log(user.emails === copyUser.emails); // false

  • lodash 페이지

0개의 댓글