JavaScript Array Iteration

There are multiple ways to iterate through a JavaScript array.

Array.forEach()

The JavaScript forEach() method can be used to call a callback function for each of the element in the array.

const foods = ["Pizza", "Burger", "Chicken", "Steak"];
let txt = "<ul>";
foods.forEach(ListFoods);
txt += "</ul>";
document.getElementById("foods").innerHTML = txt;
function ListFoods(value, index, array) {
  txt += "<li>" + value + "</li>";
}

Note here that the created function takes the item value, index and the array as the arguments but only value is used in this case.

Array.map()

The map() method can be used to create a new array by executing a function on each element of the array. The function is not executed for elements of the array without values and the map() method never changes the original array.

const numArr1 = [33, 41, 12, 16, 25];
const numArr2 = numArr1.map(addingToArr); //100 added to each array element

function addingToArr(value, index, array) {
  return value + 100;
}

Array.filter()

The array filter() method is used to create a new array which contains elements that pass a condition stated in the callback function. In the following example, all values in numArr1 that are larger than 30 get added to numArr2.

const numArr1 = [33, 41, 12, 16, 25];
const numArr2 = numArr1.filter(largerThan30); //values larger than 30

function largerThan30(value, index, array) {
  return value > 30;
}

Array.reduce()

The reduce() method works on an array from left to right to reduce it to a single value. This single value is returned, and the original array is not effected. In the following example the result from the multiplication of all the array elements is returned. Note that the function has a total argument which is the initial or previously returned value. To work on the array from right to left, use reduceRight() instead.

const numArr1 = [33, 41, 12, 16, 25];
const product = numArr1.reduce(productOfArr); //result of multiplication of all array elements

function productOfArr(total, value, index, array) {
  return total * value;
}

Array.every()

The every() method is used to check if all elements of the array pass a condition. In the following example it is used to check if every element of the array has a value greater than 30.

const numArr = [33, 41, 12, 16, 25];
let everyOver30 = numArr.every(testOver30); //False
function testOver30(value, index, array) {
  return value > 30;
}

Array.some()

The some() method unlike the every() method is used to check if some of the array element values pass a condition. In the following example it is used to check if some elements of the array have a value greater than 30.

const numArr = [33, 41, 12, 16, 25];
let someOver30 = numArr.some(testOver30); //True
function testOver30(value, index, array) {
  return value > 30;
}

Array.indexOf()

To get the index of a specific element of the array, use the indexOf() method.

const numArr = [33, 41, 12, 16, 25];
let indexCheck = numArr.indexOf(12); //Returns 2.Note: Counting index starts from 0

Array.lastIndexOf()

To check on which index a specific element is last found in an array, use the lastIndexOf() method.

const numArr = [33, 41, 12, 12, 25];
let indexCheck = numArr.lastIndexOf(12); //Returns 3

Array.includes()

To check if an element is present in an array, you can use the includes() method.

 const numArr = [33, 41, 12, 16, 25];
 let check = numArr.includes(12); //Returns true

Array.find()

The find() method can be used to find the first element that passes a particular condition. For example in this example, the first element that is larger than 30 is returned.

const numArr = [18, 41, 12, 16, 25];
let foundNum = numArr.find(testOver30); //Returns 41

function testOver30(value, index, array) {
  return value > 30;
}

Array.findIndex()

The findIndex() method is used to find the index of the first element that passes a particular condition. For example in this example, the index of the first element that is larger than 30 is returned.

const numArr = [18, 41, 12, 16, 25];
let foundNum = numArr.findIndex(testOver30); //Returns 1

function testOver30(value, index, array) {
  return value > 30;
}

Array.from()

The Array.from() method is used to return an array object from any object that has a length property or is iterable.

let newArr = Array.from("123456"); //Returns ['1', '2', '3', '4', '5', '6']

Array.keys()

The Array.keys() method is used to return an Array Iterator object with array keys

const foods = ["Pizza", "Burger", "Chicken", "Steak"];
const keys = foods.keys();
let text = "";
for (let x of keys) {
  text += x + "<br/>";
}
document.getElementById("foods").innerHTML = text;