Arrays

You can use arrays to store multiple variables in JavaScript. We have the following three variables:

var fruit1 = "pineapple";
var fruit2 = "peach";
var fruit3 = "watermelon";

... we can as well put them in an array:

var fruitsArray = ["pineapple", "peach", "watermelon"];

We get to certain elements of the array by entering their index (position). The pineapple will be at index 0, so to get to it, we use the syntax:

fruitsArray[0]; // the index is given in square brackets

The strength of JavaScript arrays are their built-in methods. One of them .length, has already been mentioned.

Here is a list of the most commonly used array methods:

Array	Method	Action	What is returned
[a,b,c,d]	.length	Returns the length of the array	4
[1,15,22,-1]	.sort()	Returns a sorted array	[-1,1,15,22]
["pineapple","peach","watermelon"]	.push("coconut")	Adds a new value at the end of the array	["pineapple","peach","watermelon","coconut"]
["pineapple","peach","watermelon”]	.pop()	Removes the last element of the array	["pineapple","peach"]
["pineapple","peach","watermelon”]	.shift()	Removes the first element of the array	["peach","watermelon"]
["pineapple","peach","watermelon”]	.unshift("coconut")	Adds a new value as the first element of the array	["coconut","pineapple","peach","watermelon”]
["pineapple","peach","watermelon”]	.reverse()	Reverses the order of array elements	["watermelon","peach","pineapple"]

Here's an example of using the push method:

Push method

Exercise 1

Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

Try to assign an array with a few titles of your favorite series to the declared variable, so that the titles appear in subsequent lines.

Go to the exercise #1

Tip: Remember that the array must be enclosed in square brackets and its values separated by commas.

Exercise 2

Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

In the JavaScript file for exercise 2 you will find an array with years and two auxiliary variables. Declare these variables, use the appropriate elements of the array (do not enter numerical values manually), so that underneath the age range in which you are is displayed correctly.

Go to the exercise #2

Tip: This way you can assign a specific array value to a variable.

var index = 9;
var variable = array[index];
// or
var variable2 = array[4];

Exercise 3

In the third exercise, determine the length of the array.

Go to the exercise #3

Tip: Array methods are used by specifying the array name, followed by a period, then name of the method and, if the method requires this, one or more values in brackets.

var someNumbers = [5,2,9];
someNumbers.sort(); // there is an array stored in the someNumbers variable [2,5,9]

Exercise 4

In the JavaScript file you will find an array with vegetables and a second variable, which is displayed below. Use appropriate methods to add a new vegetable at the beginning and at the end.

Go to the exercise #4

Tip: If you do not know what methods to use, return to the table with array methods.

Exercise 5

Nothing prevents you from inserting other arrays into the arrays. This is called multidimensional arrays and they look like this:

var array = [5, "xyz", [33,29,"abc"], true];

To get to the value inside the inner array, first enter the index on which the array itself is located, and then the index of values inside. To get to the value 29 you should use the following structure:

array[2][1];

First, you choose the name of the array, then the index on which the internal array is located ([2]), and finally the index of the value you are interested in inside the second array ([1]).

In the code for the exercise there is a multidimensional array with brands and car models, try to assign the value "Juke" to the variable below, so that it displays correctly.

Go to the exercise #5

Do you know what you should do? Try to place another array inside the array with car models (e.g. with the date of production) so that they will gain another dimension. Next, modify the variable so that it displays one of the values entered by you.

Tip: the variable value will then look something like this: array [x] [y] [z]

Next chapter: Functions »

5. Arrays