Blog

Iterating over arrays with loops and methods like map(), filter(), and reduce()

In JavaScript programming, a for loop repeats the looping process from start to end by iterating over an array data type. In JavaScript programs, programmers can loop over particular conditions by applying multiple loops to an array, or by applying built-in array methods like map(), filter(), and reduce(). Programmers can apply each of the map(), filter(), and reduce() methods to a program array in different ways.

So, let’s explore the process of iterating over an array by applying both for loop and array methods in JavaScript.

Iteration Process in Traditional Loop.

For Loop in JavaScript.

In computer programming, a for loop is a basic method of iterating over a user-defined array data type with a start to end condition. The for loop provides programmers with full control over the iteration process in the current program condition, which helps JavaScript programmers to index and access array elements.

let course = [“O Level”, “A Level”, “B Level”, “C Level” ];

for (let p = 0; p < course.length; p++) {

console.log(course[p]);

Explanation of for loop.

In this program, the for loop starts from index 0, and the loop process continues from start to end of the array (course.length), printing the result of each array element in the console screen.

for…of loop with JavaScript.

When the JavaScript programmer does not need the index, the for…of loop is a more modern and advanced method of iterating over array elements.

let courses = [“O Level”, “A Level”, “B Level”, “C Level” ];

for (let course of courses) {

console.log(course);

}

for…of loop with JavaScript.

The for…of loop in JavaScript programs directly repeats the array element values, it is used when the programmer does not need the index, this process is a more detailed process than the apply for loop.

JavaScript forEach() method.

The forEach() method in JavaScript programs executes the function applied for each array element, this process allows you to loop the condition in the array in the program without manually managing the index process.

let courses = [“O Level”, “A Level”, “B Level”, “C Level”];

courses.forEach(function(course) {

console.log(course);

});

Explanation of forEach() method.

In this program the forEach() method repeats the array elements in a loop, and executes the given function for each array element item.

courses.forEach(course => console.log(course));

Array methods for iteration in JavaScript programming.

map() Method Array method.

In JavaScript programs, map() method creates an array result window by calling the given function on each element of array data type. This process does not modify the fundamental array given in the program.

let integer = [3, 7, 9, 10, 11, 14];

let tripplled = integer.map(int => int * 3);

console.log(tripplled); // Result – [ 9, 21, 27, 30, 33, 42]

Explanation of map() Method.

Here, map() method applies the (int => int * 3) function to each array element, and returns a new array with triple the value. This does not affect the original array.

filter() method in array.

The filter() method in JavaScript program creates a new array from all the array elements passed to the given program function for execution and testing. Here the filter() function allows the programmer to filter out unwanted array elements.

let integers = [100, 77, 22, 44, 57, 60, 80];

let evenIntegers = integers.filter(int => int % 2 === 0);

console.log(evenIntegers); // Result – [ 100, 22, 44, 60, 80]

Explanation of the filter() method.

Here the filter() method returns a new array value containing only those array elements that satisfy the condition int % 2 === 0. The program checks for even numbers in the current array elements and prints them.

reduce() Method in Array.

The reduce() method in JavaScript programs applies a reducer function to each element of an array in left to right order, and it returns a single accumulated result. This method is helpful to group or accumulate the values of an array.

let integers = [9, 8, 7, 2, 3, 4];

let total = integers.reduce((acc, int) => acc + int, 0);

console.log(total); // Result – 33

Explanation of reduce() method.

The reduce() method in the program iterates over each element of the array, and here the reducer function (acc, int) => acc + int adds each integer to the accumulator (acc). Finally the initial value of 0 is displayed as the output.

some() and every() methods in JavaScript.

• some() – It checks in the current JavaScript array program whether at least one element in the array passes the test or not.
• every() – It checks in the current array program whether every element of the array passes the test or not.

let integers = [22, 33, 88, 11, 90, 81];

let checkeven = integers.some(int => int % 2 === 0);

console.log(checkeven); // Result – true ( there are some even numbers)

let testeven = integers.every(int => int % 2 === 0);

console.log(testeven); // Result – false (all are not even number)

Explanation of some() and every() methods.

The some() function returns true value if at least one array element in the current array list satisfies the condition.

every() function returns true result only if every element satisfies the condition.

find() Method in JavaScript.

The find() array method in JavaScript program returns the first array found element that satisfies the given test function.

let integers = [9, 7, 8, 2, 4, 11];

let checkEven = integers.find(int => int % 2 === 0);

console.log(checkEven); // Result – 8

Let Comparison of traditional Loops vs. Array Methods

Explanation of find() Method.

In this program, the find() method returns the first element in the current array that satisfies the condition (int % 2 === 0), which is the array value 8 in this condition.

Summary of JavaScript program iteration techniques.

• Loop (for, for…of) – This loop provides the programmer with complete control over iteration in an array program, including indices.
• forEach() – Method that applies a function to each array element, but returns nothing. This is a basic method for iterating without modifying the existing array.
• map() – Creates a new array with the modified elements in the existing array.
• filter() – Creates a new array with the elements that satisfy a specific condition.
• reduce() – Accumulates and displays a single value, such as a sum or product, based on the elements of the array.
• some() / every() – Checks the given condition in the existing array, and returns a boolean value true or false.
• find() – It finds and displays the first array element in the current array list that matches the given condition.