JavaScript arrays

Author: MDBootstrap

JavaScript arrays are used to store multiple values in a single variable.


                      var cars = ["Saab", "Volvo", "BMW"];

What is an Array?

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

                      var car1 = "Saab";
                      var car2 = "Volvo";
                      var car3 = "BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array.

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.


var array_name = [item1, item2, ...];


                    var cars = ["Saab", "Volvo", "BMW"];

Spaces and line breaks are not important. A declaration can span multiple lines:

                      var cars = [

Note: Do not put the comma after the last element in the array.

Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

                    var name = cars[0];

                      <p id="example-1"></p>
                        var cars = ["Saab", "Volvo", "BMW"];
                        document.getElementById("example-1").innerHTML = cars[0];

Live preview

Note: Array indexes start with 0, so [0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars:

                    cars[0] = "Opel";

                      <p id="example-2"></p>
                        var cars = ["Saab", "Volvo", "BMW"];
                        cars[0] = "Opel";
                        document.getElementById("example-2").innerHTML = cars;

Live preview

Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:

                      var cars = ["Saab", "Volvo", "BMW"];
                      document.getElementById("demo").innerHTML = cars; // Result Saab,Volvo,BMW

The length Property

The length property of an array returns the length of an array (the number of array elements).

                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.length;   // the length of fruits is 4   // Returns 4

Note: Because arrays start counting from 0, the length property is always one more than the highest array index.

Accessing the First Array Element

                      fruits = ["Banana", "Orange", "Apple", "Mango"];
                      var first = fruits[0];  // Returns Banana

Accessing the Last Array Element

                    fruits = ["Banana", "Orange", "Apple", "Mango"];
                    var last = fruits[fruits.length - 1];   // Returns Mango

Exercises - test your knowledge

Exercise 1

Get the value "Volvo" from the array.

                    var cars = ["Saab", "Volvo", "BMW"];
                    var x = 

                    var cars = ["Saab", "Volvo", "BMW"];
                    var x = cars[1];

Exercise 2

Change the first item of cars to "Ford".

                      var cars = ["Volvo", "Jeep", "Mercedes"];

                    var cars = ["Volvo", "Jeep", "Mercedes"];
                    cars [0] = "Ford";

Exercise 3

Alert the number of items in an array, using the correct Array method.

                    var cars = ["Volvo", "Jeep", "Mercedes"];

                    var cars = ["Volvo", "Jeep", "Mercedes"];

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author