5.1.1. Creating an array with the array literal notation

The syntax of an “array literal” uses [square brackets] to delimit a list of elements, which can be primitive values, variable names, objects and functions, separated by commas:

  [elem1, elem2, …] // any number of elements, including zero

Examples:

const tm = ["un", 2]; // two values: a string, a number
const ts = ["Jean","Bob"], tabn = [12,24]; // homogeneous arrays
const t2d = [ ts, tn];          // an array of two arrays
const te = [];                  // empty array: tab.length = 0
const tu = ["a",,"c"]; // syntactically correct, but to avoid!

WARNING.– When typing, do not remove an element, while leaving its comma: the array tu above has: tu.length = 3 and tu[1] = undefined.

Here are some best practices with arrays:

• – declare an array with const: the elements, and their number, can be modified but it restricts the use of its name to that array, once for all;
• – use the literal notation, not new Array(), it avoids ambiguities:

    const tm = new Array("two"); // equiv: tm = ["two"];
    const tn = new Array(2); // equiv.: tn = [undefined, undefined];

5.1.2. Checking if a variable is an array

The operator typeof does not distinguish an array from an object:

  const t = [a, b, c]; console.log( typeof t ); // "object"

Instead, use the static method:

  console.log( Array.isArray(t) ); // true

5.1.3. The length property, the index count

The length is in read-write access, and the index starts at 0 not 1:

  console.log( [a, b, c].length );        // -> 3
  const t = ["one", 2]; console.log( t[1]); // -> 2

The property length is permanently updated, returning the index of the last element plus one. Adding or removing an element in the array immediately modifies length. In turn, modifying length infers the addition or removal of elements, at or from the end of the array.

This feature can be used for some operations:

• – emptying an array: simply set length to zero

    const t1 = []; console.log(tab1.length); // -> 0 (t1 empty)
    const t2 = ["one", "two", "three"];         // t2.length = 3
    t2.length = 0; // now t2 is empty

  The “garbage collector” will take care of the memory previously assigned to t2.

• – initializing an array to a given number of elements

    const t = []; t.length = N; // [undefined, undefined,… N times]

NOTE.– An array is an object, with the specific ability to use numbers as property names, which is forbidden for a regular object:

  const obj = {"p1":1, "p2":"two"};
  console.log(obj["p2"]);     // two
  console.log(obj[1]); // undefined (no such property)

NOTE.– We can add own properties to an array, as we do with objects. For example:

  const t1 = [], t2 = [[], []];
  // let's add the property 'dimension', then print values:
        t1.dimension = 1;       t2.dimension = 2;
  console.log( t1["length"] +", "+ t1["dimension"] );  //-> 0, 1
  console.log( t2["length"] +", "+ t2["dimension"] );  //-> 2, 2

5.1.4. Accessing individual values in an array: the indices

In the section Array.prototype, we will learn that it is often possible to avoid handling the individual elements of an array and rather work with the array as a whole. However, it is worth knowing how indices behave. Reminder: they start at zero.

  const t = [2, 4];	
  let n = 1; console.log( t[n] ); // 4
  n = 6; console.log( t[n] ); // undefined
  n = -6; console.log( t[n] ); // undefined

The value undefined can result from either of the following cases:

• – the index is out of bounds [0, t.length-1];
• – the index is correct, but the value actually is undefined (“missing value”).

NOTE.– An index is an “object property name”: the index is of type “number”, but it is evaluated as a “string” when used for accessing an element, which is to say a “property” of the array:

  ( tab[1] === tab["1"] ); // -> true

NOTE.– Missing values: some methods ignore them, whereas a for loop enumerates them: e.g. tu[1] in the example const tu = ["a", ,"c"]; Recommendation: avoid unnecessary missing values.

5.2.1. The “Mutators” family

Nine methods that modify the array on which they are invoked; the array length may change. Several methods are useful at initialization stage:

