JavaScript Arrays
Tags: beginners, javascript
Published: 2019-12-26 01:24:40

---
title: JavaScript Arrays
published: true
description: A beginners guide to JavaScript Arrays
tags: beginners, javascript
series: FrontEnd Development Zero to Hero
---
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.
&mdash; [Wikipedia](https://en.wikipedia.org/wiki/Data_structure)

__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 <b>Firefox 71.0</b> and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the <b>multi-line code editor</b> in the console._

<hr>

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

* The square bracket notation &rarr; `[]`
* The `new Array()` syntax &rarr; `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:

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

// check the array
a;
```

Then click the __Run__ button to execute the code.

![An array created in Javascript](https://thepracticaldev.s3.amazonaws.com/i/d0ilnganxpon7qzyyzue.PNG)

Now lets add some element using _index numbers_ starting at zero.

```javascript
// 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](https://thepracticaldev.s3.amazonaws.com/i/2eqa4anwnu5nnfefev6d.PNG)

You can retrieve these element using their _index number_.

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/vdjr6g55psgocg48yokt.PNG)

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

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/pcu9f5ijr9kws3ml6ygb.PNG)

<hr>

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

The format is:

* `array.length`

Using our previous example:

```javascript
a.length;

// Expected output: 3
```

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

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/lig3ee0i38o16s6sky4m.PNG)

__Under the hood JavaScript arrays are objects__, therefore we can use the `delete` operator to remove an element from the array.

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

// Expected output: true
```

In the console this will also return _true_:

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/zauw1momm3k5u3e7anyp.PNG)

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

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/eepc9t14cfc8m0sxqse8.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/cfx8eyeyju7kln3r4xcx.PNG)

Next, we add some element.

```javascript
// 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](https://thepracticaldev.s3.amazonaws.com/i/4ptiydndg7qobs2s7ewa.PNG)

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

```javascript
// 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](https://thepracticaldev.s3.amazonaws.com/i/ig96vtdp21giu1o7i58c.PNG)

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

![Arrays in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/oapwhp71scnidlu570ts.PNG)

<hr>

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

Up next, Objects.