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
Top comments (0)