Array iteration using loops and array methods:

There are several methods for iterating over arrays in JavaScript, including loops and array functions. Loops are oldest ways of iterating and array inbuilt functions are new ways of iteration.

Iteration means repetition of some process and since array has a lot of elements so we move to each element and do some operation and that is what we considers iteration in javascript. Let's investigate these methods:

Array iteration using popular javascript loops:

For Loop: The classic for loop is frequently used to iterate across arrays. Here's an illustration: 

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}


In this example, a for loop is used, and the index variable i increments from 0 to the length of the array (arr.length), starting from 0. Using the index i, we may access each element of the array and carry out the required operations.

forEach() Method: For every element in an array, the forEach() method of an array executes a given function once. As an illustration, consider the following: 

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});


The forEach() method executes a callback function with a callback argument for each element of the array. The current element is passed as a parameter to the callback function, where it can be changed.

For...of Loop: The for...of loop was first introduced in ECMAScript 2015 (ES6) as a modern iteration construct. It provides the most easy technique to loop over array elements. Here is an example: 

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element);
}


In this example, the for...of loop iterates over each element of the array, and the element variable holds the value of the current element in each iteration. You can perform operations on the element variable within the loop body.

Array iteration using popular javascript inbuilt methods:

We have a lot of methods and the most popular of them are map(), reduce() and filter() methods. We will study map() and filter together as both has the same signature and work the same way with little difference.

map() method and filter() method: When using the map() and filter() method in JavaScript, an array is iterated over and a new array is created by applying a transformation function to each element of the initial array. In map(), the new array that is produced has the same length as the original array as it is the result of the mapping function being applied to its corresponding element in the original array, while in filter(), the new array may or may not have the same length as the original array as we apply some filtering here.

The map() and filter() method's syntax is as follows: 

// map method
array.map(callback(element, index, array), thisArg);

//filter method
array.filter(callback(element, index, array), thisArg);


callback: A function that is known as a callback is triggered for each array element. It takes maximum 3 arguments:

element: The array's current element under consideration.

index (optional): The current element being processed's index, which is optional.

array(optional): The array that map() was called on. It is also optional.

thisArg (optional): In the callback function, this might refer to an object. When calling the callback function, it serves as the value of this.

Using the map() and filter() technique is illustrated in the following example: 

//map example
const array = [1, 2, 3, 4, 5];
const mappedArray = array.map((element, index, array) => {
  return element * 2;
});
console.log(mappedArray); // Output: [2, 4, 6, 8, 10]

// filter example
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]


On the array in the above illustration where map() method is used, each element of the array is multiplied by two via the callback function (element, index, array) => element * 2. The modified values [2, 4, 6, 8, 10] are contained in the resulting array, mappedArray.

On the numbers array in this example, the filter() method is used. The modulo operation is used in the callback function to determine whether each element is even (number) => number% 2 === 0. Only the entries that match the criteria—the even integers [2, 4]—are included in the new array.

The map() and filter() method generates a new array with the altered elements; it does not alter the old array in any way.

Where we need map() method:
modiying array elements, Converting Data Format etc 

// modifying array elements
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

//Converting Data Format:
const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const names = persons.map((person) => person.name);
console.log(names); // Output: ['Alice', 'Bob', 'Charlie']


Where we need filter() method:
Filtering numbers, Objects by Property, Strings by Condition etc 

// filtering numbers
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]


// Filtering  Objects by Property
const products = [
  { name: 'Apple', price: 0.5 },
  { name: 'Banana', price: 0.25 },
  { name: 'Orange', price: 0.75 },
  { name: 'Kiwi', price: 1.0 }
];
const expensiveProducts = products.filter((product) => product.price > 0.5);
console.log(expensiveProducts);
// Output: [{ name: 'Orange', price: 0.75 }, { name: 'Kiwi', price: 1.0 }]

// Filtering  Strings by Condition
const words = ['hello', 'world', 'javascript', 'filter'];
const longWords = words.filter((word) => word.length > 5);
console.log(longWords); // Output: ['javascript', 'filter']


We will study about reduce() in next page.

PrevNext