Post
Ask Question

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 an 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 in JavaScript?

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.

The following example shows that an 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 utilized on the server side.

Javascript

How to create arrays in JavaScript?

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

Syntax

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

Example

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

Arraymethod1.HTML Code

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title></title>    
</head>    
<body>    
    <h1>Method 1</h1>    
    <br />    
    <br />    
    <p id="arraymethod1"></p>    
    <script>    
        var computer = ["Keyboard", "Mouse", "Processor", "Monitor", "Cabinet"];    
        document.getElementById("arraymethod1").innerHTML = computer;    
    </script>    
</body>    
</html>   

Output

Javascript

Method 2. In this method, we are not predefining the values of arrays. In run time, we a d 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 an index numbers.

Example

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

Arraymethod2.HTML Code

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title></title>    
</head>    
<body>    
    <h1>Method 2</h1>    
    <br />    
    <br />    
    <p id="arraymethod2"></p>    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
        document.getElementById("arraymethod2").innerHTML = computer;    
    </script>    
</body>    
</html>   

Output

Javascript

Method 3.  In this method,  while initializing the arrays, we have to give the length (size) of the 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 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title></title>    
</head>    
<body>    
    <h1>Method 3</h1>    
    <br />    
    <br />    
    <p id="arraymethod3"></p>    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
        document.getElementById("arraymethod3").innerHTML = computer;    
    </script>    
</body>    
</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 the array's element values.

GetEachArraysValue.html Code

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title></title>    
    
</head>    
<body>    
    <p id="arraymethod3"></p>    
    <script>    
        var arrayValue = ""    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
        arrayValue = "<ul>"    
    
//for loop     
        for (i = 0; i < computer.length; i++) {    
    
         //computer[i] give the value of each array element. i value changed in loop.       
            arrayValue += "<li>"+computer[i] + "</li><br/>";    
    
        }    
        arrayValue += "</ul>"    
        document.getElementById("arraymethod3").innerHTML = arrayValue;    
    </script>    
</body>    
</html>   

In the above, you can see we fetch and store all the array elements in an array variable called arrayValue.  After loop compilation, the 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 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title></title>    
    
</head>    
<body>    
    <p id="arraymethod3"></p>    
    <script>    
        var arrayValue = ""    
    
        //defined arrays called FORMVALUES and stored different data types in the arrays    
        var formValues = [];    
    
        //stored Character/string values    
        formValues[0] = "Suhana Ashish Kalla";    
    
        //stored Numberic/interger values    
        formValues[1] = 101;    
    
        //stored Logical/Boolean values    
        formValues[2] = true;    
    
        formValues[3] = "MBA";    
        arrayValue = "<ul>"    
    
        //for loop    
        for (i = 0; i < formValues.length; i++) {    
    
         //computer[i] give the value of each array element. i value changed in loop.    
            arrayValue += "<li>" + formValues[i] + "</li><br/>";    
    
        }    
        arrayValue += "</ul>"    
        document.getElementById("arraymethod3").innerHTML = arrayValue;    
    </script>    
</body>    
</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 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>ToString</title>    
</head>    
<body>    
    <h1>ToString Method</h1>    
    <p>To convert arrays into string format.</p>    
    <br />    
    <br />    
    <p id="arraymethod3"></p>    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
        document.getElementById("arraymethod3").innerHTML = computer.toString();    
    </script>    
</body>    
</html>   

Output

Javascript

Length

To get the total number of index numbers in an array, 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 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>Arrays Length</title>    
</head>    
<body>    
    <h1>Length Method</h1>    
    <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>    
    <br />    
    <br />    
    All five(5) items filled.    
    <p id="arr1val"></p>    
    <b>Length of Computer Arrays:</b>    
    <p id="arraymethod3"></p>    
    <br />    
    <br />    
    Only three(3) items filled but its showing length 21.    
    <p id="arr2val"></p>    
    <b>Length of Mall Arrays:</b>    
    <p id="arraymethod4"></p>    
    <script>    
        //Computer arrays Total length is 5 items    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
        document.getElementById("arr1val").innerHTML = computer.toString();    
        document.getElementById("arraymethod3").innerHTML = computer.length;    
    
        //Mall arrays Total length is 21 items    
        var mall = [];    
        mall[0] = "Oberoi Mall - Goregoan(East)";    
        mall[14] = "The Growel Mall - Kandivali(East)";    
        mall[20] = "Inborbit - Malad(West)";    
        document.getElementById("arr2val").innerHTML = mall.toString();    
        document.getElementById("arraymethod4").innerHTML = mall.length;    
    </script>    
