참조에 의한 객체 복사

이 글은 모던 자바스크립트(https://ko.javascript.info)에서 참조하였습니다.

 

객체와 원시 타입의 차이 중 하나는

객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다.

원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠.

let message = "Hello!";
let message2 = message;

 

그런데 객체는 이와 다르게 동작합니다.

변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다.

그림을 통해 변수 user에 객체를 할당할 때 무슨 일이 일어나는지 알아봅시다.

 

let user = {
  name: "John"
};

 

객체는 메모리 내 어딘가의 부분에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장됩니다.

따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다.

 

 

let user = { name: "John" };
let admin = user; // 참조값을 복사함

 

변수는 두 개이지만 각 변수엔 동일 객체에 대한 참조 값이 저장되죠.

한 변수에 대한 속성값을 바꾸면 다른 변수에 대한 속성값이 바뀌게 되죠.

admin.name = 'jack'
console.log(user.name) /// 'jack'

 

참조에 의한 비교

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

비교 시 피연산자인 두 객체가 동일한 객체인 경우에 참을 반환하죠.

두 변수가 같은 객체를 참조하는 예시를 살펴보자. 일치·동등 비교 모두에서 참이 반환된다.

 

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

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

 

 

객체 복제 방법

정말 복제가 필요한 상황이라면 새로운 객체를 만든 다음 기존 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사하면 됩니다.

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",
  age: 30
};

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