Array iterations in javascript

Array iteration in JavaScript is the process of accessing or looping through each element in an array one by one to perform a specific action. It allows you to examine, modify, filter, or transform data inside an array using either standard loop statements or built-in functional array methods.

Map():

The map() method creates a new array by performing a function on each array element.

The map() method does not execute the function for array elements without values.

The map() method does not change the original array.

Example:

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Output:

[90,8,18,32,50]

flatMap():

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

Example:

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);

Output:

1,10,2,20,3,30,4,40,5,50,6,60

filter():

The filter() method creates a new array with array elements that pass a test.

Example:

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Output:

45,25

Note that the function takes 3 arguments:

The item value
The item index
The array itself

reduce():

The reduce() method runs a function on each array element to produce a single value.

The reduce() method works from left-to-right in the array. See also reduceRight().

The reduce() method does not reduce the original array.

Example:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Output:

99

Note that the function takes 4 arguments:

The total (the initial value / previously returned value)
The item value
The item index
The array itself

reduceRight()

The reduceRight() method runs a function on each array element to produce a single value.

The reduceRight() works from right-to-left in the array. See also reduce().

The reduceRight() method does not reduce the original array.

Example:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
console.log(sum);

Output:

99

every()

The every() method checks if all array values pass a test.

Example:

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Output:

False

Note that the function takes 3 arguments:

The item value
The item index
The array itself

Spread (...)

The ... operator expands an array into individual elements.

Example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

Output:

1,2,3,4,5,6

EXample2:

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Dec"];

const year = [...q1, ...q2, ...q3, ...q4];

Output:

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec

Rest (...)

The rest operator (...) allows us to destruct an array and collect the leftovers:

Example:

let a, rest;
const arr1 = [1,2,3,4,5,6,7,8];

[a, ...rest] = arr1;

Output:

2,3,4,5,6,7,8

Example2:

let a, b, rest;
const arr1 = [1,2,3,4,5,6,7,8];

[a, b, ...rest] = arr1;

Output:

3,4,5,6,7,8

Reference:

https://www.w3schools.com/js/js_array_iteration.asp#mark_flatmap