<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">Array.prototype.forEach</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Array.prototype.map()</a> are both methods available for arrays in JavaScript, but they serve different purposes and have different use cases.
<h2>Array.prototype.forEach()</h2>
It is used for iterating over an array and performing a specified operation for each element in the array. It does not create a new array and is primarily used for side effects.
<blockquote>
Syntax: <code>array.forEach(callback(currentValue, index, array))</code>
</blockquote>
<pre class="shiki github-dark shaku"><code>const numbers = [1, 2, 3, 4];numbers.forEach((num, index) =&gt; { console.log(`Element at index ${index}: ${num}`);});// Output:// Element at index 0: 1// Element at index 1: 2// Element at index 2: 3// Element at index 3: 4</code></pre>
In this example, <code>forEach</code> iterates over each element in the <code>numbers</code> array and logs each element along with its index.
<hr />
<h2>Array.prototype.map():</h2>
It is used for creating a new array by applying a specified transformation function to each element in the original array. It returns a new array without modifying the original array.
<blockquote>
Syntax: <code>const newArray = array.map(callback(currentValue, index, array))</code>
</blockquote>
<pre class="shiki github-dark shaku"><code>const numbers = [1, 2, 3, 4];const doubled = numbers.map((num) =&gt; num * 2);console.log(doubled); // Output: [2, 4, 6, 8]</code></pre>
In this example, <code>map</code> creates a new array <code>doubled</code> by multiplying each element in the <code>numbers</code> array by 2, without modifying the original <code>numbers</code> array.
<hr />
In summary, use <code>forEach</code> when you want to iterate over an array and perform some action or side effect for each element. Use <code>map</code> when you want to transform each element in an array into a new value and create a new array with those transformed values.

forEach() vs map()

Twitter

An easy question, right? It really depends on what you want to achieve. In case you are not sure, read MDN about forEach() and map()…