JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable.

let cars = ["Saab", "Volvo", "BMW", "Tesla"];

What is an Array?

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
let car4 = "Tesla";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array. Syntax:

let array_name = [item1, item2, ...];  

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays. But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, cars[0] returns Saab:

let cars = ["Saab", "Volvo", "BMW", "Tesla"];

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and methods:

let x = cars.length;   // The length property returns the number of elements
let y = cars.sort();   // The sort() method sorts arrays

There is a built-in array method, forEach, that provides something like a for/of loop as a higher-order function.

["A", "B", "C"].forEach(l => console.log(l));

Adding Array Elements

The easiest way to add a new element to an array is using the push method:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits

New element can also be added to an array using the length property:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    // adds a new element (Lemon) to fruits

Warning! Adding elements with high indexes can create undefined "holes" in an array:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    // adds a new element (Lemon) to fruits

How to Recognize an Array

A common question is: How do I know if a variable is an array? The problem is that the JavaScript operator typeof returns object:

let fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;    // returns object

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

TTo solve this problem ECMAScript 5 defines a new method Array.isArray()

Array.isArray(fruits);   // returns true

The problem with this solution is that ECMAScript 5 is not supported in older browsers.

Solution 2:

To solve this problem you can create your own isArray() function:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

The function above always returns true if the argument is an array. Or more precisely: it returns true if the object prototype contains the word "Array".

Solution 3:

The binary instanceof operator returns true if an object is created by a given constructor:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // returns true

The function above always returns true if the argument is an array. Or more precisely: it returns true if the object prototype contains the word "Array".

Strict Mode

JavaScript can be made a little stricter by enabling strict mode. This is done by putting the string "use strict" at the top of a file or a function body. Here’s an example:

function canYouSpotTheProblem() {
    "use strict";
    for (counter = 0; counter < 10; counter++) {
        console.log("Happy happy");
    }
}

canYouSpotTheProblem();
// → ReferenceError: counter is not defined”

Normally, when you forget to put let in front of your binding, as with counter in the example, JavaScript quietly creates a global binding and uses that. In strict mode, an error is reported instead.