[jQuery] 객체합치기 .extend()

.extend() 함수

 

제이쿼리의 extend()는 다수의 객체를 하나의 객체로 합치는 merge기능을 수행할 수 있습니다.

만약 두 개 이상의 객체를 하나로 합치려는 경우 extend()를 사용하여 새로운 객체로 만들 수 있죠.

아래는 extend()를 사용하는 간단한 방법 및 문법은 아래와 같습니다.

$.extend(대상, 객체1, 객체2, ... , 객체n)

 

 

오브젝트 a와 b를 합치고 싶은 경우

var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
$.extend(a, b);
 
console.log(a);
// 결과:
//  {
//      id: 1,
//      name: "TAM-new",
//      hobby: "football"
//  }

$.extend(a, b) 를 실행하면 a에 b를 합쳐 줍니다.

같은 프로퍼티가 존재 한다면 b의 값으로 덮어쓰기를 하며 b에 있는 프로퍼티가 새로운 값이라면 추가를 합니다.

 

 

그리고 extend() 함수는 파라메타로 넣을 오브젝트의 갯수 제한이 없습니다.

var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
var c = {
    name: 'TAM-new-new',
    job: 'designer'
};
 
$.extend(a, b, c);
 
console.log(a);
// 결과:
//  {
//      id: 1,
//      name: "TAM-new-new",
//      hobby: "football",
//      job: "designer"
//  }

이런식으로 무제한으로 파라메터를 설정 할 수 있으며

$.extend(a, b, c)를 실행할 경우 a의 값에 b를 합치며 그 값에 c를 합칩니다.

 

 

합쳐진 결과 값이 직접적으로 a 오브젝트(첫번째 파라메터)에 반영이 되므로

첫번째 파라메터가 변하는걸 원치 않는 경우에는

var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
var newobject = $.extend({}, a, b);

이런식으로 첫번째 파라메터를 {}으로 지정 한 뒤 리턴값을 새로운 오브젝트에 넣어주면 됩니다.

 

마지막으로 프로퍼티가 오브젝트일 경우를 알아보겠습니다.

 

var a = {
    style: {
        top: 100,
        left: 200,
        width: 300
    },
    duration: 1000
};
 
var b = {
    style: {
        height: 400
    }
};
 
$.extend(a, b);
 
console.log(a);
// 결과:
//  {
//      style: {
//          height: 400
//      },
//      duration: 1000
//  }

 

프로퍼티가 오브젝트일 경우 a.style.top, a.style.left, a.style.width는 모두 지워 지고 b.style.height만 덮어 씌워지게 됩니다.

밑의 계층까지 합치고 싶은 경우에는 extend()의 첫번째 파라메터에 true를 넣으면 됩니다.

var a = {
    style: {
        top: 100,
        left: 200,
        width: 300
    },
    duration: 1000
};
 
var b = {
    style: {
        height: 400
    }
};
 
$.extend(true, a, b);
 
console.log(a);
// 결과:
//  {
//      style: {
//          top: 100,
//          left: 200,
//          width: 300
//          height: 400
//      },
//      duration: 1000
//  }

이걸로 style의 프로퍼티들도 합칠 수 있습니다.

 

정리 출처 : https://damedame.tistory.com/entry/jQueryextend-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95