jQuery.map()?jQuery.map(arrayOrObject, callback) (alias $.map) translates every item in an array, array-like object, or plain object into a new array of results (arrays since 1.0; plain objects since 1.6).
$.map(array, function (value, index) { … }) → Array
$.map(object, function (value, key) { … }) → Array
$.map([0, 1, 2], function (n) { return n + 4; })
→ [4, 5, 6]
// return null / undefined → skip item
// return [a, b] → flatten one level| Need | Use |
|---|---|
| Transform data → new array | $.map(data, fn) |
| Side effects only | $.each(data, fn) |
| Map DOM elements | $(sel).map(fn) |
jQuery.map()Pass a collection and a callback that returns the mapped value.
(value, index); objects get (value, key).null/undefined to skip, or an array to flatten one level.| Piece | Required? | Role |
|---|---|---|
array / object | Yes | Source to translate |
callback | Yes | Maps each item → result value(s) |
| Return | — | New Array |
function map(collection, callback):
result = []
for each (value, indexOrKey) in collection:
mapped = callback(value, indexOrKey)
if mapped is null or undefined:
continue // skip
if mapped is an array:
append each item to result // flatten 1 level
else:
append mapped to result
return result
// Callback this → window (global), not the itemKeep these facts handy while transforming collections.
| Topic | Detail |
|---|---|
| Syntax | jQuery.map(collection, callback) |
| Arrays | Since jQuery 1.0 |
| Objects | Since jQuery 1.6 |
| Callback (array) | (value, index) |
| Callback (object) | (value, key) |
| Skip item | Return null / undefined |
| Flatten | Return an array → one level |
Run official-style $.map transforms on small sample data.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Add 4 to every number in an array.
var result = $.map([0, 1, 2], function (n) {
return n + 4;
});
console.log(result); // [4, 5, 6][0, 1, 2].n, return n + 4.[4, 5, 6] — original array unchanged.Official demo idea: uppercase each letter and append its index.
var formatted = $.map(["a", "b", "c", "d", "e"], function (n, i) {
return n.toUpperCase() + i;
});
console.log(formatted.join(", ")); // "A0, B1, C2, D3, E4"(value, index) — value first.toUpperCase() plus index builds "A0", "B1", …$.each, which uses (index, value).nullDrop zeros; keep and increment positive numbers.
var filtered = $.map([0, 1, 2], function (n) {
return n > 0 ? n + 1 : null;
});
console.log(filtered); // [2, 3]n + 1; zero returns null.null / undefined are omitted from the result.1 → 2 and 2 → 3 remain.$.grep().Return an array from the callback; jQuery concatenates it into the result.
var flat = $.map([0, 1, 2], function (n) {
return [n, n + 1];
});
console.log(flat); // [0, 1, 1, 2, 2, 3][n, n + 1].Array.map would keep nested arrays instead.Double every numeric property (object support since jQuery 1.6).
var dimensions = { width: 10, height: 15, length: 20 };
var doubled = $.map(dimensions, function (value) {
return value * 2;
});
console.log(doubled); // [20, 30, 40](value, key).key instead of value if you need property names.Check these before mixing $.map with $.each or DOM mapping.
$.map uses (value, index). $.each uses (index, value). Swapping them is a common bug.
.map()Official guidance: map DOM selections with $(sel).map(), not the static utility.
this is the global objectInside the callback, this is window, not the current item. Use the value argument instead.
Deeper nesting stays nested. Plan for a single flatten level when returning arrays from the callback.
jQuery.map() needs jQuery in the browser. Arrays/array-likes since jQuery 1.0+; plain objects since jQuery 1.6+. Works in all browsers supported by your jQuery build.
Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded. Transform arrays, array-likes, and (since 1.6) plain objects.
Bottom line: Use $.map(collection, callback) to build a new array from data — use .map() for DOM collections.
| Approach | Cost | Best for |
|---|---|---|
$.map(arr, fn) | O(n) | Transform + optional skip/flatten |
$.each(arr, fn) | O(n) | Side effects, no new array |
arr.map(fn) | O(n) | Native arrays only |
Prefer $.map when you need the new array (and null-skip / flatten). Prefer $.each when you only need to loop.
$.map builds a new array from callback returns.(value, index|key) — value first.null skips; arrays flatten one level.$(sel).map() for element collections.One line: $.map(collection, fn) translates data into a new array — skip with null, flatten returned arrays, and remember value comes first.
Filter array items that pass a test function with jQuery.grep().
10 people found this page helpful