[JavaScript(10)] 객체 복사(Object.assign()과 structuredClone())

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 객체 복사를 리뷰해보려고 합니다.

 

OverView

---

JavaScript에서 객체를 다루다 보면 이런 상황을 자주 만나게 됩니다.

 

let user = {
  name: "상구",
  age: 20,
};

let copyUser = user;

copyUser.age = 30;

console.log(user.age); // 30

JavaScript에서 객체는 값 자체가 복사되는 것이 아니라, 객체가 있는 위치를 가리키는 참조가 복사되기 때문입니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

개념 설명

---

 

 

1. 객체의 참조 복사란?

객체의 참조 복사란, 객체 자체를 새로 만드는 것이 아니라 같은 객체를 가리키는 주소만 복사하는 것을 말합니다.

 

JavaScript에서 숫자, 문자열, 불린값 같은 원시값은 값을 복사합니다.

let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20

 

 

let user = {
  name: "상구",
};

let admin = user;

admin.name = "상민";

console.log(user.name);  // 상민
console.log(admin.name); // 상민

여기서 user와 admin은 서로 다른 객체가 아닙니다. 둘 다 같은 객체를 바라보고 있습니다.

 

그래서 admin.name을 바꾸면, 같은 객체를 바라보는 user.name도 바뀐 것처럼 보입니다.

 

정확히 말하면 user가 바뀐 것이 아니라, user와 admin이 함께 바라보는 객체 내부 값이 바뀐 것입니다.

 

---

 

2. 객체 비교란?

 

 

객체 비교란 두 객체가 같은지 확인하는 것을 말합니다.

 

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

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

 

겉으로 보기에는 둘 다 빈 객체처럼 보이지만 a와 b는 따로 만들어진 객체입니다.

 

즉, 모양은 같아도 메모리상에서는 다른 객체입니다.

 

객체 비교에서 중요한 기준은 내용이 같은가?가 아니라 같은 객체를 바라보고 있는가?입니다.

let user = {
  name: "상구",
};

let copy = user;

console.log(user === copy); // true

 

 

---

 

3. 얕은 복사와 깊은복사?

 

• 얕은 복사

얕은 복사란 객체의 가장 바깥쪽 프로퍼티만 새 객체로 복사하는 방식입니다.

 

대표적인 방법은 Object.assign()과 스프레드 문법입니다.

 

// Object.assign()
let user = { 
    name: "상구", 
    age: 20, 
}; 

let copyUser = Object.assign({}, user); 

copyUser.age = 30; 

console.log(user.age); // 20 
console.log(copyUser.age); // 30


// 스프레드 문법
let user = { 
    name: "상구", 
    age: 20, 
}; 
let copyUser = { ...user }; 

copyUser.name = "상민"; 

console.log(user.name); // 상구 
console.log(copyUser.name); // 상민

 

 

 

 

---

4. 깊은 복사란?

 

깊은 복사란는 객체 안에 중첩된 객체까지 모두 새롭게 복사하는 방식입니다.

let user = { 
    name: "상구", 
    address: { city: "서울", }, 
}; 

let deepCopyUser = structuredClone(user); 

deepCopyUser.address.city = "부산"; 

console.log(user.address.city); // 서울 
console.log(deepCopyUser.address.city); // 부산

 

 

 

마무리

---

 

오늘은 JavaScript의 객체 복사에 대해 정리해봤습니다.

 

JavaScript에서 객체를 변수에 대입하면 객체 자체가 복사되는 것이 아니라 참조가 복사됩니다.

Object.assign()과 스프레드 문법은 얕은 복사이고, 중첩 객체까지 독립적으로 복사하려면 structuredClone() 같은 깊은 복사 방법을 고려해야 합니다.

객체 복사는 “원본과 복사본이 서로 영향을 줘도 되는가?”를 기준으로 판단하면 훨씬 이해하기 쉽습니다. 

 

객체 복사는 실제로 알고리즘에서도 많이 사용되고 특히 저도 문제를 풀다가 객체에 대한 이해 부족으로 힘들어 했던 적이 있었던 만큼 꼼꼼하게 다시 한번 보는 것이 중요하다고 생각이 듭니다.

 

공부화이팅!