4 Must Know JavaScript Array Iteration Methods

Working with arrays in JavaScript used to be really annoying and complex. Fortunately now, there are a bunch of amazing JavaScript array methods that just make life easier. In this post, I will be covering the 5 most important JavaScript array iteration methods.

.forEach

This is a fundamental array method concept. If you can understand how this one works, you're gonna be able to learn the other methods a lot more easily.

This method is basically a for loop that takes in a function with a parameter and outputs that same data.

For example:

const array = ['a', 'b', 'c'];

array.forEach(letter => {
  console.log(letter);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"

.map

This method is also really simple. It allows you to take one array as a parameter and convert it into a new array. You'll find yourself using this method a lot.

For example:

var array = [1, 4, 9, 16];

// pass a function to map
const map = array.map(x => x * 2);

console.log(map);
// expected output: Array [2, 8, 18, 32]

.find

This allows you to find a single object within an array. It takes in a parameter and returns the first element in the array that returns true.

For example:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

.reduce

This method operates on an array, and reduces it to a single value.

It takes in two arguments:

1. A callback function with 2 parameters:

   • accumulator: the starting value
   • currentValue: each element in the array

2. The initial value for the accumulator.

The return function is then stored in the accumulator.

For example:

const array = [1, 2, 3, 4];
const reduce = array.reduce((accumulator, currentValue) => {
  accumulator + currentValue;
}, 0);

// 1 + 2 + 3 + 4
console.log(reduce);
// expected output: 10