Working With Arrays In JavaScript

Introduction

 
In this article, you will learn about JavaScript arrays.
  • What is an Array?
  • How to create an array?
  • How to access array of elements or items?
  • Can we store other data-types of value in arrays?
  • Using the array’s Method
    • ToString
    • Length
    • Concat
    • Pop
    • Push
    • Sort
    • Reverse
    • Delete

What is an Array?

 
An Array is a collection of the same data-types values or collections of data items. In the memory variable, we can store one value at a time, and in an array, we can store many values and retrieve them as per the index number of stored values.
 
We can use an 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 the 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
  1. 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 
 
var ArrayVariableName = []; 
//set value of arrays against index number 
var ArrayVariableName[IndexNumber] = “Values”; 
 
In the following example, we have created arrays called a 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
 
var computer = new Array(5) 
computer[0] = “Keyboard”;   
computer[1] = “Mouse”;   
computer[2] = “Processor”;   
computer[3] = “Monitor”;   
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 the array elements or items?

We can access each array's element value by index number.
 
Manually access the 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 the array’s Method

  • ToString
  • Length
  • Join
  • Concat
  • Pop
  • Push
  • Shift
  • UnShift
  • Sort
  • Reverse
  • Delete
ToString
 
To convert arrays into the 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>   
Output
 
Javascript
 
Pop
 
To remove the last element of the 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 the 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>   
  29. <!DOCTYPE html>    
  30.     
  31. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
  32. <head>    
  33.     <meta charset="utf-8" />    
  34.     <title>sort</title>    
  35. </head>    
  36. <body>    
  37.     <h1>sort Method</h1>    
  38. <p>To sort the arrays elements items.</p>    
  39.     <br />    
  40.     <br />    
  41.     <script>    
  42.         var computer = [];    
  43.         computer[0] = "Keyboard";    
  44.         computer[1] = "Mouse";    
  45.         computer[2] = "Processor";    
  46.         computer[3] = "Monitor";    
  47.         computer[4] = "Cabinet";    
  48.     
  49.         document.write("<b>Before sorting elements of arrays : </b> " + computer.toString() + "<br><br>")    
  50.     
  51.         //Sorting Arrays Elements    
  52.         var sortedItem = computer.sort();    
  53.         document.write("<b>After sorting items : </b>" + sortedItem.toString() + "<br><br>");    
  54.     </script>    
  55. </body>    
  56. </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
  1. 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