DEV Community

Cover image for Array Iteration Methods in Javascript
Ezhil Abinaya K
Ezhil Abinaya K

Posted on

Array Iteration Methods in Javascript

Array Iteration Methods
Array iteration methods are used to iterate through array elements and perform operations on them without using traditional loops.
Array forEach()
forEach() is an array iteration method used to execute a function for each element in an array. It processes the elements one by one in sequence and is commonly used when we want to perform an operation on every element. It takes a callback function as an argument. This method does not return a new array; its return value is undefined. It is useful for tasks such as displaying data, printing values, or updating elements.

let nums = [10, 20, 30];
nums.forEach(function(num) {
    console.log(num);
});
//10
20
30
Enter fullscreen mode Exit fullscreen mode

Array map()
map() is an array iteration method used to transform or modify each element of an array. It executes a callback function for every element and creates a new array based on the returned values. This method does not modify the original array. The return type is Array. It is useful when we want to perform an operation on all elements and get the results in a new array.

let nums = [1, 2, 3];
let result = nums.map(num => num * 2);//result = [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

Array flatMap()
flatMap() is an array iteration method that combines the functionality of map() and flat(). It first applies a callback function to each element of the array and then flattens the result by one level. This method returns a new array and does not modify the original array. The return type is Array. It is useful when the callback function returns arrays and we want the final result in a single flattened array.

let arr = [1, 2, 3];
let result = arr.flatMap(num => [num, num * 2]);//[1, 2, 2, 4, 3, 6]
Enter fullscreen mode Exit fullscreen mode

Array filter()
filter() is an array iteration method used to select elements from an array based on a condition. It executes a callback function for each element and includes only the elements that satisfy the condition in the result. This method returns a new array and does not modify the original array. The return type is Array. It is useful when we want to extract specific elements from an array.

let nums = [10, 20, 30, 40];
let result = nums.filter(num => num > 20);//[30, 40]
Enter fullscreen mode Exit fullscreen mode

Array reduce()
reduce() is an array iteration method used to combine all the elements of an array into a single value. It executes a callback function for each element and accumulates the result. This method returns a single value, such as a number, string, object, or array, depending on the logic used. It is useful for operations like calculating totals, sums, averages, or building a single result from multiple elements.

let nums = [10, 20, 30];
let result = nums.reduce((total, num) => total + num, 0);
console.log(result);//60
Enter fullscreen mode Exit fullscreen mode

Array reduceRight()
reduceRight() is an array iteration method used to combine all the elements of an array into a single value, similar to reduce(). The difference is that it processes the elements from right to left, starting from the last element and moving towards the first element. It returns a single accumulated value, and the return type depends on the logic used.

let arr = ["A", "B", "C"];
let result = arr.reduceRight((acc, value) => acc + value);
console.log(result);//CBA
Enter fullscreen mode Exit fullscreen mode

Array every()
every() is an array iteration method used to check whether all elements in an array satisfy a given condition. It executes a callback function for each element and returns true only if every element meets the condition. If any element fails the condition, it returns false. The return type is boolean. It is useful when we want to validate all elements in an array.

let nums = [10, 20, 30];
let result = nums.every(num => num > 5);
console.log(result);//true
Enter fullscreen mode Exit fullscreen mode

Array some()
some() is an array iteration method used to check whether at least one element in an array satisfies a given condition. It executes a callback function for each element and returns true if any element meets the condition. If no elements satisfy the condition, it returns false. The return type is Boolean. It is useful when we want to check if an array contains at least one matching element.

let nums = [10, 20, 30];
let result = nums.some(num => num > 25);
console.log(result);//true
Enter fullscreen mode Exit fullscreen mode

Array from()
Array.from() is a built-in static method used to create a new array from an array-like object or an iterable object such as a string. It converts the given data into an actual array and returns the new array. The return type is Array. It is useful when we need to perform array operations on data that is not already an array.

let result = Array.from("Hello");
console.log(result);//[ 'H', 'e', 'l', 'l', 'o' ]
Enter fullscreen mode Exit fullscreen mode

Array keys()
keys() is an array method used to get the index values of an array. It returns an iterator object containing the keys (indexes) of the array elements. The return type is Array Iterator. It is useful when we need to access or iterate through the index positions of an array.An iterator is an object that allows us to access values one by one.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.keys();
for (let key of result) {
    console.log(key);
}
//0
1
2
Enter fullscreen mode Exit fullscreen mode

Array entries()
entries() is an array method used to get both the index and value of each element in an array. It returns an iterator containing key-value pairs, where the key is the index and the value is the corresponding array element. The return type is Array Iterator. It is useful when we need both the index and the value while processing an array.

let fruits = ["Apple", "Mango", "Orange"];

let result = fruits.entries();
for (let entry of result) {
    console.log(entry);
}
//[ 0, 'Apple' ]
[ 1, 'Mango' ]
[ 2, 'Orange' ]
Enter fullscreen mode Exit fullscreen mode

Array with()
with() is an array method used to replace an element at a specific index and return a new array with the updated value. It takes the index and the new value as arguments. This method does not modify the original array. The return type is Array. It is useful when we want to update an element while keeping the original array unchanged.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.with(1, "Grapes");
console.log(result);//[ 'Apple', 'Grapes', 'Orange' ]
Enter fullscreen mode Exit fullscreen mode

Array Spread (...)
The spread operator (...) is used to expand the elements of an array into individual values. It is commonly used to copy arrays, merge multiple arrays, or pass array elements as separate arguments to a function. It returns the expanded values, and when used inside an array literal, it helps create a new array. It is useful for writing shorter and cleaner code.An array literal is a way of creating an array using square brackets [] and placing the elements inside them.

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = [...arr1, ...arr2];
console.log(result);//[ 1, 2, 3, 4 ]
Enter fullscreen mode Exit fullscreen mode

Array Rest (...)
The rest operator (...) is used to collect multiple values into a single array. It is commonly used in function parameters when we do not know how many arguments will be passed. The collected values are stored in an array. It is useful for handling a variable number of values in a flexible way.

function showNumbers(...nums) {
    console.log(nums);
}

showNumbers(10, 20, 30);//[ 10, 20, 30 ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)