JavaScript Array: Explained with uses in different components

The arrays of JavaScript

The array in JavaScript can be created by using var keyword followed by array name as shown below:

var NumArr = [1,2,3,4,5];

You can create JavaScript array with mixed data types as well, for example, array containing both numbers and strings:

var MixArr = [1, “Mixed”, 2, “Array”];

You may also use new keyword to create array objects:

var JSArr = new array (1,2,3,”String”);

In that way, the elements are enclosed in parenthesis.

Just like in other programming languages, the array index of JavaScript also starts at 0.

In above syntax the elements with index are:

 

As you have seen the basic syntax for creating arrays in JavaScript, I will show you its usage with different HTML elements. The demos include declaring, creating and accessing arrays JavaScript with its built-in functions/property.

I will use different HTML elements like <div>, textbox, select dropdowns, and others. Let me start with the basic demos.

An example of creating and accessing array elements

In this example, I will create a simple array of 5 numbers. After that, a for loop is used to iterate through that array with the array length property to display the array elements in a div element of HTML.

See the demo and code online which is followed by a little description:

JavaScript array numeric

See online demo and code

Let me go through the steps to explain, how this demo worked:

First an array of five numbers is created in the <script> section just above </body> tag:

 

A num variable is declared which is used in the for loop. While a string variable displayArray is declared to hold array elements and finally displaying in <div>.

After declaration, a for loop is used to iterate through array elements where I specified the JavaScript array length property:

 

The Arrnum.length will specify the total length or number of elements in the array. Also, note the loop is started from 0 because JS array index starts at 0.

After for loop, I used the document.getElementById function with innerHTML to print the array elements in a div element.

For better presentation, I used some CSS for the div with text-color and font size properties, which is placed in the <head> section of web page.

You may see and get the complete code in the demo page.

A mixed array example with strings and numbers

As mentioned earlier, JavaScript supports mixed arrays. That means you can create an array with numbers and strings or other objects.

The following example shows how:

JavaScript array

See online demo and code

In the example, same for loop is used to display the mixed array elements:

 

The array elements are displayed in the HTML div tag.

Accessing a specific element example

You may access specific array elements by using the index numbers. As mentioned earlier, the array index starts at 0.

In this demo, I am using the same array as created in above example. After that, I will print only string elements in that array. See it online:

See online demo and code

You can see in the demo page code section, no for loop is used this time for iteration of the array elements. Instead, specific array elements are accessed by using brackets as follows:

 

As such, array index starts at 0, so “A” although is in the second position in the array, the index for “A” is 1. That is:

 

A practicing example of using arrays – autocomplete

Enough of basic examples to understand what are JavaScript array? How to declare, initialize or access by specific element or whole array by using for loop etc?

Now let me move to a practical example that can be utilized in pro website with different components.

I am starting with an auto complete textbox example. You might have seen a textbox where you enter one or more letters and it will show suggested list based at those entered letters.

If not, have a look at this demo online that uses a JS array of US State names. Just enter a letter or two and see how it will show suggestions based at entered letters for US state names:

JavaScript array auto

See online demo and code

The example is a combination of JavaScript, jQuery, jQuery UI. It uses the jQuery UI autocomplete plug-in that requires a source for suggested words based at user entered letters.

Regarding our topic of JavaScript array, look at the <script> section under <head> tag where a function containing an array USStates is used.

 

After creating an array with US States names, a jQuery line is used to initiate autocomplete plugin:

 

I don’t mean to understand that code of jQuery, (if you have no idea about jQuery). Just consider the line:

 

Where, the USStates is a JavaScript array.

Also, I used some CSS for better presentation only. The markup section is using that plugin in a div element:

 

If you are interested at learning more about auto complete jQuery UI plugin go to this link.

The arrays of JavaScript with HTML dropdowns

