The arrays in JavaScript

The array is a type of variable that is used to store multiple values. The JavaScript arrays can hold multiple data type values in a single array. For example, an array can contain numbers and strings:

var jsarray = [“string 1”, “string 2”, 1, 2];

An example of declaring and accessing arrays

Arrays are quite useful and especially used in the case where you have to create multiple variables for the same type of data. For example, to save US 52 states names you have to create 52 different variables:

Var state1 = “New York”;

Var State 2 = “Florida” ;

Var state 3 = “Texas”;

And so on.

Whereas by using a single array variable you can save all 52 state names in a single array as follows:

var USStates = [“New York”, “Texas”, “Florida”, “California”];

Is not that simple and useful?

A few main points about JavaScript arrays are:

• The arrays are a special type of variables.
• Arrays can store multiple values.
• The array elements can be of different types like numbers, strings etc.
• The array JavaScript index starts at 0.
• An array is basically an object.
• JavaScript has built-in functions to work with arrays e.g.  sort, length etc. explained in their separate chapters. (see the links below)

A few quick online array examples

A basic array example with numbers

An array iteration example with For loop

JavaScript string array example

An array example with different datatypes and objects

While this chapter explains what are arrays, you can find online examples to see arrays with code. But let us first look at how to create or define an array.

How to define arrays?

Following is the create array syntax:

var jsArr = [element1, element2, element3…..];

e.g.

var USStates = [“New York”, “Texas”, “Florida”, “California”];

As you can see in above syntax, var keyword is followed by an array name and then array elements on the right side in brackets. Each array element is separated by a comma.

This is the one way of declaring an array. You can declare arrays by using the new keyword as well. The syntax is shown below.

Create arrays with new keyword

The syntax to create an array by the new keyword is:

var jsArr = new array(“element1, element2, …..”);

e.g.

var USStates = new array (“New York”, “Texas”, “Florida”, “California”);

That is array name on the left side with the var keyword. While right side contains new keyword which is followed by an array and the array elements in parenthesis.

Although, there is no difference in creating arrays by both methods, however, the first method is simple to use and faster in execution.

Accessing array elements

As mentioned earlier, the array index starts at zero. After creating an array. the elements are accessed by using the index values.

For example, consider this array:

var USStates = [“New York”, “Texas”, “Florida”, “California”];

The USStates array has four elements. This is how the element sequence by index number is:

The USstates[0] contains “Ney York” value,

The USstates[1] contains “Texas” value and so on.

See the following online examples of declaring, initializing and accessing arrays.

Example to declare, initialize and accessing JavaScript arrays

Following is a very basic array example. We have created a simple numeric array of five elements. As you click on the link below the demo page loads and an alert will show the 0 index value of NumArr array.

Experience this example online

As you can see the array element is accessed by using NumArr[0] in an alert.

JavaScript iterate array example with For loop

The Following example shows how to iterate a JavaScript array by using the for loop. The For loop allows going through each array element where you can use array’s length method that returns array count.

The example declares an array with five elements that is numbers. After that, the for loop is used to loop through the array.

The length property is used in the for loop to know the length of the array. After that, the elements are displayed in HTML paragraph after assigning to a variable. See the demo by clicking the link or image along with JS code.

Experience this example online

JavaScript string array example

In the above examples, we used only numbers in arrays. You can use strings in JS arrays as well. Following example creates an array, USStates with four State names.

After that, the for loop is used to loop through array elements and finally, we will print the array of State names in an HTML paragraph.

Experience this example online

You can see, we created an array and then used length property to return array count in the for loop to iterate through the array. Finally, we printed the state names in HTML paragraph.

An array example with different objects

The above examples show using numbers and strings in the arrays. Arrays not only stores number or strings, but it can be used to store objects as well. You can even store arrays in an array. The array elements can also store functions as well.

The array is so flexible that a single array can contain numbers, strings, functions, arrays etc.

The following example is just an illustration of using all these elements in an array. We created an array Allarray, that is assigned a number, a string, a function, another array and a date object.

Then we used a for loop, that will show an alert for each Allarray element. See yourself by clicking the link or image below:

Experience this example online

JavaScript Associative array

Programming languages like Java, PHP etc. support associative arrays. The associative arrays are named index rather numbers that we learned in the above section. In the associative arrays, the array elements with index may look like this:

JSArray[“EmployeeName”] = “Mike”;

JSArray[“EmployeeAge”] = 35;

JSArray[“EmployeeSalary”] = 3500;

However, there is no JavaScript associative array. Instead of an associative array, you can use objects.

JavaScript multidimensional array

Though JavaScript does not provide a specific method to create multidimensional arrays. You can also create a multidimensional array in JavaScript. Generally, the multidimensional array used are 2d and 3d.

Following is a basic way to create JavaScript 2d array.

Creating JavaScript two-dimensional array

This is how you can create a 2d array:

var js2darry = [[],[]];

See the following example of creating a multidimensional array.

Experience this example online

Useful Array methods

Following are useful array functions and property with links to their respective chapters.

• array push
• array length (property)
• array sort
• array splice

Click on any array’s function to go to its chapter with examples.

Further reading: JavaScript Strings

---