jQuery.extend($.extend), Object.assign, Spread expression

이 포스트는 JavaScript에서 객체나 배열 요소를 연결하기 위해 사용하는 방법에 대해 알아보겠습니다. jQuery에서 사용하는 extend 함수, ES6+ 에서 제공하는 Object.assign 및 Spread expression(전개 구문)을 확인해 보겠습니다.

 

jQuery.extend

Internet Explorer를 지원해야 하는 애플리케이션을 개발할 때는 Object를 결합해야 할 요건이 있을 경우 대부분 jQuery.extend 함수를 사용했습니다. 가장 기본적인 사용법은 아래와 같습니다.

const obj1 = {
    korean: 97,
    english: 100
};

const obj2 = {
    math: 67
}

$.extend(obj1, obj2);
console.log(obj1);

 

위와 같이 작성하면 obj1 Object에 obj2 Object를 병합하여 아래와 같은 결과가 표시됩니다.

{korean: 97, english: 100, math: 67}

 

아래와 같이 Object 아래 Object가 있을 경우에는 결과가 좀 다릅니다.

const obj1 = {
    korean: {
        step1: 97,
        step2: 100,
    },
    english: 100
};

const obj2 = {
    korean: {
        step1: 60
    },
    math: 67
};

$.extend(obj1, obj2);
console.log(obj1);

 

위 소스코드의 실행결과는 아래와 같습니다.

{korean: {step1: 60}, english: 100, math: 67}

 

Object 내에 Object의 경우에는 병합되지 않고, 나중 Object 기준으로 overwrite 됩니다. 하여 Object 내의 Object까지 병합을 하기 위해서는 아래와 같이 작성합니다.

$.extend(true, obj1, obj2);
console.log(obj1);

 

그러면 결과는 아래와 같이 step1은 overwrite 되지만 step2는 obj1 기준으로 병합되어 있습니다.

{korean: {step1: 60, step2: 100}, english: 100, math: 67}

 

보통 jQuery로 extend 함수는 기존 Object로부터 Object를 하나 복사하여 사용할 때 많이 사용합니다. Object 아래 자기 자신을 복제하는 함수를 하나 생성할 때 아래와 같이 작성합니다.

clone: function() {
    const me = this;
    return $.extend(true, {}, me);
}

 

jQuery.extend 함수에 대한 상세 설명은 아래 링크를 참조하시면 됩니다.

https://api.jquery.com/jquery.extend/

jQuery.extend() | jQuery API Documentation

 

 

Object.assign

ES6부터는 Object.assign 이라는 함수를 제공합니다. Internet Explorer에서는 지원하지 않습니다. Object.assign 함수의 사용 형식은 아래와 같습니다.

Object.assign(target, ...source)

 

target Object에 source Object들의 전개 가능한 모든 속성들을 복사해서 붙여 넣습니다. $.extend에서 사용했던 두 번째 예제로 확인해 보겠습니다.

const obj1 = {
    korean: {
        step1: 97,
        step2: 100,
    },
    english: 100
};

const obj2 = {
    korean: {
        step1: 60
    },
    math: 67
};

const merged = Object.assign(obj1, obj2);
console.log(obj1);
console.log(merged);

 

속성에 대한 복사이므로 결과는 아래와 같습니다. 내부 Object 까지는 복사하지 않으므로 이를 "얕은 복사"라고 합니다.

//obj1
{korean: {step1: 60}, english: 100, math: 67}

//merged
{korean: {step1: 60}, english: 100, math: 67}

 

$.extend에 recursive 옵션을 true로 준 것처럼 간단하게 "깊은 복사"를 수행하는 방법은 자체적으로는 없습니다. 일반적으로 for ~ in Loop을 사용하여 recursive 하게 프로그램을 짜서 복사하거나 lodash 라이브러리를 사용합니다.

 

Object.assign에 대한 상세 설명은 아래 MDN 링크를 참고할 수 있습니다.

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

Object.assign() - JavaScript | MDN

 

Spread Expression (전개 구문)

전개 구문 역시 ES6부터 제공하며 Internet Explorer에서는 지원하지 않습니다. Spread 구문은 사용이 편리하여 제법 유용하게 사용할 수 있습니다. 다시 jQuery 두 번째 예제로 확인해 보겠습니다.

const obj1 = {
    korean: {
        step1: 97,
        step2: 100,
    },
    english: 100
};

const obj2 = {
    korean: {
        step1: 60
    },
    math: 67
};

const merged = {...obj1, ...obj2};
console.log(obj1);
console.log(merged);

 

Spread 구문은 Object.assign 과는 달리 obj1으로는 데이터를 병합하지 않습니다. obj1과 obj2는 원래 데이터대로 두고 병합한 데이터를 return 합니다. 결과는 아래와 같습니다.

//obj1
{korean: {step1: 97, step2: 100}, english: 100, math: 67}

//merged
{korean: {step1: 60}, english: 100, math: 67}

 

Object.assign과 마찬가지로 "깊은 복사"는 별도의 라이브러리 사용하거나 프로그램을 작성하여 해결해야 합니다. Spread 구문은 배열을 결합하는 경우에 손쉽게 사용할 수 있습니다.

const a = [1, 3, 4];
const b = [1, 3, 6];

const c = [...a, ...b];
console.log(c);

 

실행 결과는 아래와 같습니다.

[1, 3, 4, 1, 3, 6]

 

Spread Expression은 React나 Vue 등에서 상태를 관리할 때 간편한 구문을 제공합니다. Redux나 Context API 등을 사용하여 전역 상태를 관리할 경우 기존 상태에 변경된 상태 값만 갱신하기 위해서 아래와 같이 작성할 수 있습니다.

switch (action.type) {
    case 'SET_IS_VISIBLE':
        return {
            ...state,
            isVisible: action.isVisible
        }
    default:
        //Do something
}

 

위의 소스코드에서 action에 isVisible을 true로 세팅을 수행하게 되면 변경 전과 변경 후의 state 변화는 아래와 같습니다.

//변경 전
state = {
    isVisible: false,
    showPopup: false,
    showMenu: false
}

//변경 후
state = {
    isVisible: true,
    showPopup: false,
    showMenu: false
}

 

Spread Expression에 대한 상세한 설명은 아래 MDN 링크에서 확인할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN