Jquery Map VS. Each

jQuery map vs. each

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) {});

jQuery map vs jQuery each

var userDetailsFields = $(formSelector).find("input[type='text'], select").map(function(){
  return this.id;
});

.each used to iterate over array-like and make something on each item. It's more generic function

.map - create new array base on source array-like object. It's more specific function

Speed will be the same, but semantic of task say that better to use .map

jQuery .each() vs. .map() without return

.map() is designed to both iterate and create a new resulting array.

.each() is designed to be an iterator (no new array created).

Either will work for plain iteration, though I would argue that the intent of your code is clearer if you are just doing an iteration if you use .each() since that is its intended and only purpose.

As for functionality differences besides the creation of the array, jQuery's .each() allows you to terminate the iteration by returning false from the callback. jQuery's .map() does not have a way to terminate the iteration.

JavaScript: Difference between .forEach() and .map()

They are not one and the same. Let me explain the difference.

forEach: This iterates over a list and applies some operation with side effects to each list member (example: saving every list item to the database) and does not return anything.

map: This iterates over a list, transforms each member of that list, and returns another list of the same size with the transformed members (example: transforming list of strings to uppercase). It does not mutate the array on which it is called (although the callback function may do so).

References

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

JQuery map vs Javascript map vs For-loop

The latter (for loop) is much faster. I remember seeing a benchmark somewhere but I can't seem to find the link.

If performance is really an issue then I would use the for loop. It doesn't really obscure the code that much.

jQuery $.map vs $.fn.map different arguments

Here's my completely and entirely speculative "answer".

jQuery.each(), .each() and jQuery.map() were all present in version 1.

.map() was added in 1.2.

My guess is that they simply didn't give consideration to having the each methods follow the forEach in the spec. (What was the status of ES 5 at that time anyway?) But for some reason they did follow closer to the spec for $.map(). (Maybe its original intention was for primarily internal use as well.)

So when jQuery 1.2 came along, they decided it would be nice to have a .map() method.

So the question they faced was to have .map() follow $.each() and .each(), or follow $.map().

Since .each() in particular had already been implemented as callable against a jQuery object, they felt that it would cause less confusion to have .map() follow .each() than to follow $.map(), which is most certainly not used as much.

Looking at the source for the .map() method vs the .each() method, you can see that .map() requires an intermediate function in order to flip around the arguments and set the this value. Somehow I doubt that they would have wanted to do that if they had it all planned out in advance.

Again, this is complete and utter speculation, but I wouldn't be surprised if it happened something like that.

Take it or leave it. ;o)

What is the difference between $.map and $.grep in jQuery

I will assume you mean $.grep and $.map. The difference is that we use $.grep to filter an array while we use $.map to apply a function to each item in the array.

Here is a much better explanation than I can make:

http://onwebdev.blogspot.com/2011/03/jquery-grep-and-map-example-and-syntax.html

map array to elements text using jQuery.each inside a for loop?

You don't need the outer for loop:

var myArray = ['a', 'b', 'c'];

$('#parent .child').each(function (index) {
    $(this).text(myArray[index]);
});

Define dot functions like jQuery's .map(), .each(), etc

You need to set the prototype of the init function.

let mx = function(arr) {
    return new mx.fn.init(arr) 
}
let init = function(arr) {
    //do things and return an object containing data about arr
}
mx.fn = init.prototype = {
    addRow(row){
        // do something
    },
    init: init
}

---

Related Topics