All The Ways You Can Loop Arrays in Javascript
Tags: beginners, javascript, webdev
Published: 2021-04-06 11:05:23

_This article was originally published on [my personal blog](https://blog.shahednasser.com/all-the-ways-you-can-loop-arrays-in-javascript/)_

Whenever you want to loop through an array in Javascript, the common approach taken is using the `for` loop. 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:

```js
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}
```

will become:

```js
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:

```js
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:

```js
for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] + 1;
}
```

Can be done this way in map:

```js
arr = arr.map((item) => item + 1);
```

You can also assign it to a new array:

```js
const newArr = arr.map((item) => item + 1);
```

You can access the index as well:

```js
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:

```js
let sum = 0;
for (let i = 0; i < arr.length; i++){
	sum += arr[i]
}
```

Using`reduce`, you can do it this way:

```js
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`:

```js
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:

```js
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`:

```js
const allGreater = arr.every((item) => item > 0);
console.log(allGreater);
```

It will test that each`item`is`&gt; 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:

```js
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:

```js
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`:

```js
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:

```js
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:

```js
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`:

```js
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:

```js
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`:

```js
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:

```js
let greaterThan = -1;
for (let i = 0; i < arr.length; i++){
    if (arr[i] > 0){
        greaterThan = i;
        break;
    }
}
console.log(greaterThan);
```

Using`findIndex`:

```js
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.