Author: Michal Szymanski
JavaScript arrays are used to store multiple values in a single variable.
Example:
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.
Syntax:
var array_name = [item1, item2, ...];
Example:
var cars = ["Saab", "Volvo", "BMW"];
Spaces and line breaks are not important. A declaration can span multiple lines:
var cars = [
"Saab",
"Volvo",
"BMW"
];
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>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("example-1").innerHTML = cars[0];
</script>
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>
<script>
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("example-2").innerHTML = cars;
</script>
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"];
alert(cars.length);
Previous lesson Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download