$.each, $.map & $.extend
Master jQuery's utility functions for looping, transforming, and merging data.
These three live directly on $ (not on a jQuery set) and work on plain arrays and objects — they are jQuery's data toolkit, useful even when no DOM is involved.
$.each — loop anything
$.each(["a", "b", "c"], function (index, value) {
console.log(index, value);
});
$.each({ name: "Ada", role: "pioneer" }, function (key, val) {
console.log(key + " = " + val);
});Note the argument order: index first, value second — the opposite of native Array.forEach. This trips up everyone once. Return false from the callback to break out early.
$.map — transform into a new array
Unlike the instance method, $.map flattens null/undefined results out, making it a filter-and-map in one:
var doubled = $.map([1, 2, 3, 4], function (n) {
return n % 2 ? n * 2 : null; // nulls are dropped
});
// doubled === [2, 6]$.extend — merge objects
var defaults = { color: "blue", size: "m" };
var result = $.extend({}, defaults, { size: "l" });
// { color: "blue", size: "l" } — defaults untouched
// Deep merge nested objects with true as the first arg:
$.extend(true, target, source);Passing {} as the first argument is the safe idiom: it builds a fresh object instead of mutating your defaults.
Example
When to use it
- A data transform pipeline uses $.map() to convert an array of API objects into a simpler array of display strings.
- A deep configuration merge uses $.extend(true, {}, defaults, userConfig) to recursively blend nested option objects.
- A currency table uses $.each() over a rates object to create a <tr> for each currency code and its conversion value.
More examples
Transform an array with $.map()
$.map() returns a new array built from the return value of the callback, here extracting and uppercasing each name.
<ul id="names"></ul>
<script>
$(function () {
var users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" }
];
var names = $.map(users, function (u) { return u.name.toUpperCase(); });
$.each(names, function (i, n) {
$("#names").append("<li>" + n + "</li>");
});
});
</script>Merge options with $.extend()
$.extend({}, defaults, userOpts) creates a new object with defaults overridden by whatever the user supplied.
<p id="out"></p>
<script>
$(function () {
var defaults = { color: "blue", size: 14, bold: false };
var userOpts = { color: "red", bold: true };
var merged = $.extend({}, defaults, userOpts);
$("#out").text(JSON.stringify(merged));
});
</script>Deep merge nested objects
Passing true as the first argument makes $.extend() recurse into nested objects rather than overwriting the whole sub-object.
<pre id="result"></pre>
<script>
$(function () {
var base = { theme: { primary: "blue", font: { size: 14 } } };
var override = { theme: { primary: "green" } };
var merged = $.extend(true, {}, base, override);
// merged.theme.font.size still equals 14
$("#result").text(JSON.stringify(merged, null, 2));
});
</script>
Discussion