$.extend() in jQuery

The $.extend() function in jQuery is a powerful utility for merging objects. It allows you to copy properties from one or more source objects to a target object. Here's a detailed breakdown of how it works:

Syntax of $.extend()

$.extend(target, object1, [objectN])

• target: The object that will receive the properties from the source objects.
• object1, objectN: One or more objects containing properties to be copied into the target object.

Key Points of $.extend()

1. Shallow Copy by Default

   By default, $.extend() performs a shallow copy. This means that if the source objects contain nested objects, only the references to those objects are copied, not the objects themselves.

2. Deep Copy Option

   You can perform a deep copy by setting the first argument to true. This will recursively copy all properties and sub-properties.

3. Order of Merging

   Properties from later objects will overwrite properties from earlier objects if they have the same name.

Examples

Shallow Copy

var target = { name: 'John', age: 25 };
var source = { age: 30, city: 'New York' };

$.extend(target, source);

console.log(target);
// Output: { name: 'John', age: 30, city: 'New York' }

In this example, target is updated with properties from source. The age property in target is overwritten by the age property from source.

Deep Copy

var target = { name: 'John', details: { age: 25 } };
var source = { details: { age: 30, city: 'New York' } };

$.extend(true, target, source);

console.log(target);
// Output: { name: 'John', details: { age: 30, city: 'New York' } }

Here, $.extend(true, target, source) performs a deep copy. The details object inside target is fully replaced with the details object from source.

Use Cases

• Merging Settings: Combine default settings with user-defined settings in a plugin or application.
• Object Augmentation: Add properties from multiple sources to a single object.
• Cloning Objects: Create a new object with properties copied from existing objects.

Important Considerations

• Overwriting Properties: Be aware that properties in later objects will overwrite those in earlier objects with the same name.
• Handling Nested Objects: For deep copying, ensure you use the true flag to avoid only copying references.

Conclusion

$.extend() is versatile and can be used in various scenarios where you need to combine or modify objects in JavaScript.