[jQuery] jQuery.extend() 함수 사용법, 예제 (객체 합치기)

jQuery.extend() 함수는 객체를 확장하거나 병합하는 데 사용됩니다. 하나 이상의 객체를 결합하여 새로운 객체를 생성하거나 기존 객체를 수정할 수 있습니다. 주로 설정 옵션을 병합하거나 두 개의 객체를 합칠 때 유용합니다.

 

 

사용법

jQuery.extend(target, object1, object2, object3, ...);

 

target: 목표 객체로, 이 객체는 다른 객체의 속성을 포함하고 확장할 대상입니다.

object1, object2, object3, ...: 확장할 객체들을 지정합니다. 이러한 객체들의 속성은 목표 객체에 추가됩니다.

 

 

소스코드 및 설명

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
	//기본 객체 병합
	var obj1 = { name: "John" };
	var obj2 = { age: 30 };

	jQuery.extend(obj1, obj2);

	console.log(JSON.stringify(obj1, null, 2)); // { name: "John", age: 30 }
	
	//중첩 객체 병합
	var obj3 = { person: { name: "John" } };
	var obj4 = { person: { age: 30 } };

	jQuery.extend(true, obj3, obj4);

	console.log(JSON.stringify(obj3, null, 2)); // { person: { name: "John", age: 30 } }
	
	//여러 객체 병합
	var obj5 = { name: "John" };
	var obj6 = { age: 30 };
	var obj7 = { city: "New York" };

	jQuery.extend(obj5, obj6, obj7);

	console.log(JSON.stringify(obj5, null, 2)); // { name: "John", age: 30, city: "New York" }

	//새로운 객체에 병합
	var obj8 = { name: "John" };
	var obj9 = { age: 30 };

	var result = jQuery.extend({}, obj8, obj9);

	console.log(JSON.stringify(result, null, 2)); // { name: "John", age: 30 }
	
	//동일 이름의 속성 덮어쓰기
	var obj10 = { name: "John" };
	var obj11 = { name: "Doe" };

	jQuery.extend(obj10, obj11);

	console.log(JSON.stringify(obj10, null, 2)); // { name: "Doe" }
});
</script>

 

 

1. 기본 객체 병합 (첫번째 예제)

-jQuery.extend()를 사용하여 obj1에 obj2를 병합하고, 두 객체의 속성을 병합합니다.

2. 중첩 객체 병합(두 번째 예제)

-두 객체의 속성 중에 객체가 중첩됩니다. jQuery.extend(true, obj3, obj4)를 사용하여 깊은 병합을 수행하고, 중첩된 객체도 병합됩니다.

3. 여러 객체 병합(세 번째 예제)

-jQuery.extend(obj5, obj6, obj7)를 사용하여 세 객체를 병합하고, 모든 객체의 속성을 하나로 병합합니다.

4. 새로운 객체에 병합(네 번째 예제)

-jQuery.extend({}, obj8, obj9)를 사용하여 두 객체를 병합하고, 결과를 새로운 객체에 저장합니다. 결과 객체는 기존 객체를 변경하지 않습니다.

5.동일 이름의 속성 덮어쓰기(다섯 번째 예제)

-jQuery.extend(obj10, obj11)를 사용하여 두 객체를 병합하고, 같은 이름의 속성이 두 번째 객체의 값으로 덮어씌워집니다.

 

 

---

 

console.log 결과