[Js] 객체 복제 Object.assign

객체 와 원시 타입 복제의 차이점

• 차이점
  객체는 참조에 의해 저장되고 복사 된다.
  원시값으(문자열, 숫자, 불린 값)은 값 그대로 저장, 할당 된다.

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

위의 코드를 실행하면 독립된 변수 message와 phrase 에 각각 문자열을 저장합니다.

하지만 객체의 동작 방식은 다릅니다.

let user = {
  name: "hou"
}

let admin = user;

위의 코드는 admin을 수정하면 user가 수정되게 됩니다. 확인을 해보면

admin.age = 30
console.log(user)
//{name: 'hou', age: 30}

user는 건들지도 않았는데 user의 값이 변경되는 것을 확인할 수 있습니다.

이유는 객체를 만들 때 변수에 직접 저장하는곳이 아니라, 메모리 어딘가에 저장을 하게 됩니다. 예를들면 지하철 무인 사물함 처럼요! user라는 사람이 물건을 넣습니다. 그리고 admin이라는 사람이 물건을 또 넣어요 그럼 그 사물함은 user라는 사람이 넣은 물건도 있고 admin이라는 물건도 있습니다. 그래서 건들지 않아도 그 사물함을 확인해보면 자기가 넣지 않은 물건이 있듯이 object도 그런것이죠!

참조비교!

객체 비교 할때 동등 연산자 == 와 일치 연산자 ===은 동등하게 작동합니다. 예를들면 서랍을 같은 서랍을 쓰는지 다른 서랍을 쓰는지 알아봅시다!

let a = {};
let b = a;

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

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

alert( a == b ); // false

Object.assign

Object.assign()은 데이터를 복제한다.

기존에 있던 객체와 똑같은 데이털르 가졌지만 독립적인 객체를 만들고 싶다면 Object.assign()을 사용하면된다.

let user = { name : "hou" }
let age = { age : 30 }
let major = { major : "vocal"}

// user, age, major merge
Object.assign(user, age, major);

console.log(user) // {name:"hou" , age : 30, major : "vocal"}

동일한 프로퍼티가 있는 경우엔 기존 값이 덮어써집니다.

Object.assign(user, {age:24});

console.log(user);
// {name : "hou" , age:24, major:'vocal'}

새로운 객체에 복사하고 싶다면

//1. 방법
let newUser = {};

Object.assign(newUser, user);

//2.방법
let cloneUser = Object.assign({}, user);

빈 객체를 만든후에 객체를 복사시켜도 되고,
변수를 선언한 후에 parameter로 빈 객체를 넘겨줘도 복제가 가능하다.

객체 안에 객체 복사하기

let user = {
  name: "hou"
  sizes: {
    height: 186
    width: 78
  }
};

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

alert( user.sizes === clone.sizes ); // true, 같은 객체입니다.

// user와 clone는 sizes를 공유합니다.
user.sizes.width++;       // 한 객체에서 프로퍼티를 변경합니다.
alert(clone.sizes.width); // 51, 다른 객체에서 변경 사항을 확인할 수 있습니다.

객체 안에 객체 복사하는 건,, 반복문을 사용해서 복사하거나 자바스크립트 라이브러리 lodash의 메서드인 _.cloneDeep(obj)를 사용하면 쉽게 저장할수 있다고 한다.