Array Iteration

There are many useful array iteration functions.

Those functions are supported from ES6 (JavaScript 2015) and not by older versions such as Internet Explorer.

Some of the most common of them are:

• forEach
• map
• flatMap
• filter
• every
• some
• find
• reduce

All of this functions (except reduce) accept a callback with 3 arguments - value, index, arr.

• value - the value of the element of the array
• index - the index of the element
• arr - the array itself

reduce callback accepts 4 arguments - total, value, index, array which we will look at later.

forEach

Iterates the elements of an array.

It accepts a function as an argument which holds 3 parameters - value, index and array.

Let's look at the following example:

let numbers = [4, 8, 7, 6, 3]; numbers.forEach((value, index, arr) => { console.log('Index: ' + index); console.log('Value: ' + value); console.log('- - - - - - - -'); });

Output:

Index: 0 Value: 4 - - - - - - - - Index: 1 Value: 8 - - - - - - - - Index: 2 Value: 7 - - - - - - - - Index: 3 Value: 6 - - - - - - - - Index: 4 Value: 3 - - - - - - - -

The code snippet prints all indexes and values of the array in a way specified in the callback function.

The arr argument is the iterated array - [4, 8, 7, 6, 3] but this parameter is rarely used.

map

Returns an array which elements are modified in the callback.

let numbers = [4, 8, 7, 6, 3]; let multipliedElements = numbers.map((value, index, arr) => { return value * 2; }); console.log(multipliedElements);

Output:

[8, 16, 14, 12, 6]

flatMap

Similar to map but we can add more elements to the array if we return array.

Let's compare map and flatMap via the following example:

let numbers = [4, 8, 7]; let addZerosCallback = (value, index, arr) => { return [value, 0, 0]; }; let mapResult = numbers.map(addZerosCallback); let flatMapResults = numbers.flatMap(addZerosCallback); console.log(mapResult); console.log(flatMapResults);

Output:

[[4, 0, 0], [8, 0, 0], [7, 0, 0]] [4, 0, 0, 8, 0, 0, 7, 0, 0]

When the map callback returns array, then the element of the returned array is an array - like [4, 0, 0].

When the flatMap callback returns array, then it's element are added to the returned array as separate elements - like 4, 0, 0.

filter

Allows filtering specific elements.

if the callback returns true - the element will be present in the returned array.

If the callback returns false - it will not be present.

For example we can filter the array to return only the even numbers:

let numbers = [4, 8, 7, 6, 3]; let evenNumbers = numbers.filter((value, index, arr) => { return value % 2 == 0; }); console.log(evenNumbers);

Output:

[4, 8, 6]

every

Allows checking if all elements match certain condition.

if all of the elements match the condition in the callback (to return true), then the every function returns true.

If one or more of the elements don't match the condition in the callback (to return false), then the every function returns true.

For example we can check if all of the elements in the array are even:

let numbers = [4, 8, 7, 6, 3]; let onlyEvenNumbers = [4, 8, 6]; let checkIfAllAreEven = (value, index, arr) => { return value % 2 == 0; }; console.log(numbers.every(checkIfAllAreEven)) console.log(onlyEvenNumbers.every(checkIfAllAreEven))

Output:

false true

some

Allows checking if at least one of the elements match certain condition.

if at least one the elements match the condition in the callback (to return true), then the some function returns true.

if neither of the elements match the condition in the callback (to return true), then the some function returns false.

let oddNumbers = [3, 9, 7, 5]; let mixedNumbers = [4, 1, 8]; let checkIfEven = (value, index, arr) => { return value % 2 == 0; }; console.log(oddNumbers.some(checkIfEven)) console.log(mixedNumbers.some(checkIfEven))

Output:

false true

find

Finds the first element of array that matches certain condition (the callback to return true).

If no element matches the condition it returns undefined.

let oddNumbers = [3, 9, 7, 5]; let mixedNumbers = [4, 1, 8]; let checkIfEven = (value, index, arr) => { return value % 2 == 0; }; console.log(mixedNumbers.find(checkIfEven)) console.log(oddNumbers.find(checkIfEven))

Output:

4 undefined

reduce

Accumulates a single value based on a callback function.

It has 2 arguments - the callback and the initial value.

The callback accepts 4 arguments - total, value, index, array in which total is the accumulated value.

An example of function summing array elements with console.logs for explanations:

const numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce((total, value, index, array) => { console.log('Accumulate value: ' + total); console.log('The value to add: ' + value); console.log('- - - - - - - - - -'); return total + value; }, 0); console.log('Sum: ' + sum)

Output:

Accumulate value: 0 The value to add: 1 - - - - - - - - - - Accumulate value: 1 The value to add: 2 - - - - - - - - - - Accumulate value: 3 The value to add: 3 - - - - - - - - - - Accumulate value: 6 The value to add: 4 - - - - - - - - - - Accumulate value: 10 The value to add: 5 - - - - - - - - - - Sum: 15