JavaScript: .forEach vs .map

If you're fairly new to JavaScript or are now just coming across the .forEach and .map methods, you might be a little confused on the differences and when each one is appropriate. Simply put, .map will make a copy of the specified array and run your specified function on each item in the array and will return those items into the new array, which you can store in a variable. .forEach will run your specified function on each item in the array but does not return a new array, it modifies the original one.

.forEach

    let someArray = [1, 2, 3];
    someArray.forEach(function(currentNumber) {
        currentNumber++;
    });

    console.log(someArray); // [2, 3, 4]

.map

    let someArray = [1, 2, 3];
    let newArray = someArray.map(function(currentNumber) {
        currentNumber++;
    });

    console.log(someArray); // [1, 2, 3]
    console.log(newArray); // [2, 3, 4]

The Takeaway

If you are just trying to print out the contents of the array or if you truly want to modify the original array, then use .forEach. If you are a fan of functional programming or if you just need the original array to stay intact and just need to access the data within that array, use .map. It's also important to note that .map is a little more performant than .forEach. For an example check out this link to see a benchmark test https://jsperf.com/loop-vs-map-vs-foreach.


Thank you for taking the time to read my post today if you've made it this far! Happy coding! :)