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

jQuery의 $.extend 메서드는 두 번째 매개변수에 지정된 객체의 속성을 첫 번째 매개변수에 지정한 객체와 합쳐주는 역할을 수행합니다.

 

아래 예제는 기존 javascript에서 객체를 생성 후 해당 객체에 원하는 속성을 추가하는 방법을 보여주고 있습니다.

$(function () {
	var obj = {};
	obj.name = '홍길동';

	alert(obj.name);
});

이것을 jQuery의 $.extend를 사용하면 다음과 같이 바꿀 수 있습니다.

$(function () {
	var obj = {};

	$.extend(obj, { name : '홍길동' });

	alert(obj.name);
});

물론 다수의 속성을 추가하는데도 사용할 수 있으며 속성이 많으면 많을수록 $.extend메서드를 사용하는 편이 좀 더 나을 수 있습니다.

$(function () {
	var obj = {};

	$.extend(obj, {
		name : '홍길동',
		addr : '서울시'
	});

	alert(obj.addr);
});

단 $.extend를 사용 시 주의해야 할 부분이 있습니다.

$(function () {
	var obj = { name : '홍길순' };

	$.extend(obj, {
		name : '홍길동',
		addr : '서울시'
	});

	alert(obj.name);
});

위 예제에서는 obj에 이미 name이 있으나 $.extend메서드로 인해 기존의 name값이 '홍길동'으로 덮어써지게 되는 것을 알 수 있습니다.

 

이러한 문제는 다음과 같은 방법으로 보완할 수 있습니다.

$(function () {
	objExtend({ name : '홍길순' });
});


var objExtend = function(obj) {
	obj = $.extend({
		name : '홍길동'
	}, obj);

	alert(obj.name);
};

예제에서는 고의적으로 name속성을 지정해 값을 할당하고 있습니다. 이렇게 하면 obj의 name은 '홍길순'이 됩니다. 그러나 만약 name을 지정하지 않으면 name의 값은 '홍길동'을 유지하게 됩니다.

$(function () {
	objExtend({ addr : '서울시' });
});


var objExtend = function(obj) {
	obj = $.extend({
		name : '홍길동'
	}, obj);

	alert(obj.name);
};