본문 바로가기

프론트엔드 공부/javscript

정적메서드 Object.assign(); 복사와 참조의 차이

//Object : 전체 영역에서 사용 가능한 전역객체(asign은 prototype메서드x)

//정적메소드는 일반 객체 데이터에는 직접사용할수 x, 전역객체에 직접적으로 사용하는 메서드

 

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

console.log(result === target) //true

//assgin 정적메서드의 타겟과 출처가 복사된 결과값은 일치한다.

//정적메서드 assign 사용하기
//assign()은 prototype안에 내장되어있는 함수가x 객체에 직접 부여

//Object.assgin()
//열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성응ㄹ 복사하여 대상 객체를 반환
const target = {a:1, b:2};
const source = {b:4 , c:5};

const returndTarget = Object.assign(target,source);
console.log(target);
//Object { a:1, b:4, c:5}
console.log(returndTarget);
//Object { a:1, b:4, c:5}

 

//응용예시

const userAge = {
  name:'minji',
  age:85
}
const userEmail = {
  name:'minji',
  email: 'minji@gmail.com'
}

const target = Object.assgin(userAge, userEmail)
console.log(target); 
console.log(userAge); 
console.log(target === userAge); //true
//target과 userAge가 같은이유는 같은 메모리 공간을 바라보기때문

//반대예시로 배열,객체, boolean 등은 참조형 데이터(다른 메모리공간을 바라봄)
const a = {k:123}
const b = {k:123}
console.log(a === b) ; //false

//****객체 데이터 원본을 손상하지 않고 assign 활용하기
//빈객체 추가하여 해결
const userAge2 = {
  name:'minji',
  age:85
}
const userEmail2 = {
  name:'minji',
  email: 'minji@gmail.com'
}
const target2 = Object.assign({},userAge2,userEmail2);
console.log(target2) //원본유지
console.log(target2 === userAge2); //false

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign