Working With Arrays In JavaScript

Arrays are the collection of same data-types values or a collection of data items. In memory variable, we can store one value at a time but in arrays, we can store many values and retrieve as per index number of stored values.

In this article, you will learn about JavaScript arrays.

  • What is an Array?
  • How to create an array?
  • How to access array element or items?
  • Can we store other data-types of value in arrays?
  • Using array’s Method
    • ToString
    • Length
    • Concat
    • Pop
    • Push
    • Sort
    • Reverse
    • Delete

What is an Array?

An Array is a collection of same data-types values or collections of data items. In memory variable, we can store one value at a time and in an array, we can store many values and retrieve as per index number of stored values.

We can use array to store lists and tables of values and pass the values to function or server side very easily for further processing.

With the following example you will see that array is best solution to store values (collection of values).

In the following example, when we select the languages we know and hit the SUBMIT button, the values are stored in an array that is utilized in the server side.

Javascript

How to create arrays?

Method 1 - In this method, we predefined the values of arrays.

Syntax:         var ArrayVariableName =  [“ ”,” “ ”, . . . . . . . .];

Example:              var computer = [“Keyboard”,”Mouse”,”Processor”,”Monitor”,”Cabinet”];

Arraymethod1.HTML Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <h1>Method 1</h1>  
  10.     <br />  
  11.     <br />  
  12.     <p id="arraymethod1"></p>  
  13.     <script>  
  14.         var computer = ["Keyboard""Mouse""Processor""Monitor""Cabinet"];  
  15.         document.getElementById("arraymethod1").innerHTML = computer;  
  16.     </script>  
  17. </body>  
  18. </html>  

OUTPUT

Javascript

Method 2- In this method we are not predefining the values of arrays. In run time we add or update the value in arrays.

//initializing arrays

Syntax     

  1. var ArrayVariableName = [];  
  2. //set value of arrays against index number  
  3. var ArrayVariableName[IndexNumber] = “Values”;  

In the following example, we have created arrays called computer. In the first row I have initialized the arrays and in the next row I have given the value of arrays with index number.

Example               

  1. var computer = [];  
  2. computer[0] = “Keyboard”;  
  3. computer[1] = “Mouse”;  
  4. computer[2] = “Processor”;  
  5. computer[3] = “Monitor”;  
  6. computer[4] = “Cabinet”;  

Arraymethod2.HTML Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <h1>Method 2</h1>  
  10.     <br />  
  11.     <br />  
  12.     <p id="arraymethod2"></p>  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.         document.getElementById("arraymethod2").innerHTML = computer;  
  21.     </script>  
  22. </body>  
  23. </html>  

OUTPUT

Javascript

Method 3 -  In this method, while initializing the arrays we have to give the length (size) of arrays.

Syntax

  1. var computer = new Array(5)  
  2.   
  3. computer[0] = “Keyboard”;    
  4. computer[1] = “Mouse”;    
  5. computer[2] = “Processor”;    
  6. computer[3] = “Monitor”;    
  7. computer[4] = “Cabinet”;    

Arraymethod3.HTML Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <h1>Method 3</h1>  
  10.     <br />  
  11.     <br />  
  12.     <p id="arraymethod3"></p>  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.         document.getElementById("arraymethod3").innerHTML = computer;  
  21.     </script>  
  22. </body>  
  23. </html> 
Javascript

How to access array element or items?

We can access the each array's element value by index number.

Manually access array's element values.

FOR loop for accessing array's element values.

GetEachArraysValue.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7.   
  8. </head>  
  9. <body>  
  10.     <p id="arraymethod3"></p>  
  11.     <script>  
  12.         var arrayValue = ""  
  13.         var computer = [];  
  14.         computer[0] = "Keyboard";  
  15.         computer[1] = "Mouse";  
  16.         computer[2] = "Processor";  
  17.         computer[3] = "Monitor";  
  18.         computer[4] = "Cabinet";  
  19.         arrayValue = "<ul>"  
  20.   
  21. //for loop   
  22.         for (i = 0; i < computer.length; i++) {  
  23.   
  24.          //computer[i] give the value of each array element. i value changed in loop.     
  25.             arrayValue += "<li>"+computer[i] + "</li><br/>";  
  26.   
  27.         }  
  28.         arrayValue += "</ul>"  
  29.         document.getElementById("arraymethod3").innerHTML = arrayValue;  
  30.     </script>  
  31. </body>  
  32. </html>  

In the above you can see we fetch and store all the array elements in  a variable called arrayValue.  After for loop completion, arrayValue variable value is given/assigned to <P> tag ID called arraymethod3.

OUTPUT

Javascript

Can we store other data-types of value in arrays?

Yes, you can store all data-type values in an array. Herewith, given an example, you can see that in the code I stored String, Boolean and Integer values in an array.