• – incremental insertion element by element (‘push', ‘unshift');
• – copy a set of values (‘fill', ‘copyWithin');
• – incremental removal of element by element (‘pop', ‘shift');
• – replacing a slice of values (‘splice').

– The methods “fill”, “push”, “unshift”

• – create an array of N identical values, for instance 0s:

    const t = []; t.length = N;    t.fill(0);   // [0, 0, … N]

• – fill an array with values provided as a result of some requests:

  let x; const t = [];       // start with an empty array
  do{   x = Math.random() * (10 - 1) + 1;    // data in [1,10]
        if(x > 5){t.push(x.toFixed(1));}     // keep if > 5
  } while (x > 5);                           // stop if ≤ 5
  if(t.length > 0){t.unshift("random > 5");}    // set t[0] if t ≠ ∅
  

• – The method “splice”

This makes it possible to “revise” an array by modifying one element or a slice. For instance, to update the first name of an object whose full name contains a given last name:

• – line 1: sets the original array;
• – line 2: selects with findIndex the element containing “Dent”: gives k;
• – line 3: uses splice to replace one value at index [k].

  const t = ["Jean Bon", "Ange Leau", "P. Dent", "Paul Tron"]; //1
  let k = t.findIndex(x=>x.includes("Dent")); // (see below)   //2
  t.splice(k, 1, "Redon Dent"); // replaces the value for t[k] //3

• – The methods “reverse” and “sort”

  These methods modify the order of the elements: “reverse” is trivial and “sort” is more complex.

  const t = ["Jean Bon", "Ange Leau", "P. Dent", "Paul Tron"];
  t.sort(); // ["Ange Leau", "Jean Bon", "P. Dent", "Paul Tron"]
  

• – with no argument, “sort” makes a Unicode-based alphabetical sort;
• – with a function 'compare' as argument, sort is made depending on the result of the compare function element by element:

  function compare(a, b) {
     if (a < b [by some ordering criterion]) {return -1;}
     if (a > b [by same ordering criterion]) {return 1;}
     return 0; // because a = b
  }
  

The function compare is used in a quickSort algorithm. The array is partitioned into slices, each slice having a pivot (value 'a'). At some point of the (ascending) sort, for each element (value 'b') preceding 'a', if compare(a,b) > 0, the element is moved, else left in place. A symmetric operation occurs if 'a' precedes 'b':

EXAMPLE 1.– Sorting is done by numbers (ascending order, ignoring Infinity, NaN)

  function compareNumbers(a,b) {return a - b;}
  [1, 4, 2, 11, 3].sort(compareNumbers);  // [1,2,3,4,11] (num)
  [1, 4, 2, 11, 3].sort();                // [1,11,2,3,4] (alpha!)

EXAMPLE 2.– Sorting is done by the last name in “first last” string.

  function compareLastNames(a,b){
     let al = a.split(" ")[1], // second word in a
         bl = b.split(" ")[1]; // second word in b
     if (a1 < b1)            return -1;
     else if (a1 == b1)      return 0;
     else                    return 1;
}
  const t = ["Jean Bon","Ange Leau","P. Dent","Paul Tron"]; t.sort(compareLastNames);
                       // ["Jean Bon","P. Dent","Ange Leau","Paul Tron"]

5.2.2. The “Accessors” family

Seven methods do not modify the array, but yield a representation of the data in the array, which can be a new array, an index value and a string.

The use of these methods is rather straightforward.

5.2.3. The “Iteration” family

Repeat an operation for each element, not modifying the array. The result can be:

• – a new array, same length (map), or shorter (filter);
• – a selected value or index (find, findIndex);
• – a cumulated value over the whole array (reduce, reduceRight);
• – a plain iteration (forEach) of a block of operations element by element.

5.2.4. Iterating over the elements of an array

Important recommendations for handling arrays are as follows:

Use Array.prototype methods, not loops: it is easier and much less error prone.

There are two kinds of loops:

• – iteration loop: 'for(let i = 0; i < t.length; i++)' or 'while..';
• – enumeration loop: 'for(let prop in t)'.

The enumeration loop is not concerned by the remark. The iteration loop uses an index and the length of the array: we have pointed out the risks when declaring or forgetting-to-declare the index.

5.2.5. Iteration without a loop, with Array/Array.prototype methods

All basic operations for creating and handling arrays exist since ES6.

  const args = Array.from(arguments);   // within a function
  const t2 = Array.from({length:3},function(){return 1}); // [1,1,1]
  const t3 = Array.from({length:3},function(v,i){return i*i});
  const t4 = Array.from("hello"); // ["h", "e", "l", "l", "o"]
  const rd = Array.from({length:n},
                         function(x){return Math.random() * 10;});

  let rc = "figures ", rl = " and letters "; const tabc = [];
  ["a","b", 1, 2].forEach(function(v, i){
    if(typeof v === 'string') rl += (i===0?"" : ", ") + v; else tabc.push(v);
  });
  rc +tabc.toString()+ rl; // figures 1,2 and letters a, b

  const tabl = ["a","b", 1, 2].map(function(v, i){
     return (typeof v === 'string'? v : v.toString());
  }); // tabl will contain only 'strings'

  function isPrime(v, i) {
     let f = 2;
     while (f <= Math.sqrt(v))
         {if (v % f++ < 1){return false;}}
     return v > 1;
}
[4, 5, 8, 12].findlndex(isPrime); //-> 1 (and stops)

  const upTo10 = Array.from({length:10},
        function(v,i){return i+1}); // [1,2,3,4,5,6,7,8,9,10]
  const primes = upTo20.filter(isPrime); // [2,3,5,7]

  function multAcc(acc, v){return acc *= v;}
  const factorial = upTo10.reduce(multAcc); // 3628800 (!)

  function tPrim(acc,  v){return acc +' (${v})';}
  const ini = "First primes: ";
  const str = upTo10.filter(isPrime).reduce(tPrim,ini);
              // First primes: (2) (3) (5) (7)

  ["c1","c2"].reduce(function(s,x){s+'<li>${x}</li>'}, "<p>")+"</p>";
  // <p><li>c1</li><li>c2</li></p>

5.2.6. Chaining array methods

This is a “functional” capacity provided by JavaScript: chaining methods means that the result of the first method is an object that accepts the next method. For example (above), the result of filter is an array, and we can invoke the method reduce on that array in a single instruction (over three lines for better readability):

  Array.from({length:10}, function(v,i){return i+1})
         .filter(isPrime)
         .reduce(tPrim,ini);

With the help of the “arrow function syntax”, you may even write:

  Array.from({length:10},(v,i)=>i+1)
         .filter(isPtime) .reduce((s,p) =>s+' (${p}) ',ini);

5.2.7. Arrays and the arrow function syntax

The arrow syntax can be used everywhere for function expressions, and in particular in the context of array methods, it may ease code readability, for example:

  const f = function(x,i){do_something_with_x_and_i; return value;}
  let out = tab.reduce(function(acc,x,i){return acc + f(x,i);},ini);

equivalent, in the arrow syntax , to:

  const f = (x,i)=>{do_something_with_x_and_i; return value;}
  let out = tab.reduce((acc,x,i)=>acc + f(x,i),ini);

Readability is improved if the code of the function is simply a short return instruction (e.g. 'out'). With a more complex code (e.g. function isPrime) the arrow syntax may not help much: you would rather put that code in a function to be called (e.g. similar to the f(x,i) above).

NOTE.– The arrow syntax introduces a difference in the handling of the pronoun this (which we will study later).

5.2.8. The “Iterables”

Several built-in objects have been added by ES6: TypedArray, Map, Set and an “iterable” behavior have been introduced in the norm, making them “Iterable” together with String and Array: all have a length, and know how to “iterate” on their elements, which allows Array.from to work.

TypedArray, Map, Set and Array all have their forEach method, and the DOM NodeList object as well (see Part 2).

The Arguments object, accessible within any function, under the name arguments is also an Iterable: arguments.length is ≥0 (not undefined) and we can make an array from it:

  const args = Array.from(arguments)

5.3.1. Frameworks proposing an “augmented Array.prototype”

There exists some stable and safe frameworks providing additional methods to arrays, though “masked” in their “namespace”. For instance, statistical tools or LINQ-like queries (“Microsoft Language Integrated Query”), which you can find on GitHub, such as:

• – jStat: https://github.com/jstat/jstat;
• – jslinq: https://github.com/maurobussini/jslinq.