Tutorial: Javascript Array Iteration
Tags: javascript, webdev, programming, codenewbie
Published: 2022-01-18 08:03:12

---
title: Tutorial: Javascript Array Iteration
published: True
date: 2021-01-22 23:46:37 UTC
tags: ["Javascript", "webdev", 'programming', 'codenewbie']
canonical_url: https://www.devwares.com/blog//javascript-iteration
---

## JavaScript Array Iteration Methods

Array iteration methods run through all of the items inside the array.


**Array.forEach() :**For each array element, the forEach() method calls a function (a callback function).

**JavaScript Code:**

```javascript
var txt = '';
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + '<br>';
}

```

It's worth noting that the function requires three arguments:

- The value of the item
- The index of the item
- The array itself

Only the value argument is used in the preceding example. The following is a rewrite of the example:

**JavaScript Code:**

```javascript
var txt = '';
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + '<br>';
}

```

In all browsers, Array.forEach() is supported.

**Array.map() :**By applying a function to each array element, the map() method builds a new array. For array items with no values, the map() method does not execute the function. The original array is not changed by the map() operation. Each array value is multiplied by two in this code:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

```

It's worth noting that the function requires three arguments:

- The value of the item
- The index of the item
- The array itself

When only the value parameter is used in a callback function, the index and array parameters can be omitted:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

```javascript

In all browsers, Array.map() is supported.

**Array.filter() :**The filter() method returns a new array that contains array elements that pass a test.

**JavaScript Code:**

```javascript
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

```

It's worth noting that the function requires three arguments:

- The item's worth
- The index of items
- The array in question

The index and array parameters are not used in the callback function in the code above, therefore they can be omitted:

**JavaScript Code:**

```javascript
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

```

In all browsers, Array.filter() is supported.

**Array.reduce() :**The reduce() method applies a function to each array element in order to generate (reduce) a single value. The reduce() method works in the array from left to right. ReduceRight is another option (). The original array is not reduced by the reduce() method.

The total of all the numbers in an array is found with this code:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

```

It's worth noting that the function requires four arguments:

- The sum (the initial value minus the value previously returned)
- The item's worth
- The index of items
- The array in question

The index and array parameters are not used in the code above. It can be rephrased as:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

```

An initial value can be passed to the reduce() method:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

```

In all browsers, Array.reduce() is supported.

**Array.reduceRight() :**The reduceRight() method applies a function to each array element in order to generate (reduce) a single value. ReduceRight() works in the array from right to left. reduce() is another option. The original array is not reduced by the reduceRight() method.

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

```

It's worth noting that the function requires four arguments:

- The sum (the initial value minus the value previously returned)
- The item's worth
- The index of items
- The array in question

The index and array parameters are not used in the preceding example. It can be rephrased as:

**JavaScript Code:**

```javascript
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

```

In all browsers, Array.reduceRight() is supported.

**Array.every() :**The every() method examines all array values and determines whether they pass a test.

```javascript
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

```

It's worth noting that the function requires three parameters:

- The array itself
- The item value
- The item index The additional parameters can be omitted when a callback function uses only the first parameter (value):

**JavaScript Code:**

```javascript
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

```

In all browsers, Array. every() is supported.

**Array.some() :**The some() method determines whether or not a set of array values pass a test.

**JavaScript Code:**

```javascript
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

```

It's worth noting that the function requires three arguments:

- The value of the item
- The index of the item
- The array itself

Except for Internet Explorer 8 and earlier, all browsers implement Array.some().

**Syntax**

```
array.indexOf(item, start);

```

- item Required. The thing you're looking for.
- start Optional. Where to start the search. Negative values will begin counting from the end and search to the end at the provided point.

Array.indexOf() returns -1 if the object isn't discovered. If the item appears more than once, it returns the earliest occurrence's location.

**Array.lastIndexOf() :**Array.lastIndexOf() is similar to Array.indexOf(), except it returns the position of the supplied element's last occurrence. Find the item "Apple" in an array.

**JavaScript Code:**

```javascript
var fruits = ['Apple', 'Orange', 'Apple', 'Mango'];
var a = fruits.lastIndexOf('Apple');

```

Except for Internet Explorer 8 and earlier, all browsers support Array.lastIndexOf().

**Syntax**

```
array.lastIndexOf(item, start);

```

- item Required. The item to search for
- start Optional. Where to begin the search. Negative values will begin counting from the end and search to the beginning at the provided point.

**Array.find() :**The value of the first array member that passes a test function is returned by the find() method.

This example looks for (and returns the value of) the first element larger than 18:

**Example**

```javascript
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

```

It's worth noting that the function requires three arguments:

- The value of the item
- The index of the item
- The array itself

In older browsers, Array.find() isn't supported.

**Array.findIndex() :**The index of the first array member that passes a test function is returned by the findIndex() method.

**JavaScript Code:**

```javascript
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

```

It's worth noting that the function requires three arguments:

- The value of the item
- The index of the item
- The array itself

In older browsers, Array.findIndex() isn't supported.

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [Tutorial: JavaScript Math Object](https://www.devwares.com/blog/javascript-math-object)
- [Tutorial: JavaScript Functions](https://www.devwares.com/blog/javascript-functions)
- [Tutorial: JavaScript Loop](https://www.devwares.com/blog/javascript-for-loop)
- [Tutorial: JavaScript Data Type](https://www.devwares.com/blog/javascript-data-type)

- [Installation](https://www.devwares.com/docs/contrast/angular/Installation/)
- [Accordion](https://www.devwares.com/docs/contrast/angular/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/angular/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/angular/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/angular/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/angular/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/angular/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/angular/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/angular/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/angular/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/angular/components/buttons/)
- [Checkbox](https://www.devwares.com/docs/contrast/angular/components/checkbox/)
- [Card](https://www.devwares.com/docs/contrast/angular/components/card/)
- [Collapse](https://www.devwares.com/docs/contrast/angular/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/angular/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/angular/components/footer/)
- [InputGroup](https://www.devwares.com/docs/contrast/angular/components/inputgroup/)
- [Iframe](https://www.devwares.com/docs/contrast/angular/components/iframe/)
- [Modal](https://www.devwares.com/docs/contrast/angular/components/modal/)
- [Mask](https://www.devwares.com/docs/contrast/angular/components/mask/)
- [Multiselect](https://www.devwares.com/docs/contrast/angular/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/angular/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/angular/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/angular/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/angular/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/angular/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/angular/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/angular/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/angular/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/angular/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/angular/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/angular/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/angular/components/stepper/)
- [Icon](https://www.devwares.com/docs/contrast/angular/components/icon/)
- [Input](https://www.devwares.com/docs/contrast/angular/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/angular/components/listgroup/)
- [Forms](https://www.devwares.com/docs/contrast/angular/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/angular/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/angular/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/angular/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/angular/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/angular/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/angular/table/datatables/)
- [Editable Table](https://www.devwares.com/docs/contrast/angular/table/editabletable/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/angular/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/angular/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/angular/widgets/)