Comprehension array in JavaScript

A comprehension list is the result of a function applied to a list, which filter or modify its elements to produce a new list.

JavaScript since version 1.6 has several features that put this principle into practice and thus to simplify the code. More appeared in the following versions of the ECMAScript standard. They are compatible with all recent browsers.

The function called in callback can have only one argument, an array element. But it can also have two other arguments: the index of the element in the array, and a reference to the array itself.

Examples of valid callbacks:

With one argument, you can read the contents of the array:

function f(element) {
  document.write(element)
}

And optionally return a value that will be added to an array generated:

function f(element) {
  return(element * 2)
}

With three arguments you can still read the original array:

function f(element, index, arr) {
  document.write("arr[" + index + "]=" + element) 
}

Or modify it:

function f(element, index, arr) {
  arr[index] = element * 2 
}

Remember an array is always passed by reference and not copied as an argument of a function. It is possible to modify the original array with a comprehension function.

Functions that automatically generate a new array

Map (1.6)

Creates a new array whose elements are those of the original array to which we applied a function as parameter.

var map1 = [ 1,2,3,4,5]
function fmap(x) {
  return x * 10
}
document.write("Original: ", map1)
document.write("Final: ", map1.map(fmap));

Filter (1.6)

Generates a new array by applying the given function to each element of the original array. The callback function returns true or false, if it returns true, the element from the original array is added to to the new array generated.

The following example retrieves a list of odd numbers from a list of odd and even numbers.

var filter1 = [1,2,3,4,5,6,7,8]
function ffil(x) {
  return x == (Math.round(x / 2) * 2)
}
document.write("Original: ", filter1)
document.write("Final: ", filter1.filter(ffil));

Reduce (1.8)

Applies a function to two values of the array at a time, from left to right, to reduce them to a single value. The function applies between the element 1 and element 2, and then between the result and the element 3, and so on until the last element of the array.

Unlike filter, the function must have two arguments beside the optional arguments, index and reference to the array. In the example below we multiply the first two items and each of the following to the result. We get 120 which is the product of 1 by 2 by 3 etc ... up to 5.

var reduce1 = [ 1,2,3,4,5]
function fred(x, y) {
  return x * y
}
document.write("Original: ", reduce1)
document.write("Final: ", reduce1.reduce(fred));

Reduce returns an array if the callback function returns an array.

ReduceRight (1.8)

Applies a function to two items of the array at a time, from right to left, to reduce to them to a single value. Does the same thing than reduce, but starting with the last element of the array to finish with the first. The above example would produce the same result but is could be different depending on the function.

These two methods can also be used to make the sum of the values ​​in a array and thus provide a sum method. You can perform more complex operations such as turn array with two dimensions to an one-dimension arra (example provided by Mozilla), it suffices that the function concatenates two elements.

Function that can only modify the original array

ForEach (1.7)

Calls a function with each element of the array successively. Unlike every, it does not produce a new array.

The example below adds 10 to each number of the original array. This does not work with a single argument, because unlike map, forEach does not generate a new array.

var each1 = [ 1,2,3,4,5,6,7,8]
function efun(x) {
  return x + 10
}
document.write("Original: ", each1)
var result = each1.forEach(efun)
document.write("Final: ", result);

Using three arguments you can modify the original array:

var each2 = [ 1,2,3,4,5,6,7,8]
function efun2(x, idx, arr) {
  arr[idx] = x + 10
}
document.write("Avant: ", each2)
each2.forEach(efun2)
document.write("Après: ", each2);

Functions that test the contents of an array and return true or false

Every (1.6)

Returns true if every element of the array satisfies the provided condition.

The difference with map is that it does not return an item to add to a new array, it returns true or false for the entire array: true if all elements satisfy the condition, false if one is not satisfied.

var every1 = [ "un", "deux", "trois", "quatre", "cinq"]
function fever(x) {
  return (x.length <= 4) 
}
document.write("Original: ", every1)
document.write("Final: ", every1.every(fever));

Some (1.6)

Returns true if at least one element of the array satisfies the given condition.

var some1 = [ "one", "two", "three", "four", "five"]
function sever(x) {
  return (x.length <= 4) 
}
document.write("Original: ", some1)
document.write("Final: ", some1.some(sever));