Using .extend() to Merge Objects in jQuery: A Comprehensive Guide

Merging objects in JavaScript is a common task, especially when dealing with configurations, settings, or combining data from different sources. In jQuery, the .extend() method provides a powerful way to merge objects efficiently.

This guide will take you through every aspect of .extend(), from basic usage to advanced scenarios. We’ll cover the following:

1. Understanding .extend() in jQuery
2. Basic Usage
3. Merging Multiple Objects
4. Deep Copy vs. Shallow Copy
5. Handling Nested Objects
6. Practical Examples
7. Common Use Cases
8. Performance Considerations
9. Alternatives to .extend()
10. Best Practices

Let’s get started!

---

1. Understanding .extend() in jQuery

The .extend() method in jQuery allows you to merge the properties of one or more objects into a target object. It’s useful for:

• Combining multiple objects into one.
• Creating default settings that can be overridden by user-defined options.
• Copying data without modifying the original objects.

Syntax:

$.extend(target, object1, object2, ..., objectN);

• target → The object that will receive properties.
• object1, object2, ..., objectN → The objects whose properties will be copied.

If target is an empty object {}, a new object is created without modifying the originals.

---

2. Basic Usage

Here’s a simple example of merging two objects using .extend():

var obj1 = { name: "John", age: 30 };
var obj2 = { age: 35, city: "New York" };

var result = $.extend({}, obj1, obj2);
console.log(result);

Output:

{ name: "John", age: 35, city: "New York" }

Explanation:

• obj1 and obj2 are merged.
• The age property in obj2 overwrites the age in obj1.

---

3. Merging Multiple Objects

You can merge multiple objects into one:

var obj1 = { name: "Alice", age: 25 };
var obj2 = { city: "London" };
var obj3 = { country: "UK", profession: "Engineer" };

var merged = $.extend({}, obj1, obj2, obj3);
console.log(merged);

Output:

{ name: "Alice", age: 25, city: "London", country: "UK", profession: "Engineer" }

---

4. Deep Copy vs. Shallow Copy

By default, .extend() performs a shallow copy. This means that if an object contains another object inside it, only the reference is copied.

Shallow Copy Example:

var obj1 = { person: { name: "Tom", age: 40 } };
var obj2 = $.extend({}, obj1);

obj2.person.age = 50;
console.log(obj1.person.age); // 50 (original object is affected)

Solution: Use deep copy by passing true as the first argument.

Deep Copy Example:

var obj1 = { person: { name: "Tom", age: 40 } };
var obj2 = $.extend(true, {}, obj1);

obj2.person.age = 50;
console.log(obj1.person.age); // 40 (original object remains unchanged)

---

5. Handling Nested Objects

When merging objects that contain nested structures, a deep copy is recommended.

var obj1 = { config: { theme: "light", fontSize: 14 } };
var obj2 = { config: { fontSize: 16, layout: "grid" } };

var result = $.extend(true, {}, obj1, obj2);
console.log(result);

Output:

{ config: { theme: "light", fontSize: 16, layout: "grid" } }

Explanation:

• fontSize is updated from 14 to 16.
• layout: "grid" is added.

---

6. Practical Examples

6.1 Merging Default and User Settings

var defaultSettings = { theme: "light", fontSize: 14, language: "en" };
var userSettings = { fontSize: 16, language: "fr" };

var finalSettings = $.extend({}, defaultSettings, userSettings);
console.log(finalSettings);

Output:

{ theme: "light", fontSize: 16, language: "fr" }

6.2 Merging Arrays (Not Recommended)

var obj1 = { items: [1, 2, 3] };
var obj2 = { items: [4, 5] };

var merged = $.extend(true, {}, obj1, obj2);
console.log(merged);

Output:

{ items: [4, 5] }

💡 Note: Arrays are overwritten, not merged.

---

7. Common Use Cases

• Configurable Plugins: Setting default options that can be overridden by user settings.
• Data Processing: Merging API responses.
• UI Customization: Merging CSS styles dynamically.

---

8. Performance Considerations

Using .extend(true, ...) (deep copy) on large objects can be slow. For better performance:

• Use a shallow copy ($.extend({}, obj1, obj2)) when deep copying is unnecessary.
• Avoid merging very large nested structures.

---

9. Alternatives to .extend()

Using the Spread Operator (...)

In modern JavaScript (ES6+), you can use the spread operator:

var obj1 = { name: "Anna", age: 28 };
var obj2 = { age: 30, city: "Paris" };

var merged = { ...obj1, ...obj2 };
console.log(merged);

Using Object.assign()

var merged = Object.assign({}, obj1, obj2);

🚀 Both methods are faster than jQuery’s .extend(), but don’t support deep copying.

---

10. Best Practices

✅ Use $.extend({}, obj1, obj2) for shallow copies.
✅ Use $.extend(true, {}, obj1, obj2) for deep copies.
✅ Avoid merging large nested objects unnecessarily.
✅ Prefer modern ES6+ alternatives (spread operator, Object.assign()) for better performance.

---

Final Thoughts

The .extend() method is a powerful way to merge objects in jQuery. Whether you’re working with simple configurations or deep cloning nested structures, understanding how .extend() works can help you write cleaner, more efficient code.

By mastering .extend(), you can handle object merging effectively, ensuring smooth application functionality while maintaining performance.

Happy Coding!