즐거운인생

이 포스트는 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/

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

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