FrontEnd/JavaScript

[JS] javascript : Object.assgin 함수를 통해 객체를 복사해보자 에 대한 정리

모찌바라기 2022. 12. 18. 14:06
728x90
반응형

 

 

Object.assign 함수란?

 

Object.assign함수란 target에 모든 열거 가능한 sources를 복사하여 target에 복사하고 

그 target를 반환해준다.

 

즉 assign함수에

 

첫번째 파라메터가 target이고

나머지 파라메터들은 sources이다. 

 

이 sources들을 target에 복사하고 그 복사한 target을 리턴해준다.

 

 

샘플코드

var returnedTarget = Object.assgin(target, source1, source2, source3 ...);
// 👉️ source1, source2, source3의 값을 target에 복사한뒤 return 해준다
// 👉️ returnedTarget === target

 

 

 

Object.assign 함수 사용 샘플코드

 

 

샘플코드

let myTarget = {sex : 'man'}

let myObj1 = {
	name : 'michelle',
};

let myObj2 = {
	age : 18,
};

let myObj3 = {
	height : 180
};

let myObj4 = {
	job : 'programmer'
};

let newObj = Object.assign(myTarget, myObj1, myObj2, myObj3, myObj4);

// 👉️ newObj {sex: 'man', name: 'michelle', age: 18, height: 180, job: 'programmer'}
// 👉️ target {sex: 'man', name: 'michelle', age: 18, height: 180, job: 'programmer'}
// 👉️ newObj === targer -> true

 

단 source 객체에 동일한 값이 있다면 덮어 씌워진다. 아래 코드를 보도록 하자.

 

 

샘플코드

let myTarget = {sex : 'man'}

let myObj1 = {
	name : 'michelle',
    sex : 'man'
};

let myObj2 = {
	name : 'newMichelle'
	age : 18,
};

Object.assign(myTarget, myObj1, myObj2);

// 👉️ {sex: 'man', name: 'newMichelle', age: 18}

 

위 코드를 보면

 

1) myTarget와 myObj1의 sex 속성이 중복되어 myObj1의 sex로 덮어 씌워짐 

2) myObj1과 myObj2의 name 속성이 중복되어 myObj2의 name으로 덮어 씌워짐

 

를 확인 할 수 있다.

 

자세한 내용은 아래 MDN 링크를 확인 하도록 하자

 

MDN Object.assign() 이동

 

 

728x90
반응형