OtherDataTypes.html code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7.   
  8. </head>  
  9. <body>  
  10.     <p id="arraymethod3"></p>  
  11.     <script>  
  12.         var arrayValue = ""  
  13.   
  14.         //defined arrays called FORMVALUES and stored different data types in the arrays  
  15.         var formValues = [];  
  16.   
  17.         //stored Character/string values  
  18.         formValues[0] = "Suhana Ashish Kalla";  
  19.   
  20.         //stored Numberic/interger values  
  21.         formValues[1] = 101;  
  22.   
  23.         //stored Logical/Boolean values  
  24.         formValues[2] = true;  
  25.   
  26.         formValues[3] = "MBA";  
  27.         arrayValue = "<ul>"  
  28.   
  29.         //for loop  
  30.         for (i = 0; i < formValues.length; i++) {  
  31.   
  32.          //computer[i] give the value of each array element. i value changed in loop.  
  33.             arrayValue += "<li>" + formValues[i] + "</li><br/>";  
  34.   
  35.         }  
  36.         arrayValue += "</ul>"  
  37.         document.getElementById("arraymethod3").innerHTML = arrayValue;  
  38.     </script>  
  39. </body>  
  40. </html>  

OUTPUT

Javascript

Using array’s Method

  • ToString
  • Length
  • Join
  • Concat
  • Pop
  • Push
  • Shift
  • UnShift
  • Sort
  • Reverse
  • Delete

ToString

To convert arrays into string format. 

ToString.html code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>ToString</title>  
  7. </head>  
  8. <body>  
  9.     <h1>ToString Method</h1>  
  10.     <p>To convert arrays into string format.</p>  
  11.     <br />  
  12.     <br />  
  13.     <p id="arraymethod3"></p>  
  14.     <script>  
  15.         var computer = [];  
  16.         computer[0] = "Keyboard";  
  17.         computer[1] = "Mouse";  
  18.         computer[2] = "Processor";  
  19.         computer[3] = "Monitor";  
  20.         computer[4] = "Cabinet";  
  21.         document.getElementById("arraymethod3").innerHTML = computer.toString();  
  22.     </script>  
  23. </body>  
  24. </html>  

OUTPUT

Javascript

Length

To get the total number of index numbers in an array, always remember that an array's index number starts from 0. Suppose, length returns 2; it means a total of 3 indexes are used in the array. 

Length.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Arrays Length</title>  
  7. </head>  
  8. <body>  
  9.     <h1>Length Method</h1>  
  10.     <p>To get maximum index numbers of array used.<br /> Always remember arrays index number start from 0.<br /> Suppose length return 2 it means total 3 index used of arrays.</p>  
  11.     <br />  
  12.     <br />  
  13.     All five(5) items filled.  
  14.     <p id="arr1val"></p>  
  15.     <b>Length of Computer Arrays:</b>  
  16.     <p id="arraymethod3"></p>  
  17.     <br />  
  18.     <br />  
  19.     Only three(3) items filled but its showing length 21.  
  20.     <p id="arr2val"></p>  
  21.     <b>Length of Mall Arrays:</b>  
  22.     <p id="arraymethod4"></p>  
  23.     <script>  
  24.         //Computer arrays Total length is 5 items  
  25.         var computer = [];  
  26.         computer[0] = "Keyboard";  
  27.         computer[1] = "Mouse";  
  28.         computer[2] = "Processor";  
  29.         computer[3] = "Monitor";  
  30.         computer[4] = "Cabinet";  
  31.         document.getElementById("arr1val").innerHTML = computer.toString();  
  32.         document.getElementById("arraymethod3").innerHTML = computer.length;  
  33.   
  34.         //Mall arrays Total length is 21 items  
  35.         var mall = [];  
  36.         mall[0] = "Oberoi Mall - Goregoan(East)";  
  37.         mall[14] = "The Growel Mall - Kandivali(East)";  
  38.         mall[20] = "Inborbit - Malad(West)";  
  39.         document.getElementById("arr2val").innerHTML = mall.toString();  
  40.         document.getElementById("arraymethod4").innerHTML = mall.length;  
  41.     </script>  
  42. </body>  
  43. </html>  

OUTPUT

Javascript

Concat

To merge arrays we use the following code 

Syntax

<arraysName>.concat(<OtherArraysName>)

Example 1

  1. var first = [“1”,”2”,”3”];  
  2. var second = [“4”,”5”,”6”];  
  3. var third = first.concat(second);  

Example 2

  1. var first = [“1”,”2”,”3”];  
  2. var third = first.concat([“4”,”5”,”6”]);  

