B14 : 객체의 복사

목차

1. 객체의 저장과 복사

2. 객체의 비교

3. 얕은 복사 (Shallow Copy)

4. 깊은 복사 (Deep Copy)

---

1. 객체의 저장과 복사

원시타입들은 '값 자체'가 변수에 저장되는 반면,

객체는 값이 아닌 메모리 주소가 저장된다.

let user = { name: "John" };
let admin = user;

admin.name = "Pete";
console.log(user.name);	// "Pete"

user, admin 둘다 같은 객체를 바라보고 있다.

admin에 복사된 값이 user의 메모리 주소이기 때문에 user, admin은 같은 메모리 주소를 가리키고 있는 것이다.

---

2. 객체의 비교

객체 비교 시 동등 연산자(==)와 일치 연산자(===)는 동일하게 동작한다.

let a = {};
let b = a;
let c = {}

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

• a를 복사한 b는 a와 완전히 동일하다.
• a와 c는 동일한 빈 객체이지만 다른 메모리 주소를 가지는 독립된 객체이므로 비교했을 때 다른 것으로 나온다.

---

3. 얕은 복사 (Shallow Copy)

1. for... in 반복문

for...in 반복문으로 객체를 복제할 수 있다.

프로퍼티들을 순회해서 원시 수준까지 복사하는 것이다.

let user = { name: "John", age: 30 };
let clone = {};

for (let key in user) {
  clone[key] = user[key];
}

 

2. Object.assign()

Object.assign() 메서드로 객체를 복사할 수 있다.

• 첫 번째 인수 : 목표로 하는 객체
• 두 번째 인수부터 : 복사하고자 하는 객체

복사하고자 하는 객체들의 프로퍼티들을 목표 객체에 복사한다.

let user = { name: "John" };
let clone = Object.assign({}, user);

 

여러 객체를 병합하는 것도 가능하다.

let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

Object.assign(user, permissions1, permissions2);
// user = { name: "John", canView: true, canEdit: true }

 

• 목표 객체에 동일한 이름을 가진 프로퍼티가 있는 경우, 기존 값이 덮어씌워진다.

 

3. 스프레드 문법

전개 연산자를 사용하는 스프레드 문법으로 간단하게 복사할 수 있다.

let user = { name: "John", age: 30 };
let clone = { ...user };

 

 

---

4. 객체의 깊은 복사

위까지는 원본 객체의 모든 프로퍼티가 원시값만 있었다.

하지만 프로퍼티는 다른 객체에 대한 참조값일 수도 있다. 이럴 경우, 위와같은 복사 방법으로는 객체 프로퍼티를 복사할 수 없다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};
alert( user.sizes.height ); // 182

let clone = Object.assign({}, user);
alert(user.sizes === clone.sizes );	// true

user.sizes.width++;
alert(clone.sizes.width);	// 51

 

이렇게 중첩된 객체의 복사를 할 때는 다른 방법을 사용해야한다.

 

1. structuredClone()

structuredClone 함수로 깊은 복사를 할 수 있다.

let user = {
  name: "John",
  sizes: { height: 182, width: 50 }
};

// 표준 structuredClone API
let clone = structuredClone(user);

console.log(user.sizes === clone.sizes); // false (완전 독립)

 

 

2. Ladash

 

Lodash를 활용하여 깊은 복사를 할 수 있다.

const clone = _.cloneDeep(user);

 

 

 

 

참고

https://ko.javascript.info/object-copy