Object.assign()이란

Object.assign 이란?

Object.assign을 이용해서 객체를 합치는 것이 가능하다. 또한, 합칠 때는 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에도 사용될 수 있다.

예시 1

const target = { a: 1, b: 2}
const source = { c: 3, d: 4}

const returnedTarget = Object.assign(target, source);

console.log(returnedTarget)//{ a: 1, b: 2, c: 3, d: 4 }

예시 2

const target = { a: 1, b: 2 }
const source = { b: 3, d: 4}

const returnedTarget = Object.assign(target, source);

console.log(returnecTarget) //{ a: 1, b: 3, d: 4 }

예시 3. 배열 요소 갱신

1번째 인덱스의 객체를 변경하고 싶을 때

emplyees = [
    {
        firstName : 'John',
        lastName: 'Doe'
    },
    {
        firstName: 'David',
        lastName: 'Hue',
    },
    {
        fistName: 'Jack',
        lastName: 'Daniel'
    }
];

emplyee = {
    firstName: 'David',
    lastName: 'Cameron'
}

Object.assign(emplyees[1],emplyee);
//[
//  { firstName: 'John', lastName: 'Doe' },
//  { firstName: 'David', lastName: 'Cameron' },
//  { fistName: 'Jack', lastName: 'Daniel' }
//]

예시 4. Object의 복사 (클론)

let user = {firstName: 'John', lastName: 'Doe' };
let user_clone = Object.assign({}, user);

property 삭제 (구조분해 할당, delete 메소드)

구조분해 할당을 사용하거나 js에서 지원하는 메소드 중 delete를 사용하면 객체 내 원하는 property(key, value)를 삭제할 수 있다. delete를 사용하면 원본 객체의 데이터가 바뀌게 되어 복사 후 사용하는 것을 추천!

구조 분해 할당

const obj = {name: 'dale', age: 30, place: 'seoul'};

/* 구조 분해 할당 */
const {name, ...rest} = obj; // name,  ...rest(name을 제외한 property)
const result = {...rest} // { age: 30, place: 'seoul' }

/* 원본 */
obj // { name: 'dale', age: 30, place: 'seoul' }

delete 메소드

const obj = {name: 'dale', age: 30, place: 'seoul'};

const objCopy1 = Object.assign({},obj)
const objCopy2 = {...obj}	

delete objCopy1['name']
delete objCopy1['age']

objCopy1 // { place: 'seoul' }

delete objCopy2['age']
objCopy2 // { name: 'dale', place: 'seoul' }

/* 원본 데이터 */
obj // { name: 'dale', age: 30, place: 'seoul' }