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

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

참조에 의한 객체 복사

 

---

자바스크립트에서의 원시 타입과 객체의 근본적인 차이는 객체는 참조에 의해(by reference) 저장되고 복사된다는 것이다.

원시값(문자열, 숫자, boolean) 값 : 값 그대로 저장 / 할당 / 복사
객체 값 : 참조에 의해(by reference) 저장되고 복사

 

원시값

let message = "Hello!";
let phrase = message;

예시를 실행하면, 각각의 독립적인 변수에 "Hello" 가 저장된다.

 

객체값

let user = {
  name: "John"
};

객체는 어느 메모리 내 어딘가에 저장되고, 변수 user 엔 그 객체를 참조할 수 있는 값이 저장된다.

따라서, 객체가 할당된 변수를 복사할 땐 객체의 참조값 만 복사되는 것이다.

 

let user = { name: "John" };

let admin = user; // 참조값을 복사함

변수는 두 개이지만, 각 변수엔 동일한 객체를 참조하고 있는 것이다.

---

참조에 의한 비교

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

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

동일한 객체를 a와 b는 서로 참조하고 있기 때문에, true 로 나온다.

 

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

alert( a == b ); // false

하지만, 위의 코드는 독립된 객체이기 때문에 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",
  age: 30
};

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