[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의 프로퍼티들도 합칠 수 있습니다.