loading...

JavaScript Arrays

ziizium profile image Habdul Hazeez ・3 min read

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.

An array created in Javascript

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.

Arrays in JavaScript

You can retrieve these element using their index number.

Arrays in JavaScript

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

Arrays in JavaScript


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.

Arrays in JavaScript

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:

Arrays in JavaScript

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

Arrays in JavaScript

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:

Arrays in JavaScript

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:

Arrays in JavaScript

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:

Arrays in JavaScript

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

Arrays in JavaScript


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

Up next, Objects.

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

pic
Editor guide
 

Hey,
Just wanted to say, i really like the way you break down and cover the pieces of js indvidually.
Thank You

 

Just wanted to say, i really like the way you break down and cover the pieces of js individually.

I am glad i could help.

Thank You

You are welcome sir.

Extra: You have a typo → indvidually