"객체.지정". 생각보다 쉽습니다

💎 Object.assign이란 무엇입니까?

일반적으로 여러 개체를 병합할 때 사용됩니다.

const target = {city: 'japan', capital: 'tokyo'}
const source = {food: 'sushi', history: 'samurai'}

const result = Object.assign(target, source)

console.log(target)
/**
{
 city: 'japan', 
 capital: 'tokyo',
 food: 'sushi',
 history: 'samurai'
}
**/

console.log(source)
// {food: 'sushi', history: 'samurai'}

console.log(result)
/**
{
 city: 'japan', 
 capital: 'tokyo',
 food: 'sushi',
 history: 'samurai'
}
**/

💎 실생활에서 Object.assign

이러한 병합 방식과는 달리 내 경험에 따르면 개체를 복사하고 싶을 때 자주 사용됩니다.

let animal = {name: 'pikachu', type: 'kawaii'}
let copy_animal = Object.assign({}, animal)

console.log(copy_animal)
// {name: 'pikachu', type: 'kawaii'}

🔥 경고(참고)

이제 퀴즈를 내십시오. 이것이 사실입니까 거짓입니까 ??

animal === copy_animal

・
・
・
답은 거짓이다
▼ 증명


▼ 이에 대해 설명하는 제 다른 글이 있습니다.

{} === {}는 거짓입니다... 😳무엇?? 이미지로 설명드릴게요 🖼

Kaziu ・ 9월 22일 ・ 1분 읽기

#javascript #beginners

🔥 경고2(얕은 카피)

let animal = {name: {first: 'pikachu', last: 'honda'}, type: 'kawaii'}
copy_animal = Object.assign({}, animal)

// change value
copy_animal.type = 'dirty'

console.log(animal)
// {name: {first: 'pikachu', last: 'honda'}, type: 'kawaii'}
// ⭐ still pikachu is kawaii !!

이러한 개체는 서로 다른 참조에 있기 때문에

하지만

// change value of second hierarchy 
copy_animal.name.last = 'suzuki'

console.log(animal)
// {name: {first: 'pikachu', last: 'suzuki'}, type: 'kawaii'}
// ⭐ changed 'honda' => 'suzuki' !!!!!!!!!!!

😠 How this result come ?? You said these objects are on different references !!

예, 하지만 실제로 이것은 객체의 1개 계층일 뿐이며 2개 이상의 계층 객체가 동일한 참조에 있으며 이를 Shallow copy라고 합니다.

예 Object.assign은 얕은 복사입니다.

▼ 그냥 로그인

💎 확산 연산자

그런데 스프레드 연산자는 Object.assign과 동일합니다.

let animal = {name: 'pikachu', type: 'kawaii'}
let copy_animal = {...animal}

console.log(copy_animal)
// {name: 'pikachu', type: 'kawaii'}

그러나 얕은 복사도 !!!!!