jQuery – $.each vs $.map jquery

We are going to go over what are the difference between $.each and $.map in jquery. Both are like foreach loops, but utilized differently.

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 mapfunction returns a new array. If you overuse the return value of the map function you can potentially waste a lot of memory.

<script>
    var cities = ['Paris', 'London', 'Orlando'];
    
    $.each(cities, function(index, city){
        var result = city + " " + index;
        console.log(result);
    });
    // paris 0
    // london 1
    // orlando 2

    $.map(cities, function(city, index){
        var result = city + " " + index;
        console.log(result);
        return result;
    });
    // paris 0
    // london 1
    // orlando 2

</script>