Different ways to iterate over Arrays in JavaScript

Photo by Roman Synkevych 🇺🇦 on Unsplash

Introduction

JavaScript arrays are a type of data structure that allows you to store and manipulate data collections in a single variable. They are one of the most commonly used data structures in JavaScript and are highly versatile.

An array is essentially an ordered list of values, which can be of any data type, such as strings, numbers, objects, or even other arrays. Each value in the array is assigned a numerical index, starting from 0 for the first value, 1 for the second value, and so on.

JavaScript arrays are dynamic, meaning that they can be resized at any time by adding or removing elements.

Some ways to Iterate over Javascript Arrays.

Here are some examples of how to iterate over arrays in JavaScript. I have grouped these under two sections. Depending on your specific use case, you may find one method more useful than another.

Loops

• while
• do…while
• for loop
• for…in
• for…of

Array Methods

• forEach()
• map()
• filter()
• reduce()
• every()
• some()
• find()
• findIndex()
• includes()

Let’s See some code examples.

• Using while loop

let arr = [1, 2, 3, 4, 5];
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

• Using do…while loop

let arr = [1, 2, 3, 4, 5];
let i = 0;
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

• Using for loop

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• Using for…in loop

let arr = [1, 2, 3, 4, 5];
for (let index in arr) {
  console.log(arr[index]);
}

• Using for…of loop

let arr = [1, 2, 3, 4, 5];
for (let element of arr) {
  console.log(element);
}

• Using forEach() method

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
  console.log(element);
});

The forEach() method allows you to execute a callback function on each element of an array. The method does not return a new array or modify the original array, but simply performs a specified action on each element of the array.

• Using map() method

let arr = [1, 2, 3, 4, 5];
let mappedArray = arr.map(function(element) {
  return element * 2;
});
console.log(mappedArray);

The map() method allows you to create a new array of an existing one using a callback. The method returns a new array with the same length as the original array, where each element is the result of the callback function applied to the corresponding element of the original array. The original array is not modified.

• Using filter() method

let arr = [1, 2, 3, 4, 5];
let filteredArray = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(filteredArray);

The filter() method creates a new array with all elements that pass the test implemented by the provided callback function. The callback function should return true if the element should be included in the new array, and false otherwise. The new array may have fewer elements than the original array.

• Using reduce() method

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);

The reduce() method executes a callback function on each element of an array, resulting in a single output value. The callback function takes two arguments: the accumulator and the current element of the array. The accumulator is the value returned by the previous iteration of the callback function, and the current element is the current value being processed. The output value of the callback function is used as the accumulator for the next iteration.

• Using every() method

let arr = [2, 4, 6, 8, 10];
let isEven = arr.every(function(element) {
  return element % 2 === 0;
});
console.log(isEven); // Output: true

The every() method returns true if the callback function returns true for every element of the array, and false otherwise.

• Using some() method

let arr = [1, 3, 5, 7, 9];
let hasEven = arr.some(function(element) {
  return element % 2 === 0;
});
console.log(hasEven); // Output: false

The some() method returns true if the callback function returns true for at least one element of the array, and false otherwise.

• Using find() method

let arr = [1, 2, 3, 4, 5];
let evenIndex = arr.findIndex(function(element) {
  return element % 2 === 0;
});
console.log(evenIndex); // Output: 1

The find() method returns the first element of the array that satisfies the callback function, or undefined if no such element is found.

• Using findIndex() method

let arr = [1, 2, 3, 4, 5];
let evenIndex = arr.findIndex(function(element) {
  return element % 2 === 0;
});
console.log(evenIndex); // Output: 1

The findIndex() method returns the index of the first element of the array that satisfies the callback function, or -1 if no such element is found.

• Using includes() method

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // Output: true
console.log(arr.includes(6)); // Output: false

We use the includes() method to check if the array contains a specified value. The method returns true if the value is found in the array, and false otherwise.

That’s all for now.

Thanks for reading.