자바스크립트-참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이는 참조에 의해(by reference) 저장되고 복사된다는 것이다.

반면에 원시값(문자열, 숫자, 불린 값)은 값 그대로 저장, 할당된다.

 

-객체의 동작방식

변수에 객체가 그대로 저장되지 않는다. 객체는 메모리 내 어디엔가 저장이되고 객체가 저장되어있는 메모리 주소인 객체에 대한 참조값이 저장된다.

=> 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다.

 

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

따라서 객체에 접근할 때 여러 변수를 사용할 수 있다.

 

-참조에 의한 비교

let a = {};
let b = a; // 참조에 의한 복사

alert( a == b ); // true, 두 변수는 같은 객체를 참조합니다.
alert( a === b ); // true

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

 

let a = {};
let b = {}; // 독립된 두 객체

alert( a == b ); // false

a, b는 둘 다 비어있는 객체지만 독립된 객체라서 false가 반환

 

---

-객체 복사

객체를 복제해야 할 일은 거의 없다. 하지만 복제가 필요한 상황이면

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

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사하면 된다.

 

다른 방법으로는 Object.assign를 사용한다.

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

이렇게 복사가 가능하다.

 

-깊은 복사, 객체 복사하기

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

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

alert( user.sizes === clone.sizes ); // true, 같은 객체입니다.

// user와 clone는 sizes를 공유합니다.
user.sizes.width++;       // 한 객체에서 프로퍼티를 변경합니다.
alert(clone.sizes.width); // 51, 다른 객체에서 변경 사항을 확인할 수 있습니다.

user[key] 값을 검사하면서 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용한다. 이런 방식을 깊은 복사라고 한다.