Sunday , 26 May 2019
Home / Programming / JavaScript / Arrays – JavaScript Tutorial

Arrays – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Arrays are a special kind of object. They can store multiple values. Let’s say you had a list of 800 names. If you had to create a variable for each of these names, then that would take a long time. Also, what if you were expecting to update this list with more or remove names? You’d have to manually create more variables or end up with a bunch of empty ones. To solve this dilemma, you can use arrays.

First, let’s learn how to create an array. Update the body tags in your HTML document to this.

Now, let’s learn how to create an array. Clear your script and add this line of code.

Just like any other object, you have to use the new keyword followed by the name of the object. The name of the object in our case is Array. Inside the parenthesis are the list of values you would like to store in the array. You can store as many values as you want. You can store ANY kind of value. You’ll notice we have 3 strings and a number. JavaScript doesn’t care. You can also have an empty array.

You now have a list of values stored under 1 variable. How do you access a certain value? Simple, you use square bracket notation.

Add this line of code after your array.

Square bracket notation is used when you have an array of values under 1 variable. To specify which value you would like, then you type in square brackets [] right after your variable and then a number inside. The number represents the value you want to grab. JavaScript will automatically assign a number for each value. It starts at 0 and then goes up. So, the first value in your array is 0. The 2nd value is 1 and so on and so forth.

In this example, we output the value represented by 2. You should see 35.54 outputted onto the screen.

Let’s say we wanted to add a new value into the array. This is very easy to do. You simply specify the number followed by the value, like so.

We know that 4 is an empty spot in our array. So, JavaScript creates this spot for you. If we were to change this number to 2, then instead of creating a spot, it’ll simply update whatever value is in number 2.

You can also change the number to 100. If you haven’t defined values for the spots in between these spots, then JavaScript will automatically assign these values as undefined. You also get undefined when you try accessing a spot that has never been created.


Arrays have a couple of properties that you can use, but only one is really used a lot. That is the length. The length simply returns how many items are in the array. However, you should note that it starts at 1 and counts up. So, if there’s 3 items in the array, then it’ll return 3. Let’s see how this can be useful. Update the line that adds a new item in the array to this.

Inside the square brackets is where the magic happens. You don’t necessarily have to type a number literally, but the value inputted into these brackets must be a number. Since the length returns a number, it’ll work. So, why would this be useful instead of hard coding a number?

Since the length literally counts how many items are in the array, then it’ll always return a number that is undefined in the array. For example, our array has 4 items. Each item has a number assigned to it starting from 0. The last item in the array is assigned the number 3. Since, the length returns 4, it’s a sure thing you’ll always add a value and not overwrite any values.


Arrays are useful when working with large amounts of data. If you would like more information about arrays, then go here.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.