[자바스크립트] 가장 중요한 객체 병합 다루기 Object.assign() 메소드 개념과 사용법

 

 

 

 

 

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기

---

 

 

 

가장 중요한 객체의 개념과 다루는 방법

https://cometruedream.tistory.com/261

[자바스크립트] 가장 중요한 자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

 

 

가장 중요한 객체 Object.values(), Object.keys() 메소드 개념

https://cometruedream.tistory.com/264

[자바스크립트] 가장 중요한 객체 다루기 Object.values() 함수 개념과 사용법

 

🤷‍♂️ Object.assign()란?

---

자바스크립트에서 객체는 중요한 데이터 자료구조입니다.

객체를 유용하게 다룰수 있도록 돕는 다양한 메소드들이 존재하지만 그중에서 객체를 병합하고 객체를 업데이트하고 새로운 객체를 생성할때 유용한 객체 메소드로 Object.assign() 메소드가 있습니다.

 

자바스크립트 객체란?

해당 글에서 자바스크립트 객체에 개념을 보시는것을 추천드립니다.

https://cometruedream.tistory.com/261

[자바스크립트] 가장 중요한 자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

 

 

 

🤷‍♂️ Object.assign() 사용법?

---

Object.assign() 메소드는 자바스크립트에서 객체를 복사, 병합, 업데이트에 사용되는 객체 메소드 입니다. 

 

쉽게 이해할수 있는 개념 2가지

• 객체복사: 하나의 객체를 다른 객체에 그대로 복사
• 객체병합: 여러 개의 객체를 하나의 객체로 병합

 

1. 객체 복사

예제

let originalPhoneBook = { 
    "Alice": "123-456-7890" 
};

let copiedPhoneBook = Object.assign({}, originalPhoneBook);

console.log(copiedPhoneBook);
// 출력: { "Alice": "123-456-7890" }

 

위에 예제에서 originalPhoneBook 기존에 객체 값을 가지고있습니다.

copiedPhoneBook 변수는 Object.assign() 메소드를 활용해서 originalPhoneBook 새로운 객체의 값을 복사합니다.

그래서 originalPhoneBook과 copiedPhoneBook 같은 값의 객체를 담고 있습니다.

 

 

 

2. 객체 병합

 

예제

let phoneBook1 = { 
    "Alice": "123-456-7890" 
};

let phoneBook2 = { 
    "Bob": "987-654-3210" 
};

let mergedPhoneBook = Object.assign({}, phoneBook1, phoneBook2);

console.log(mergedPhoneBook);
// 출력: { "Alice": "123-456-7890", "Bob": "987-654-3210" }

 

위에 예제에서 phoneBook1와 phoneBook2 두개에 객체를 Object.assign() 메소드를 활용해서 병합합니다. 

 

알아두면 좋은 꿀팁

자바스크립트에서 변수와 상수에 저장 값과 다르게 객체는 다른 메모리 주소에 객체 값을 담고있습니다.

 

3. Object.assign({}, originalObject)와 Object.assign(originalObject) 차이점

Object.assign() 메소드를 사용하시면서 눈썰미가 좋으신분은 2개의 방식을 보실수 있습니다.

두개의 방식의 차이점에 대해서 개념을 알아보겠습니다.

 

object.assign({}, originalObject) 예제

let originalPhoneBook = { 
    "Alice": "123-456-7890" 
};

let copiedPhoneBook = Object.assign({}, originalPhoneBook);

console.log(copiedPhoneBook);

 

이 방식은 새로운 객체 {}를 만들어서 새로운 객체안에 originalPhoneBook 복사하는 방식입니다.

중요한 점은 copiedPhoneBook 새로운 객체 값을 담고있으며 originalPhoneBook 변수는 변하지 않습니다.

 

object.assign(originalObject)

let originalPhoneBook = { 
    "Alice": "123-456-7890" 
};

let phoneBook2 = { 
    "Bob": "987-654-3210" 
};

let copiedPhoneBook = Object.assign(originalPhoneBook, phoneBook2);

console.log(copiedPhoneBook);

console.log(originalPhoneBook);
//{Alice: '123-456-7890', Bob: '987-654-3210'}

 

이방식은 originalPhoneBook 객체에 phoneBook2 병합하는 방식입니다.

그래서 originalPhoneBook 변수는 phoneBook2 값을 병합한 객체의 값을 가지고 있습니다.

중요한점은 originalPhoneBook객체의 값이 바뀐것입니다.

 

위에 2개의 예제의 차이점

위에 두개의 예제로 Object.assign({}, 객체), Object.assign(객체1, 객체2) 메소드가 어떻게 동작하는지 알아보았고 두개의 방식에 차이점에 대해서 알아보았습니다.

 

🤷‍♂️ 마지막으로

---

자바스크립트 다양한 객체 메소드가 존재하며 Object.assign() 메소드는 객체를 복사하고 병합하고 업데이트하는데 유용한 객체 메소드입니다.

Object.assign() 예제들을 보면서 객체가 저장되는 메모리 주소 개념도 이해하는것이 중요하며 원본에 객체를 수정하는지 새로운 객체를 만드는지 객체의 매커니즘을 이해하고 사용하는것이 중요하다고 생각합니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리