JavaScript Array Function Comparison: forEach() vs. map()

JavaScript Array Function Comparison: forEach() vs. map()

The differences between forEach() and map() that every JavaScript developers should know. forEach() — executes a provided function once for each array element. map() — creates a new array with the results of calling a provided function on every element in the calling array.

In this article, I'll compare the JavaScript array functions forEach and map. After reading this, you should know when to use which function and why.

Function overview

Array.map()

The map function iterates over a given array.

The value you return in the function will replace the value in the original array.

const array = [1, 2, 3];
array.map((item) => {
  return item * 2; // changes the original array
});

console.log(array);
[2, 4, 6]

Changing the original array without re-assigning is called object mutation.

If you don't want to change the original array, you can copy it by using the spread operator:

// Makes a copy of the array
const result = [...array];
result.map((item) => {
  return item * 2;
});

Array.forEach()

This function allows you to iterate over an array without mutating the original one.

const array = [1, 2, 3];
array.forEach((item) => {
  item * 2; // effectively, this operation does nothing
});

console.log(array);
[1, 2, 3]

As you can see from the outputs, the use-cases for these two functions are totally different.

You will use map for changing each value of a given array, while forEach simplifies iterating over an array without changing its values.

javascript programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.