[JavaScript] 객체 병합 방법(Objet.assign 함수, 전개연산자)

💡 목표

JavaScript에서 객체 병합 방법에 대해 학습한다.

목차

1.  Object.assign() 함수
2.  전개연산자
3.  일반 함수 정의

들어가며

객체를 병합하는 방법은 크게 3가지가 있으며 각각 알아보겠습니다.

먼저, 3개 객체를 예시로 정의하겠습니다.

let obj1 = {
    a: 10,
    b: 20,
    c: 30
}

let obj2 = {
    c: 30,
    d: 40,
}

let obj3 = {
    c: 770,
    d: 477,
}

1.  Objet.assign() 함수

함수 원형

Object.assign(객체1, 객체2, 객체3, ... , 객체 N);

 

Object 객체 내 assign 함수는 객체의 원소를 중복을 허용하지 않고 병합합니다.

단, 중복되는 원소는 나중에 병합하는 객체의 원소로 최종 병합합니다.

예시

let objEx01 = Object.assign(obj1, obj2, obj3);
console.log(objEx01);

 

3개의 객체를 Objet 객체 내 assign 함수를 활용하여 병합합니다.

실행결과

{ a: 10, b: 20, c: 770, d: 477 }

2.  전개연사자 사용

함수 원형

객체 = {...객체1, ... 객체2, ...객체3, ... , 객체 N};

 

Object 객체 내 assign 함수는 assign 함수와 마찬가지로

객체의 원소를 중복을 허용하지 않고 병합합니다.

단, 중복되는 원소는 나중에 병합하는 객체의 원소로 최종 병합합니다.

예시

let objEx02 = { ...obj1, ... obj2 };
console.log(objEx02);

실행결과

{ a: 10, b: 20, c: 30, d: 40 }

3.  일반 함수 정의

function f1(obj){
    console.log(obj);
    console.log(obj.a, obj.b, obj.c, obj.d);
}
f1({ ...obj1, ... obj2});

 

위 코드는 실무에서 객체 병합 시 자주 사용되는 구조입니다.

두 객체를 전개연산자를 활용하여 모두 병합하고,

병합한 객체를 함수에 전달하여 프로그램 목적에 맞게 활용할 수 있도록 편리하게 설계가 가능하기 때문이죠.

실행결과

{ a: 10, b: 20, c: 30, d: 40 }
10 20 30 40

---

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요!

그럼 오늘도 즐겁고 행복한 하루 보내시길 바랍니다.

고맙습니다 :)