Whenever you want to loop through an array in Javascript, the common approach taken is using the for, while, or any of the similar loops. Although this is a valid choice, there are many other approaches that you can take to loop through an array in Javascript.
forEach
forEach allows you to loop through all items in an array. For example, a for loop like this:
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}will become:
arr.forEach((item) => console.log(item));This eliminates the need to keep using the index to access the item, especially when the items in the array are objects and accessing their properties can become a hassle while using the index (unless you assign it to a new variable in the loop.)
You can also access the index as well:
arr.forEach((item, index) => console.log(item, index));map
map loops through an array, and returns a new array. This is helpful when you are looping through an array, but also are modifying it.
For example, to do this in a for loop:
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + 1;
}Can be done this way in map:
arr = arr.map((item) => item + 1);You can also assign it to a new array:
const newArr = arr.map((item) => item + 1);You can access the index as well:
const newArr = arr.map((item, index) => item + index);reduce
reduce allows you to loop through an array and accumulate the result from previous iterations up to the current iteration. In the end, a single result is added.
For example, let's say you want to get the sum of elements in an array. Using for loop you can do it like this:
let sum = 0;
for (let i = 0; i < arr.length; i++){
sum += arr[i]
}Using reduce, you can do it this way:
const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);The accumulator parameter is the result after the last iteration before the current one, and its value, in the end, will be the value returned. By default, its initial value is the value of the first element and the iteration starts from the second element. So, in the example above, in the first iteration accumulator will be 1 and currentValue will be 2. 1 + 2 is 3 so in the second iteration accumulator will be 3 and currentValue will be 3 (since it's the item in the array that is after 2), and so on. In the end, the returned value will be 10.
You can also pass initialValue to set the initial value to be different than the first element. If initialValue is provided, the iteration will start from the first element. Passing initialValue is also helpful if you're not sure if there are items in your array, as reduce throws an error if the array is empty and no initialValue is supplied.
An example of using initialValue:
const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);with initialValue set to 0, in the first iteration accumulator will be 0 and currentValue will be 1 (starting from the first element in the array).
every
every allows you to loop through an array and check if all the items in the array return true in the callback function provided. This is helpful when you are looping through an array to make sure it's valid for a certain validation process. The loop will stop and return false whenever it encounters an item that does not return true in the callback function.
For example, to test that all the items in the array are greater than 0, you can do it like this with for loop:
let allGreater = true;
for (let i = 0; i < arr.length; i++){
if (arr[i] <= 0) {
allGreater = false;
break;
}
}
console.log(allGreater);To do this using every:
const allGreater = arr.every((item) => item > 0);
console.log(allGreater);It will test that each item is > 0 and if one of the items isn't, it will stop the loop and return false.
If you don't need to actually store the value in a variable like in the example above, you can just:
console.log(arr.every((item) => item > 0));You can also pass the index as a second parameter with item.
some
Unlike every, some allows you to loop through an array and check if at least one item returns true for the callback function. Once an item is found that passes the test provided, the loop will stop and return true. If no item is found that passes the test provided, the loop will return false.
For example, to check that at least one item is greater than 0 in the array using for loop:
let hasGreater = false;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0) {
hasGreater = true;
break;
}
}
console.log(hasGreater);To do this using some:
const hasGreater = arr.some((item) => item > 0);
console.log(hasGreater);You can also eliminate assigning it to a variable if you don't need it:
console.log(arr.some((item) => item > 0));You can access the index by passing it as a second parameter to the callback function.
filter
filter loops through an array and returns a new array with only the elements that return true in the callback function.
For example, to get only the elements that are greater than zero in the array, you can do it this way with for loop:
const greaterArr = [];
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterArr.push(arr[i]);
}
}
console.log(greaterArr);To do this using fitler:
const greaterArr = arr.filter((item) => item > 0);
console.log(greaterArr);You can also access the index by passing a second argument to the callback array.
find
With find you can loop through an array to find the first element that returns true for a certain function. Once the element is found, the loop will stop and the element will be returned. If no element is found that satisfies the validation, undefined will be returned. This is similar to some, except that find returns the element whereas some just returns a boolean.
For example, to find an element in the array that is greater than 0 using for loop:
let greaterThan = null;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterThan = arr[i];
break;
}
}
console.log(greaterThan);To do this using find:
const greaterThan = arr.find((item) => item > 0);
console.log(greaterThan);You can also access the index by passing a second argument to the callback array.
findIndex
This is similar to find, except that it returns the index of the element. If no element is found, it returns -1.
For example, to find the index of an element in the array that is greater than 0 using for loop:
let greaterThan = -1;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterThan = i;
break;
}
}
console.log(greaterThan);Using findIndex:
const greaterThan = arr.findIndex((item) => item > 0);
console.log(greaterThan);You can also access the index by passing a second argument to the callback array.
Browser Compatibility
It should be noted that all of these functions are compatible with modern browsers, however, its compatibility in IE starts from IE9. So, if you need to make your code compatible with older browsers, you'll probably need to use a Polyfill.