Using iterator functions in Javascript



In this article, we are going to discuss the importance of iterator functions in JavaScript. We can use the iterator function to iterate over an array. Other than Explicit iteration, Javascript provides a variety of iteration functions that you can use to iterate over arrays. Here, we use the forEach(), the filter method(), and the map() method to iterate over the arrays and perform the required operations.

ForEach Function

This function takes a function as a parameter and executes it as you pass to it for every object in the array.

Syntax

Following is the syntax of the forEach() method.

array.forEach(function(currentValue, index, arr), thisValue)

Example 1

An example using forEach() method as an iterator function in JavaScript

let people = ['Harry', 'Martha', 'John', 'Sam']
people.forEach(person => console.log(person.toUpperCase()));

Example 2

In this example, we are going to discuss the use of the forEach() method. In this case, we use the forEach() method to iterate over the array and display the result.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
      <div id="forEach"></div>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         students.forEach((mem) => document.write(mem.toUpperCase(), "<br>"));
      </script>
   </body>
</html>

Filter() Function

This function executes the function you pass to it for every object in the array and creates a new array based on the values that return a truthy value.

Syntax

Following is the syntax of the filter() method.

array.filter(function(currentValue, index, arr), thisValue)

Example 1

In this example, we are going to discuss the use of filter() method. We use the filter() method to iterate over the array and display the result.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         document.write(students.filter((mem) => mem[0] === "H"));
      </script>
  </body>
</html>

Example 2

Another iteration example using the filter() function is given below −

let people = ['Harry', 'Martha', 'John', 'Sam']
console.log(people.filter(person => person[0] === 'H'));

Map Function

This function executes the function you pass to it for every object in the array and creates a new array based on what you return to it.

Syntax

Following is the syntax of the map() method.

array.map(function(currentValue, index, arr), thisValue)

Example 1

In this example, we are going to discuss the use of map() method. In this case, we use the map() method to iterate over the array and display the result.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
      <div id="map"></div>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         let upperCaseNames = students.map((mem) => mem.toUpperCase());
         document.getElementById("map").innerHTML = upperCaseNames;
      </script>
   </body>
</html>

Example 2

The following example performs iteration in JavaScript using map() function −

let people = ['Harry', 'Martha', 'John', 'Sam']
let upperCaseNames = people.map(person => person.toUpperCase())
console.log(upperCaseNames);

Advertisements