9. Arrays

(Approximate Time: ~ 1.5 hours)

Key Terms

  • Array
  • element
  • index
  • var
  • let
  • const
  • Array Literal Notation
  • Array Constructor
  • Push Method
  • Unshift Method
  • Pop Method
  • Shift Method
  • Variable Scope
  • Global Scope
  • Window Object
  • Local Scope
  • Block Scope
  • Hoisting
  • Global & Local Scope
  • Local & Block Scope

JavaScript – Working with Arrays

 

The Array in JavaScript is a global object which contains a list of items. It is similar to any variable, in that you can use it to hold any type of data. However, it has one important difference: it can hold more than one item of data at a time. An Array is an ordered collection of values: each value is called an element and each element has a numeric position in the Array, known as its index. An element inside an Array can be of any type and different elements of the same Array can be of different types: String, Boolean, even Objects or other Arrays. This means that it’s possible to create an Array that has a String in the first position, a Number in the second, an Object in the third, and so on. Arrays in Javascript are zero-based, which means that the index of the first element is 0. This is very important, because it means that there always will be an offset of one unit: the first element has an index of 0, the second element has an index of 1, and so on. Here is a scheme of an Array with different types of elements: at index 0 we find a String, at index 1 an Integer, at index 2 a Boolean, and at index 3 another Array. This comes in very handy when you need to store collections of data in one place; now let’s see how to create and work with Arrays.

 

Declare an Array

Arrays can be very useful since you can store as many items of data in an Array as you want (within the limits of the language, which is 2^(32) elements). So how do you create an Array? You need to first declare a variable with the let or const keyword, but the syntax to define the values of the Array is very specific: you have to tell Javascript that you want it to be an Array. To do so, you have two choices: the Array literal [] or the new keyword.

 

Short syntax : with the Array literal notation []

The Array literal notation is simply a comma-separated list of Array elements within square brackets [].

let myArray = [ “Jack”, “Sawyer”, “John”, “Desmond” ];

The content of the Array is defined between the opening and the closing brackets and each value is separated by a comma, ,.

Values are introduced in the same way as simple variables, meaning, for example, that Strings must be declared between quotation marks, " ".

To define a new empty Array, you just have to use empty brackets: let myArray = [];

 

Long syntax : with the Array() constructor

To construct an Array with the Array() constructor, take a look at the following examples:

let lastArray = new Array(“Jack”, “Sawyer”, “John”, “Desmond” );
let twinPeaksArray = new Array(“Laura”, 2, [“Bob”, “Leland”, “Dale”]);

The new keyword of this syntax asks Javascript to define a new Array, whose items are passed in as parameters.

To define a new empty Array with no particular number of items, you can just initialize a new Array with no parameters: let myArray = new Array();

 

Access elements of an Array

The index value of each element allows you to refer to each piece of data inside your Array : you can access it using the [] operator:

let myArray = [“Jack”, “Sawyer”, “John”, “Desmond”];
console.log(myArray[0]); // Prints “Jack”
console.log(myArray[3]); // Prints “Desmond”

Remember that the index values start at 0, not 1. This means that Array indexes start at 0 and go up to the number of elements, minus 1. So, our Array of four elements has indexes from 0 to 3.

As we saw earlier, Arrays can have several dimensions, which means that an Array element can contain an Array, whose elements can contain Arrays, etc. So how do we access these Arrays inside Arrays, or multidimensional Arrays?

Let’s take the example of an Array representing a family, where the children of the family are contained in their own Array inside the main Array:

let familyArray = [“Marge”, “Homer”, [“Bart”, “Lisa”, “Maggie”]];

We could represent this Array like this:

If I want to access the value “Lisa”, how will I manage to do that?

We can visualize the position of “Lisa” at index 1 inside the nested Array, itself positioned at index 2 of the main Array:

To access the “Lisa” value, we will then write:

let lisa = familyArray[2][1];
console.log(lisa); // Prints “Lisa”

 

Add items to an Array

Adding an index

We saw that you can access every element in an Array by calling its corresponding index. This also allows us to add (or modify) elements by declaring, for example:

let myArray = [ “Kate”, “Sun”];
myArray[2] = “Juliet”;
console.log(myArray); // Prints “Kate, Sun, Juliet”

Here we simply added an element at index 2 of the Array, which didn’t exist before but now contains the value “Juliet”.

What happens if we declare an element at a given index and there are no elements in-between? The Array will create all the elements and initialize those that don’t have a value with undefined:

let myArray = [“Kate”, “Sun”];
myArray[5] = “Juliet”;
console.log(myArray.length); // Prints “6”
console.log(myArray); // Prints [“Kate”, “Sun”, undefined, undefined, undefined, “Juliet”]

You can find the length of an Array by using the Array property called length: here we can see that the Array now has six elements, and the three elements that have not been assigned a value are undefined.

The push() method

The push() method allows you to add one or several items to an Array. The push() method can receive an unlimited number of parameters and each parameter represents an item to add to the end of the Array. For example:

let myArray = [ “Kate”, “Sun”];
myArray.push(“Juliet”); // Adds “Juliet” at the end of the Array
myArray.push(“Libby”, “Shannon”); // Adds “Libby” and “Shannon” at the end of the Array
console.log(myaArray); // Prints [“Kate”, “Sun”, “Juliet”, “Libby”, “Shannon”]

The unshift() method

The unshift() method works similar to the push() method, except that the items are added at the beginning of the Array. For example:

let myArray = [ “Kate”, “Sun”];
myArray.unshift(“Juliet”); // Adds “Juliet” at the beginning of the Array
myArray.unshift(“Libby”, “Shannon”); // Adds “Libby” and “Shannon” at the beginning of the Array
console.log(myaArray); // Prints [“Libby”, “Shannon”, “Juliet”, “Kate”, “Sun”]

Remove items from an Array

There are two ways to remove items from an Array.

The pop() method removes the last element in the Array and shift() method removes the first element from the Array:

let myArray = [“Jack”, “Sawyer”, “John”, “Desmond”, “Kate”];
myArray.pop(); // Removes “Kate”
myArray.shift(); // Removes “Jack”
console.log(myArray); // Prints [“Sawyer”, “John”, “Desmond”]