To demonstrate arrays in JavaScript, this demo is using two select dropdowns. The first one, “Select Continent” is given the hard-coded values. As you select a continent from this dropdown, a JavaScript function is called at the onChange event of this dropdown.

The other dropdown, “Countries”, will be filled by countries related to the selected continent. In the function, three JS arrays are used, one for each continent. See the demo online first, followed by a little description:

JavaScript array dropdown

See online demo and code

The first dropdown is using the following code:

 

You can see, onChange event is calling the contFunction of JavaScript. Inside the contFunction function, the selected value from this dropdown is assigned to a variable.

On that basis, the array of related countries will be selected. Following are the arrays:

 

After that, an if statement is used with the for loop to create the <options> for another dropdown to populate it with related countries.

 

The statement above if statement is to make sure the dropdown is emptied before filling with new options.

In certain scenarios, you may need to fill a dropdown based at other dropdown’s selection. You can use your own approach for that, to filter a single array or use separate arrays. The demo is aimed at explaining the use of JavaScript array with HTML dropdowns only.

You may also need to get array elements from a database or some text file if you are not sure how many array elements are there.

In the following demos, I am going to show you using a few useful array functions to create dynamic arrays, removing array elements etc.

Creating a dynamic array demo

The dynamic array is created by declaring an array with no elements at the start. Then a simple for loop is used to create the array elements. For the demo, I am creating five array elements. Along with creating an array, the values are also assigned by using another variable which value is incremented with each loop.

See the demo and code online:

See online demo and code

So first up, an empty array is created with a few other variables to be used in for loop and to display array elements:

 

After that, a for loop to create the array elements along with assigning values to each element s used:

 

Finally, I displayed the array elements in an HTML paragraph tag:

 

Note that, If you have declared an array with elements at first, the for loop will replace the existing elements with new elements. For example, if you have declared an array like that, in the above demo:

var dynarray = [1,2,3];

The output will be same as in above example.

For that, you can either start the loop ahead of existing elements e.g.

for (var i = 3; i < 8; i++) {

Or use the array push function as shown in next demo.

An example of Array push function

Following is almost the same example as above except I will add new elements (that are dynamic), to an array that already contains three elements.

The way for loop is used in above example would have replaced the existing items by new elements. To add elements at the end of existing array, you can use the JS array push method.

See the following demo:

JavaScript array push

See online demo and code

In the code section, you can see two differences. First, the array declaration with elements:

var dynarray = [1,2,3];

The second is, using array push method to add new elements inside the first for loop:

dynarray.push(j);

Where, the variable j represents the value of new elements.

The complete for loop is:

 

In the output section, you can see arrays are added at the end of existing elements.

A demo of array unshift method of JavaScript

If you want to add new elements at the beginning then use array unshift method of JavaScript rather array push method, which is shown below.

In the demo, I just replaced the push with unshift method and see the output:

See online demo and code

You can see, new array elements are displayed at the beginning.

A user selected dynamic array demo

In above dynamic array example, I used a for loop with a specific number to create arrays (in empty or by array push or unshfit methods). In this demo, a user is asked to select the number of array items to create by using a select dropdown.

As you select a dropdown value, the lower div will show the array elements created. In the backward, a JS function is called where that selected number is taken to create array elements.

See the demo online:

JavaScript array dynamic

See online demo and code

You can see the complete JS code that contains the function to create array elements as well as markup for div and paragraph as well in the demo page code section.

The select tag is created with following function call:

 

Following is the dynFunction code:

 

The demo shows creating up to 200 array elements, that you can select from the dropdown.

An example to remove array elements by pop method

The pop array method is used to remove existing array elements from an array. The pop method will remove the element from the last.

See a demo online:

JavaScript array pop

See online demo and code

You can see an array element is removed from the last of existing array.

You can remove elements from beginning by using the shift method. See demo below.

Remove array element by shift method

See the following demo of removing an element from beginning by using the shift method of JavaScript:

See online demo and code

You can see in the demo, the first element is removed in the array.