JavaScript 객체의 동작방식

원시 타입 - 문자열, 숫자, 불린 값, null, unsigned)

객체 - 프로퍼티 key : value 들로 구성된 데이터 집합 또는 복잡한 개체

원시값은 값 그대로 저장,할당되고 복사되는 반면에,

객체는 참조에 의해(by reference : 객체가 저장되어있는 '메모리 주소')저장되고 복사된다.

따라서 객체를 복사하여 같은 키값을 가지고 있을 때,

그 키의 값을 바꾸면 원본과 복사된 객체 모두의 키값이 바뀐다.

let user = { name : 'Mike' };
let admin = user;
admin.name = 'Jack';
alert( user.name ); // Jack이 출력됨.

참조값을 복사하기 때문에 동일한 객체를 만들었다하더라도

복사된 객체가 아니면 동등 연산자나 일치 연산자 모두 거짓을 반환한다.

let a = {};
let b = {};

alert( a==b ); // false

a = b;

alert( a==b );   // true
alert( a===b ); // true

만약 독립적인 복제본을 만들려고 한다면 각 프로퍼티를 전부 복사해 넣으면된다.

for(let key in user) {
  clone[key] = user[key];
}

또는 Object.assign를 사용하는 방법도 있다.

let clone = {};

Object.assign(clone, user);

한 줄로 작성할 수도 있다.

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

Object.assign을 이용하면 여러 객체를 하나로 병합할 수 있다.

하지만 동일한 키를 가진 프로퍼티가 있는 경우에는 기존 값이 덮어씌어 진다.

let user = { name: 'Jack' };
let user2 = { name: 'Mike' }
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

Object.assign(user, permission1, permission2, user2);  // user = { name: 'Mike', canView: true, canEdit: true}

이러한 복사방법을 얕은 복사라 하며 이 경우 객체 내에 객체가 있을 경우 참조값이 복사된다.

이 문제를 해결하려면 각 프로퍼티가 객체인지 아닌지 검사하고 객체인 경우 객체의 구조도 복사주는 반복문을 사용하는 깊은 복사를 해야한다.

function makeCloneObj(obj) {
 let result = {};

  for(let key in obj){
    if(typeof(obj[key])=='object') result[key] = makeCloneObj(obj[key]);
    else result[key] = obj[key];
  }

  return result;
}

자바스크립트 라이브러리 Lodash의 매서드인 _.cloneDeep(obj)을 사용하면 이 알고리즘을 직접 구현하지 않고도 깊은 복사를 처리할 수 있다.