</body>    
</html>   

Output

Javascript

Concat

To merge arrays, we use the following code 

Syntax

<arraysName>.concat(<OtherArraysName>)

Example 1

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

Example 2

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

Concat.html Code 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>Concat</title>    
</head>    
<body>    
    <h1>Concat Method</h1>    
    <p>To merge existing arrays.</p>    
    <br />    
    <br />    
    <p id="arraymethod3"></p>    
    <script>    
        //First arrays defined called "computer"    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        //Second arrays defined called "internalParts"    
        var internalParts = [];    
        internalParts[0] = "RAM";    
        internalParts[1] = "Hard Disk";    
        internalParts[2] = "Mother Board";    
        internalParts[3] = "CPU Fan";    
    
    
        //Third Arrays defined which get result of concat (merging) of arrays    
        var computerparts = computer.concat(internalParts);    
    
        document.getElementById("arraymethod3").innerHTML = computerparts.toString();    
    </script>    
</body>    
</html>  

Output

Javascript

Pop

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

Pop.html code 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>pop</title>    
</head>    
<body>    
    <h1>pop Method</h1>    
    <p>To remove the last element of arrays.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Total elements of arrays : </b> " + computer.toString()+"<br><br>")    
        var removeitem = computer.pop();    
        document.write("<b>After removing one item: </b>" + computer.toString() + "<br><br>");    
        document.write("<b>Removed arrays element item: </b> " + removeitem + "<br><br>")    
    </script>    
</body>    
</html>   

Output

Javascript

Push

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

Push.html Code 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>push</title>    
</head>    
<body>    
    <h1>push Method</h1>    
    <p>To add an new item in the last position.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Total elements of arrays : </b> " + computer.toString()+"<br><br>")    
        var additem = computer.push("Motherboard");    
        document.write("<b>After added one item : </b>" + computer.toString() + "<br><br>");    
        document.write("<b>Added one item and now length of arrays : </b> " + additem + "<br><br>")    
    </script>    
</body>    
</html>   

Output

Javascript

Sort

To sort the elements of arrays.

Sort.html Code 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>sort</title>    
</head>    
<body>    
    <h1>sort Method</h1>    
<p>To sort the arrays elements items.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Before sorting elements of arrays : </b> " + computer.toString() + "<br><br>")    
    
        //Sorting Arrays Elements    
        var sortedItem = computer.sort();    
        document.write("<b>After sorting items : </b>" + sortedItem.toString() + "<br><br>");    
    </script>    
</body>    
</html>   
<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>sort</title>    
</head>    
<body>    
    <h1>sort Method</h1>    
<p>To sort the arrays elements items.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Before sorting elements of arrays : </b> " + computer.toString() + "<br><br>")    
    
        //Sorting Arrays Elements    
        var sortedItem = computer.sort();    
        document.write("<b>After sorting items : </b>" + sortedItem.toString() + "<br><br>");    
    </script>    
</body>    
</html>   

Output

Javascript

Reverse

To make array element items in reverse order, you can use it for descending order.

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

Reverse.html Code

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>Reverse</title>    
</head>    
<body>    
    <h1>Reverse Method</h1>    
    <p>To reverse the arrays elements items.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Before reverse elements of arrays : </b> " + computer.toString() + "<br><br>")    
    
        //Sorting Arrays Elements    
        var reversedItem = computer.reverse();    
        document.write("<b>After using reverse : </b>" + reversedItem.toString() + "<br><br>");    
    </script>    
</body>    
</html>   

Output

Javascript

Delete

To delete the particular array elements by index number.

Syntax

delete <arrayName>[IndexNumber];

Example

delete computer[1]; 

Delete.html Code 

<!DOCTYPE html>    
    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <title>Delete</title>    
</head>    
<body>    
    <h1>Delete Method</h1>    
    <p>To Delete the arrays elements item by index number.</p>    
    <br />    
    <br />    
    <script>    
        var computer = [];    
        computer[0] = "Keyboard";    
        computer[1] = "Mouse";    
        computer[2] = "Processor";    
        computer[3] = "Monitor";    
        computer[4] = "Cabinet";    
    
        document.write("<b>Before deleting elements of arrays : </b> " + computer.toString() + "<br><br>")    
    
        //Sorting Arrays Elements    
        delete computer[2];    
        document.write("<b>After delete : </b>" + computer.toString() + "<br><br>");    
    </script>    
</body>    
</html>   

Output

Javascript


Similar Articles