mohandass

Posted on Apr 15

Javascript Array iteration methods

#webdev #javascript #beginners #tutorial

Array iteration method in javascript are built in tools allows you to operate on every item in an array,One at a time.The most of the method a callback function as a arguments.Which is execute for each elements in a array.

Array Iteration Methods

Array forEach
Array map()
Array flatMap()
Array filter()
Array reduce()
Array reduceRight()
Array every()
Array some()
Array from()
Array keys()-(TBD)
Array entries()-(TBD)
Array with()
Array Spread (...)
Array Rest (...)

1. forEach()

The forEach() method calls a function (a callback function) once for each array element.It's used for side effects, and returns undefined(void).

Example:

Note that the function is take 3 arguments

The item value
The item index
The array itself

Above the example used only the value arguments.

2. Array map()

The map() method create a new array performing a function on each array elements.
The map() method dose not execute the function for array elements without values.
The map() method is a non-mutating method,meaning it dose not change the original array.

Example:

Note the function is take 3 arguments:

The item value
The item index
The array itself

Above the example callback function used only the value parameter.The index and array it can be your choice.

3. flatMap()

The flatMap() method is built in array function that combines two operations into a single efficient.that is mapping and flattening,the mapping each elements using a callback function.And then flattening the result by the exactly one level.
This method is return the new array and dose not modify the original array.

Example:

Output:
[ 8, 18, 10, 14, 6 ]

4. filter()

The filter() method is create a new array containing only the elements from an existing array that pass a specific test(condition)
It's is the iterative method,that meaning it's runs a provided function for every element in the array
This method is returns a new array.it dose not change the original array

Example:

The example create a new array from elements with a value lager than 35
Note that the function take three arguments:
The item value
The item index
The array itself
Above the example callback function used only the value,The index and array parameters can be omitted.

Output:
[ 90, 50, 70 ]

5. reduce()

The reduce() method runs a function on each array element to produce a single value.
This method dose not change the original array

Example:

The example finds the sum of all number in the array.
total (accumulator) starts as the first element - 45.
Iteration starts from the second element.
Above the example is used only the value.

Output:
79

6. reduceRight()

The reduce() method runs a function on each array element to produce a single value.
But it processes the array from right to left (descending index order).

Example:

total starts as the last element - 25
Iteration starts from the second-last element
The reduce() is start from beginning
The reduceRight() is start from end

Output:
79

7. every()

The every() method test whether all elements in an array pass a specific condition.
This method return the boolean value.It returns true only if ALL elements pass the condition.If even one element fails - returns false immediately

Example:

If the example check it all array values are larger than 35

Output:
false

8. some()

The some() method is used to check if at least one element in an array passes a specific test.
It's return the boolean value.true if it finds a match, and false otherwise.

Example:

This example checks if some array values are larger than 35

Output:
true

9. Array.from()

The Array.from() method is a static method in JavaScript used to create a new, shallow-copied Array instance from an iterable or array-like object.
Any object with a length property

Example:

This Array,from is takes the string.It splits each character
And it's Take the word MESSI, break it into letters, and store them in an array.

Output:
[ 'M', 'E', 'S', 'S', 'I' ]

10. keys()-(TBD)

The keys() method of an array returns a new Array Iterator object that contains the indexes (keys) for each element in the array,not the values.
The Returns provides an Array Iterator rather than a list of values.

Example:

Output:
Object [Array Iterator] {}

12.with()

The with()method is used to update a single element in an array by returning a new array with the change applied.without changing the original array.

Example:

*arr.with(1, 10) → replace the element at index 1.Then the Index 1 currently has 30

It returns a new array with that value replaced
arr stays the same (immutable)
The newarr is the modified copy

Output:
[ 20, 30, 40 ]//unchanged
[ 20, 10, 40 ]

13. Spread (...)

The Spread (...) method is represented by three dots (...) and is used to expand or "spread" the elements of an iterable—like an array, string, or object—into individual items.
This method create a shallow copy.So dose not change the original array.

Example:

...arr1 - spreads elements: 20, 30, 40,...arr2 - spreads elements: 50, 60, 70
...arr3 is combined into a new array

Output:
[ 20, 30, 40, 50, 60, 70 ]

14. Rest (...)

The Rest (...) method is generally refers to the rest parameter (or rest operator) syntax, which is written as three dots (...) followed by a variable name. It is used to collect multiple elements and "condense" them into a single array.
The rest operator (...) allows us to destruct an array and collect the leftovers.

Example: