JavaScript, jquery

difference between jquery .map and .each

Guys, if performance does matters to your system please read this post. There is a very tiny thing that you should know playing with jquery api

here is the small but pretty nice  tips for you….

source :


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]

===================== effective use of map ================

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 function are reversed.

each()‘s callback function takes the index first, and then the element

function (index, element)

map()‘s callback has the same arguments, but reversed

function (element, index)

2: each() does 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']

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].

for more information please check jquery api doc


4 thoughts on “difference between jquery .map and .each”

    1. I can read, I have a blog title where it is written “knowledge Collection, ( SORRY i am not author all resources.) sharing is what i believe.” and for every post there is source link where is you can find the original description.
      I believe in sharing. May be someone couldn’t reach the original link but he/she can reach to this link somehow… It will be helpful to them.
      Knowledge is not mine or his or her or your, it is always there for everyone.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s