모던 자바스크립트 튜토리얼 part1 - 4.2

4.2 Object references and copying

객체와 기본 타입 간에는 값을 저장하는 방식에서 차이가 있다.

 

객체는 주솟값, 기본 타입은 값 그 자체를 새롭게 생성하여 저장한다. 예를 들어 아래 코드는 변수마다 각각 문자열 값을 따로 저장한다.

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

객체는 다르다. 메모리 어딘가 값이 저장된 주솟값을 변수에 할당한다. 아래 코드에서 각각의 변수는 같은 주솟값을 저장한다.

let user = { name: "John" };

let admin = user; // copy the reference

Comparison by reference

객체를 먼저 생성한 뒤 할당할 경우, 완전히 새로운 객체를 만든 것과 같다.

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

// -------------------
let a = {};
let b = {}; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

객체를 할당할 때는 주솟값을 저장하기 때문에, const 변수에 할당하더라도 내부 속성은 수정이 가능하다.

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

Cloning and merging, Object.assign

Object.assign 함수를 사용해서 객체를 복제할 수 있다.

let user = { name: "John" };

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

// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }
alert(user.name); // John
alert(user.canView); // true
alert(user.canEdit); // true

// -------------------------------
let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // now user = { name: "Pete" }

structuredClone

struecturedClone으로 객체를 복사할 경우 순환 참조를 지원한다. 이 함수를 통해 다른 객체를 복사하더라도, 새롭게 복사된 객체에서의 순환참조 결과를 반환한다. (아래 예시 참조.)

객체의 속성 값으로 함수는 불가능하다.

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

let clone = structuredClone(user);

alert( user.sizes === clone.sizes ); // false, different objects

// user and clone are totally unrelated now
user.sizes.width = 60;    // change a property from one place
alert(clone.sizes.width); // 50, not related