Merging Objects with extend()
In this page:
What is extend()?
$.extend() copies the properties of one or more source objects onto a target object, merging them together into a single combined object. It's jQuery's answer to the native Object.assign(), and it's especially common for combining a plugin's default settings with whatever options a caller actually provides.
Example: What is extend()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const merged = $.extend({a: 1}, {b: 2});
console.log(merged);
</script>
</body>
</html>Override Properties
When two source objects share the same property name, the object that comes later in the argument list wins and overwrites the earlier value. This ordering is what makes the common 'defaults, then user options' pattern work — the user's choices always take priority over the built-in defaults.
Example: Override Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const result = $.extend({color: "red"}, {color: "blue"});
console.log(result.color);
</script>
</body>
</html>Use Default Options
A very common pattern is to define a defaults object with sensible fallback values, then call $.extend({}, defaults, userOptions) to produce a final settings object. This way, users only need to specify the options they actually want to change, and everything else falls back to a safe default.
Example: Use Default Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const defaults = {speed: 300, color: "blue"};
const userOptions = {color: "red"};
const settings = $.extend({}, defaults, userOptions);
console.log(settings);
</script>
</body>
</html>Merge Multiple Objects
You can merge more than two objects in a single $.extend() call, and properties are copied from left to right across all of them. This is useful when combining several independent sources of configuration — say, library defaults, a theme's overrides, and the user's own settings — into one final object.
Example: Merge Multiple Objects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const merged = $.extend({}, {a: 1}, {b: 2}, {c: 3});
console.log(merged);
</script>
</body>
</html>Small extend() Project
extend() is especially valuable for building reusable, configurable functions, since it lets each caller override only the specific options they care about instead of having to specify a complete settings object every time.
Example: Small extend() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function createWidget(options) {
const settings = $.extend({speed: 300, color: "blue"}, options);
console.log(settings);
}
createWidget({color: "green"});
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: