[자바스크립트] Object /assign()/오브젝트 사용하기 /중복제거

---

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

Object.assign() - JavaScript | MDN

Object 

Object 생성자는 주어진 값의 객체 래퍼를 생성합니다. 주어진 값이 null이거나 undefined면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환합니다. 만약 값이 이미 객체이면 그 값을 그대로 반환합니다.

생성자가 아닌 맥락에서 호출하면 Object는 new Object()와 동일하게 동작합니다.

 

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

Object.assign() - JavaScript | MDN

Object.assign()

동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.

 

assing 예제

const userAge={
		//key : value
		name:' Yuna',
		age: 26
}
const userEmail = {
		name: 'Yuna',
		email: 'marine@gmail.com'
}

// 두개를 합치고 싶다 

const target = Object.assign(userAge,userEmail)
console.log(target)
console.log(userAge)
console.log(userEmail)

 출력 값 

objectJS.js:18 
{name: "Yuna", age: 26, email: "marine@gmail.com"}
objectJS.js:19 
{name: "Yuna", age: 26, email: "marine@gmail.com"}
objectJS.js:20 
{name: "Yuna", email: "marine@gmail.com"}

​

 

assing을 사용하면 중복된 name 합쳐주는걸 확인 할 수있다 

여기서 

다시 userAge를 출력하면 이메일도 같이 출력 된다 

왜 그럴까 ?

같은 메모리 구조를 참조 하는 상항 이기 때문에 이러한 결과가 된다 

즉, target 자체를 assing에 덮어 져서 이다

 

위 코드는 그럼 내가 원치 않게 변경되는 경우가 생긴다 

// objectJS.js

// 데이터 - Object

const userAge={
		//key : value
		name:' Yuna',
		age: 26
}
const userEmail = {
		name: 'Yuna',
		email: 'marine@gmail.com'
}

// 두개를 합치고 싶다 

//const target = Object.assign(userAge,userEmail)
const target = Object.assign({},userAge,userEmail)
console.log(target)
console.log(userAge)
console.log(userAge === target)
console.log(userEmail)

 

{name: "Yuna", age: 26, email: "marine@gmail.com"}
objectJS.js:20 {name: " Yuna", age: 26}
objectJS.js:21 false
objectJS.js:22 {name: "Yuna", email: "marine@gmail.com"}

 

깊은 복사하면 된다 // 그릇을 비워둔다 

메모리가 선언되면서 그 자리에 새롭게 생기게 된다

 

---