Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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);
230 Views
