TIL_20210329

참조에 의한 객체 복사

• 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것
• 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사

let message = "Hello!";
let phrase = message;
// 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장

let user = {
  name: "John"
};
// 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장

• 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장
• 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않음

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

• 변수는 두 개이지만 각 변수엔 동일 객체에 대한 참조 값이 저장되기 때문에, 객체에 접근하거나 객체를 조작할 땐 여러 변수를 사용 가능

let user = { name: 'John' };
let admin = user;

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

객체 복사, 병합 및 Object.assign

• 기존에 있던 객체와 똑같으면서 독립적인 객체를 만들고 싶은 경우, 새로운 객체를 만든 다음 기존 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사

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

Object.assign(dest, [src1, src2, src3...])

• 첫 번째 인수 dest는 목표로 하는 객체
• 이어지는 인수 src1, ..., srcN는 복사하고자 하는 객체
• 객체 src1, ..., srcN의 프로퍼티를 dest에 복사
• dest를 제외한 인수(객체)의 프로퍼티 전부가 첫 번째 인수(객체)로 복사
• 마지막으로 dest를 반환

// Ex1) 반복문 없이 객체를 복사

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

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

// Ex2) 목표 객체에 동일한 프로퍼티가 있는 경우

let user = { name: "John" };

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

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

// Ex3) 객체 병합

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 }

• Object.assign로 만든 얕은 복사본의 경우, 중첩 객체를 처리하지 못함
• 중첩 객체 처리를 위한 깊은 복사본을 만들기 위해서는 자바스크립트 라이브러리 lodash의 _.cloneDeep(obj) 메서드 사용