Object.assign - Shallow Copy

< 참고 자료 : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign >

 

JS 에서 객체를 다루다보면, 대입을 했을때 reference 만 복사되어, 

한 객체를 변경하면, 초기 객체 또한 변경이 되는 상황을 늘 겪는다.

const o1 = { name : 'kim', age : 30 }
const o2 = o1 // 이거는 reference 를 복사하는것일뿐...

o2.age = 40

console.log(o1.age) // 40
console.log(o2.age) // 40

이 부분은 대부분 편리하지만, 진정으로 복사를 원할 경우에는 그렇지않다.

이럴때 사용하는것이 Object.assign 이다.

const o1 = { name : 'kim', age : 30 }

const o2 = Object.assign({}, o1) // {} 한테 o1 을 복사후 return 해주셈!

o2.age = 40

console.log(o1.age) // 30
console.log(o2.age) // 40

첫번째 인자로 target, 두번째 인자로 source 가 들어간다.

따라서, 아래와 같이 작성해줄수있다.

const o1 = { name : 'kim', age : 30 }
const o2 = {}

Object.assign(o2, o1) //  o2 한테 o1 을 복사해주셈!

하지만 deep copy 는 아니다, 만약 객체의 프로퍼티중 또 다른 객체의 reference 가 들어가있다면, 그건 reference 를 복사할 뿐이다.

하지만 값들이 모두 prmitive type 이라면 유용한 기능이다.

 

이 Object.assign 은 계속해서 인자로 다른 객체를 받을수있는데, 이때 각 객체들간에 동일한

프로머티가 존재하면 뒤에 등장한 녀석의 값으로 덮어씌워지게된다.

const a = { v : 'one' }
const b = { v : 'two' }
const c = { v : 'three' }

const result = Object.assign({}, a, b, c)

console.log(result.v) // three

 

Object.assign 은 여러 가지 인자를 받도록 오버로딩 되어있어서,  공식 문서를 보도록 한다.