Concat.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Concat</title>  
  7. </head>  
  8. <body>  
  9.     <h1>Concat Method</h1>  
  10.     <p>To merge existing arrays.</p>  
  11.     <br />  
  12.     <br />  
  13.     <p id="arraymethod3"></p>  
  14.     <script>  
  15.         //First arrays defined called "computer"  
  16.         var computer = [];  
  17.         computer[0] = "Keyboard";  
  18.         computer[1] = "Mouse";  
  19.         computer[2] = "Processor";  
  20.         computer[3] = "Monitor";  
  21.         computer[4] = "Cabinet";  
  22.   
  23.         //Second arrays defined called "internalParts"  
  24.         var internalParts = [];  
  25.         internalParts[0] = "RAM";  
  26.         internalParts[1] = "Hard Disk";  
  27.         internalParts[2] = "Mother Board";  
  28.         internalParts[3] = "CPU Fan";  
  29.   
  30.   
  31.         //Third Arrays defined which get result of concat (merging) of arrays  
  32.         var computerparts = computer.concat(internalParts);  
  33.   
  34.         document.getElementById("arraymethod3").innerHTML = computerparts.toString();  
  35.     </script>  
  36. </body>  
  37. </html>  

OUPUT

Javascript

Pop

To remove the last element of array and return its value.

Pop.html code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>pop</title>  
  7. </head>  
  8. <body>  
  9.     <h1>pop Method</h1>  
  10.     <p>To remove the last element of arrays.</p>  
  11.     <br />  
  12.     <br />  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.   
  21.         document.write("<b>Total elements of arrays : </b> " + computer.toString()+"<br><br>")  
  22.         var removeitem = computer.pop();  
  23.         document.write("<b>After removing one item: </b>" + computer.toString() + "<br><br>");  
  24.         document.write("<b>Removed arrays element item: </b> " + removeitem + "<br><br>")  
  25.     </script>  
  26. </body>  
  27. </html>  

OUTPUT

Javascript

Push

To add the element in the last and return length of arrays.

Push.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>push</title>  
  7. </head>  
  8. <body>  
  9.     <h1>push Method</h1>  
  10.     <p>To add an new item in the last position.</p>  
  11.     <br />  
  12.     <br />  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.   
  21.         document.write("<b>Total elements of arrays : </b> " + computer.toString()+"<br><br>")  
  22.         var additem = computer.push("Motherboard");  
  23.         document.write("<b>After added one item : </b>" + computer.toString() + "<br><br>");  
  24.         document.write("<b>Added one item and now length of arrays : </b> " + additem + "<br><br>")  
  25.     </script>  
  26. </body>  
  27. </html>  

OUTPUT

Javascript

Sort

To sort the elements of arrays.

Sort.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>sort</title>  
  7. </head>  
  8. <body>  
  9.     <h1>sort Method</h1>  
  10. <p>To sort the arrays elements items.</p>  
  11.     <br />  
  12.     <br />  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.   
  21.         document.write("<b>Before sorting elements of arrays : </b> " + computer.toString() + "<br><br>")  
  22.   
  23.         //Sorting Arrays Elements  
  24.         var sortedItem = computer.sort();  
  25.         document.write("<b>After sorting items : </b>" + sortedItem.toString() + "<br><br>");  
  26.     </script>  
  27. </body>  
  28. </html>  

OUTPUT

Javascript

Reverse

To make array elements items in reverse order or you can use it for descending order.

For descending order, you first sort it then use reverse.

Reverse.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Reverse</title>  
  7. </head>  
  8. <body>  
  9.     <h1>Reverse Method</h1>  
  10.     <p>To reverse the arrays elements items.</p>  
  11.     <br />  
  12.     <br />  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.   
  21.         document.write("<b>Before reverse elements of arrays : </b> " + computer.toString() + "<br><br>")  
  22.   
  23.         //Sorting Arrays Elements  
  24.         var reversedItem = computer.reverse();  
  25.         document.write("<b>After using reverse : </b>" + reversedItem.toString() + "<br><br>");  
  26.     </script>  
  27. </body>  
  28. </html>  

OUTPUT

Javascript

Delete

To delete the particular array elements by index number.

Syntax:  delete <arrayName>[IndexNumber];

Example: delete computer[1];

Delete.html Code

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Delete</title>  
  7. </head>  
  8. <body>  
  9.     <h1>Delete Method</h1>  
  10.     <p>To Delete the arrays elements item by index number.</p>  
  11.     <br />  
  12.     <br />  
  13.     <script>  
  14.         var computer = [];  
  15.         computer[0] = "Keyboard";  
  16.         computer[1] = "Mouse";  
  17.         computer[2] = "Processor";  
  18.         computer[3] = "Monitor";  
  19.         computer[4] = "Cabinet";  
  20.   
  21.         document.write("<b>Before deleting elements of arrays : </b> " + computer.toString() + "<br><br>")  
  22.   
  23.         //Sorting Arrays Elements  
  24.         delete computer[2];  
  25.         document.write("<b>After delete : </b>" + computer.toString() + "<br><br>");  
  26.     </script>  
  27. </body>  
  28. </html>  

OUTPUT

Javascript