DEV Community

Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: Javascript Array 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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode


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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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

JavaScript Code:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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;
}

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

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

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode
  • 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:

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

Enter fullscreen mode Exit fullscreen mode

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

Syntax

array.lastIndexOf(item, start);

Enter fullscreen mode Exit fullscreen mode
  • 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

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

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

Enter fullscreen mode Exit fullscreen mode

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:

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

Enter fullscreen mode Exit fullscreen mode

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

Resources

You may find the following resources useful:

Top comments (0)