참조에 의한 객체 복사

• 원시 타입 : 값 그대로 저장과 할당, 복사가 가능
• 객체 타입 : 객체가 저장되어 있는 메모리 주소 인 객체에 대한 참조값(by reference)이 저장

 

ex)

let user = {

name: “John”

}

 

객체는 메모리 내 어딘가에 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장 ➡️ 객체가 할당된 변수를 복사할 땐 객체의 참조값이 복사

 

ex) 

let user = { name : “John” };

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

 

admin.name = “Pete”;

 

console.log(user.name);

 

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

 

따라서 객체에 접근하거나 객체를 조작할 땐 여러 변수를 사용할 수 있습니다

 

참조에 의한 비교

• == 와 === 는 동일하게 동작한다
• 비교하는 두 객체가 동일한 객체인 경우 true 반환
• 대소비교나 원시값과의 비교에선 객체가 원시형으로 변환(코딩 실수로 생기는 상황)

 

ex)

let a = {};

let b = a;

 

console.log( a == b ); // true

console.log( a === b ); // true 

 

let a = {};

let b = {};

 

console.log( a == b ) // 각각 독립된 객체이기 때문에 false

 

객체 복사, 병합과 Object.assign

• 객체를 복제하는 경우는 드물지만 필요한 상황인 경우

ex)

let user = {

name: “John”,

age: 30

};

 

let clone = {};

 

// clone 객체에 user 프로퍼티 전부 복사

for(let key in user) {

clone[key] = user[key];

}

 

clone.name = “Pete”; // clone의 데이터를 변경

console.log(user.name) // John

 

• Object.assign : 여러 객체를 하나로 병합

ㄴ 얕은 복사(shallow copy)

ㄴ 중첩 객체 처리 X

 

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

a. dest는 목표로 하는 객체

b. 인수 src1, src2…는 복사하고자 하는 객체

c. 객체 src1, src2…의 프로퍼티를 dest에 복사, dest를 제외한 인수의 프로퍼티전부가 첫번째 인수로 복사

d. 마지막으로 dest 반환

 

 ex)

let user = { name: “John” };

 

let permission1 = { canView: true };

let permission2 = { canEdit: true };

 

// permission1 와 permission2의 프로퍼티를 user로 복사

Object.assign(user, permission1, permission2)

 

// user = { name: “John”, canView: true, canEdit: true }

 

ex) 목표 객체에 동일한 이름을 가진 프로퍼티가 있는 경우

 

let user = { name: "John" };

 

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

 

console.log(user.name); // user = { name: "Pete" } , 덮어씌운다

 

ex) Object.assign을 사용하여 반복문 없이도 간단하게 객체 복사

 

let user = {

name: “John”,

age: 30

};

 

let clone = Object.assign({}, user); // user에 있는 모든 프로퍼티가 {}에 복사, clone 변수에 할당

 

중첩 객체 복사

• 프로퍼티가 다른 객체에 대한 참조 값이라면?

 

ex)

let user = {

name: “John”,

sizes: {

height: 182,

width: 50

}

};

 

console.log(user.sizes.height); // 182

 

ex) clone 에 객체를 복제하려면

 

let user = {

name: “John”,

sizes: {

height: 182,

width: 50

}

};

 

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

 

console.log(user.sizes === clone.sizes); // true

 

// user와 clone은 sizes를 공유한다

user.sizes.width++; // 한 객체에서 프로퍼티 변경

console.log(clone.sizes.width); // 다른 객체에서 변경 사항 확인 가능

 

깊은 복사(deep cloning)

: object[key]의 각 값을 검사하면서, 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용

 

자바스크립트 라이브러리 lodash의 매서드 _.cloneDeep(obj) ➡️ 직접 알고리즘 구현하지 않고 처리가능