JavaScript has a bundle of built-in methods to perform different mathematical operations on the array elements. The map() and forEach() are two methods that iterate over the elements of the existing array. The map() method applies a function on each element of the array and returns a new array whereas the forEach() method also uses the same function, but it changes the elements of the current array.

This post describes the map() and foEach() methods in detail to differentiate these methods in JavaScript.

How Does forEach() Method Work in JavaScript?

The forEach() method is employed to perform some operation on the array elements. It allows you to execute a callback method. The forEach() method return type is undefined as it totally depends on the functionality of the call back function.

It is a newer way to write less code that iterates over an array. The syntax of the forEach() method is provided below:

Syntax

The description of the syntax is as follows:

• function(element, index, array): is a required function to iterate over array elements.
• element: Specifies the existing array element.
• index: Represents the index of the existing element.
• array: Specifies the name of the array to which the element belongs to.
• thisVal: represents this value of the function.

Example

The following example code is adapted to discuss the usage of the forEach() method in JavaScript.

Code

The description of the code is as follows:

• A <div> tag is created which will be used to display the array.
• After that, an array a is initialized with six elements from 10 to 15.
• Furthermore, the forEach() method is utilized to iterate over the array elements .
• The innertext property will retrieve all the content of ‘div’ element.
• The appendchild property is used to append the child elements to the element having id “id1”.

Output

It is observed that the elements of the array are printed on the browser’s window.

How Does map() Method Work in JavaScript?

The map() method returns transformed elements in a new array by applying the callback function to each element of the array. The method is immutable and can change/alternate the data. It is faster compared with the forEach() method. It provides chainable features; users can associate sort(), filter(), and reduce() methods after applying map() to arrays. Moreover, it returns the same size as the existing array.

The syntax is given below.

Syntax

The description of the parameters is as follows:

• function(element, index, array): denotes the function to be applied on each array element.
• element: specify the current element of the array
• index: represent the index of the current element
• array: specify the name of the array for the callback method
• thisVal: shows the current value of the function.

Code

The description of the code is listed here.

• Firstly, a message is displayed using the “console.log()” method.
• After that, an array is employed with the name num in which five elements are defined.
• Finally, the map() method is used to return a new array where all its elements are the multiples of theirselves.

Output

The outcome of the code shows that the map() method returns the square values 10, 9, 8, 7, and 6 to 100, 81, 64, 49, and 36.

Conclusion

The map() and forEach() methods use the function to perform iteration over the array elements. Resultantly, map() methods create an array whereas the return type of the forEach(0 method is undefined. In this post, a detailed explanation of the map() and forEach() method is described to differentiate these two iterating methods. Both methods are used to iterate over the array elements However, their way of working differs which can be understood from the above written content.