The each method is meant to be an immutable iterator, where as the map method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array. Another important thing to note is that the each function returns the original array while the map function returns a new array.
The jQuery map() function translates all items in an object or in array to a new array of items. It applies a function to each item of the object or array and maps the results into a new array.
The map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally map() method is used to iterate over an array and calling function on every element of array.
Definition and Usage. map() creates a new array from calling a function for every array element. map() calls a function once for each element in an array. map() does not execute the function for empty elements. map() does not change the original array.
The each
method is meant to be an immutable iterator, where as the map
method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array.
Another important thing to note is that the each
function returns the original array while the map
function returns a new array. If you overuse the return value of the map function you can potentially waste a lot of memory.
For example:
var items = [1,2,3,4];
$.each(items, function() {
alert('this is ' + this);
});
var newItems = $.map(items, function(i) {
return i + 1;
});
// newItems is [2,3,4,5]
You can also use the map function to remove an item from an array. For example:
var items = [0,1,2,3,4,5,6,7,8,9];
var itemsLessThanEqualFive = $.map(items, function(i) {
// removes all items > 5
if (i > 5)
return null;
return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]
You'll also note that the this
is not mapped in the map
function. You will have to supply the first parameter in the callback (eg we used i
above). Ironically, the callback arguments used in the each method are the reverse of the callback arguments in the map function so be careful.
map(arr, function(elem, index) {});
// versus
each(arr, function(index, elem) {});
1: The arguments to the callback functions are reversed.
.each()
's, $.each()
's, and .map()
's callback function take the index first, and then the element
function (index, element)
$.map()
's callback has the same arguments, but reversed
function (element, index)
2: .each()
, $.each()
, and .map()
do something special with this
each()
calls the function in such a way that this
points to the current element. In most cases, you don't even need the two arguments in the callback function.
function shout() { alert(this + '!') }
result = $.each(['lions', 'tigers', 'bears'], shout)
// result == ['lions', 'tigers', 'bears']
For $.map()
the this
variable refers to the global window object.
3: map()
does something special with the callback's return value
map()
calls the function on each element, and stores the result in a new array, which it returns. You usually only need to use the first argument in the callback function.
function shout(el) { return el + '!' }
result = $.map(['lions', 'tigers', 'bears'], shout)
// result == ['lions!', 'tigers!', 'bears!']
The each
function iterates over an array, calling the supplied function once per element, and setting this
to the active element. This:
function countdown() {
alert(this + "..");
}
$([5, 4, 3, 2, 1]).each(countdown);
will alert 5..
then 4..
then 3..
then 2..
then 1..
Map on the other hand takes an array, and returns a new array with each element changed by the function. This:
function squared() {
return this * this;
}
var s = $([5, 4, 3, 2, 1]).map(squared);
would result in s being [25, 16, 9, 4, 1]
.
i understood it by this:
function fun1() {
return this + 1;
}
function fun2(el) {
return el + 1;
}
var item = [5,4,3,2,1];
var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);
console.log(newitem1); // [5, 4, 3, 2, 1]
console.log(newitem2); // [6, 5, 4, 3, 2]
so, "each" function returns the original array while "map" function returns a new array
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With