4.3.3 JS Array Iteration

Array.forEach()

The forEach() method calls a function (a callback function) once for each array element.

Example 1: JS Arrays The forEach() Method

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

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

• Note that the function takes 3 arguments:
  • The item value
  • The item index
  • The array itself
• The example above uses only the value parameter. The example can be rewritten to:

Example 2: JS Arrays The forEach() Method part 2

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

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

Array.forEach() is supported in all browsers except Internet Explorer 8 or earlier:

Yes	9.0	Yes	Yes	Yes

Array.map()

• The map() method creates a new array by performing a function on each array element.
• The map() method does not execute the function for array elements without values.
• The map() method does not change the original array.
• This example multiplies each array value by 2:

Example 3: JS Arrays The map() Method part 1

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

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

• Note that the function takes 3 arguments:
  • The item value
  • The item index
  • The array itself
• When a callback function uses only the value parameter, the index and array parameters can be omitted

Example 4: JS Arrays The map() Method part 2

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

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

Array.map() is supported in all browsers except Internet Explorer 8 or earlier.

Yes	9.0	Yes	Yes	Yes

Array.filter()

• The filter() method creates a new array with array elements that passes a test.
• This example creates a new array from elements with a value larger than 18:

Example 5: JS Arrays The filter() Method part 1

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

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

• Note that the function takes 3 arguments:
  • The item value
  • The item index
  • The array itself
• In the example above, the callback function does not use the index and array parameters, so they can be omitted:

Example 6: JS Arrays The filter() Method part 2

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

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

Array.filter() is supported in all browsers except Internet Explorer 8 or earlier.

Yes	9.0	Yes	Yes	Yes

Array.reduce()

• The reduce() method runs a function on each array element to produce (reduce it to) a single value.
• The reduce() method works from left-to-right in the array. See also reduceRight().
• The reduce() method does not reduce the original array.
• This example finds the sum of all numbers in an array:

Example 7: JS Arrays The reduce() Method part 1

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

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

• Note that the function takes 4 arguments:
  • The total (the initial value / previously returned value)
  • The item value
  • The item index
  • The array itself
• The example above does not use the index and array parameters. It can be rewritten to:

Example 8: JS Arrays The reduce() Method part 2

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

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

The reduce() method can accept an initial value:

Example 9: JS Arrays The reduce() Method part 3

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

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

Array.reduce() is supported in all browsers except Internet Explorer 8 or earlier.

Yes	9.0	Yes	Yes	Yes

Array.reduceRight()

• The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.
• The reduceRight() works from right-to-left in the array. See also reduce().
• The reduceRight() method does not reduce the original array.
• This example finds the sum of all numbers in an array:

Example 10; JS Arrays The reduceRight() Method part 1

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

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

• Note that the function takes 4 arguments:
  • The total (the initial value / previously returned value)
  • The item value
  • The item index
  • The array itself
• The example above does not use the index and array parameters. It can be rewritten to:

Example 11: JS Arrays The reduceRight() Method part 2

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

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

Array.reduceRight() is supported in all browsers except Internet Explorer 8 or earlier.

Yes	9.0	Yes	Yes	Yes

 