postImage

Tutorial: Javascript Array Iteration

blogImage

By Emmanuel Chinonso

Web Developer

JavaScript Array Iteration Methods

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

Contrast Bootstrap UI Kit

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

JavaScript Code:

1var txt = '';
2var numbers = [45, 4, 9, 16, 25];
3numbers.forEach(myFunction);
4
5function myFunction(value, index, array) {
6 txt = txt + value + '<br>';
7}

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:

1var txt = '';
2var numbers = [45, 4, 9, 16, 25];
3numbers.forEach(myFunction);
4
5function myFunction(value) {
6 txt = txt + value + '<br>';
7}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var numbers2 = numbers1.map(myFunction);
3
4function myFunction(value, index, array) {
5 return value * 2;
6}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var numbers2 = numbers1.map(myFunction);
3
4function myFunction(value) {
5 return value * 2;
6}

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:

1var numbers = [45, 4, 9, 16, 25];
2var over18 = numbers.filter(myFunction);
3
4function myFunction(value, index, array) {
5 return value > 18;
6}

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:

1var numbers = [45, 4, 9, 16, 25];
2var over18 = numbers.filter(myFunction);
3
4function myFunction(value) {
5 return value > 18;
6}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduce(myFunction);
3
4function myFunction(total, value, index, array) {
5 return total + value;
6}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduce(myFunction);
3
4function myFunction(total, value) {
5 return total + value;
6}

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

JavaScript Code:

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduce(myFunction, 100);
3
4function myFunction(total, value) {
5 return total + value;
6}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduceRight(myFunction);
3
4function myFunction(total, value, index, array) {
5 return total + value;
6}
7var numbers1 = [45, 4, 9, 16, 25];
8var sum = numbers1.reduceRight(myFunction);
9
10function myFunction(total, value, index, array) {
11 return total + value;
12}

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:

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduceRight(myFunction);
3
4function myFunction(total, value) {
5 return total + value;
6}

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

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

1var numbers = [45, 4, 9, 16, 25];
2var allOver18 = numbers.every(myFunction);
3
4function myFunction(value, index, array) {
5 return value > 18;
6}

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:

1var numbers = [45, 4, 9, 16, 25];
2var allOver18 = numbers.every(myFunction);
3
4function myFunction(value) {
5 return value > 18;
6}

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:

1var numbers = [45, 4, 9, 16, 25];
2var someOver18 = numbers.some(myFunction);
3
4function myFunction(value, index, array) {
5 return value > 18;
6}

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

1array.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:

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

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

Syntax

1array.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

1var numbers = [4, 9, 16, 25, 29];
2var first = numbers.find(myFunction);
3
4function myFunction(value, index, array) {
5 return value > 18;
6}

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:

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

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

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...