JavaScript Arrays

In computer science arrays are indexed data structures starting at zero.

In basic definition data structure determines how data is stored in a computers memory. Technically speaking data structures are defined as:

... a data organization, management, and storage format that enables efficient access and modification.
— Wikipedia

When you use the right data structure at the right time in your application you'll get the best performance possible. JavaScript performance is an entire topic on its own and will not be covered in this post nor in this series.

JavaScript arrays are quiet easy to start with but, as you'll discover later there are lot of methods for manipulating arrays in JavaScript.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.

There are two ways you can create an array in JavaScript. They are:

• The square bracket notation → []
• The new Array() syntax → new Array()

The second syntax is the object oriented format and can be intimidating, on the other hand the square bracket notation is beginner friendly, therefore we will use it in our code examples.

Switch over to your browser and make sure you have turned on the multi-line code editor.

Type the following code:

// create an empty array
var a = [];

// check the array
a;

Then click the Run button to execute the code.

Now lets add some element using index numbers starting at zero.

// Add the elements
a[0] = "Linux";
a[1] = "macOS";
a[2] = "Microsoft Windows";

// check if there are elements in the array
a;

Switch over to the console editor and run the code.

You can retrieve these element using their index number.

When you make an attempt to retrieve a non-existence element you will get undefined.

Every array has a length property which is the number of elements in the array.

The format is:

• array.length

Using our previous example:

a.length;

// Expected output: 3

When the code is executed in the console you will get the same output.

Under the hood JavaScript arrays are objects, therefore we can use the delete operator to remove an element from the array.

delete a[1]; // delete element at index 1

// Expected output: true

In the console this will also return true:

Now, when we check the array, we get undefined in the place of the array that was deleted.

When we deleted an element in the array, it created an hole in the array which led to undefined which is undesirable.

This can be remedied if we use the splice() method. The splice() method will take a starting index and the number of elements to remove from the array. After the removal all elements will be rearranged and their index will change respectively.

The best way to see this in action is to add more elements to our array, then delete some with the splice() method. After that we'll list the element in the array and you will observe that their index has changed.

First let's empty the array, we can do this by assigning an empty array ([]) to our variable a:

Next, we add some element.

// seven elements will be added to
// the array

a[0] = "Linus Torvalds";
a[1] = "Dennis Ritchie";
a[2] = "William H. Gates";
a[3] = "Time Berners-Lee";
a[4] = "Stephen Hawking";
a[5] = "Lawrence Page";
a[6] = "Paul Allen";

In the console:

Next, we will remove three element between index 2 and index 4.

// This will remove three elements

a.splice(2, 3);

// the removed element 
// Array(3) [ "William H. Gates", "Time Berners-Lee", "Stephen Hawking"]

In the console:

When the you check the array, you will realize the elements have been rearranged.

There is more to JavaScript arrays than what we've discussed here but, this is enough to get you started.

Up next, Objects.