Javascript Array with examples
Contents
Array in Javascript
Array is an object in Javascript which is used to store the collection of values. Each value in the array is called as element. The elements can be different data type in the same array. The position of each element is called as index. The index is starts from 0.
Create array in Javascript
There are two ways to create array in Javascript. Let look into that with syntax.
Array literal notation ([ ])
The easiest way to create an array is with an array literal, which is simply a comma separated list of array elements within square brackets
|
1 2 |
var array_name = []; // Empty array var array_name = [element0,element1,.......,elementN]; // with elements |
Array() constructor
Another way to create array is using the Array( ) constructor. To do that, we need to call the constructor using new Array() with any of the following options.
- If we call the constructor without argument, it defines the empty array in Javascript
- If we call the constructor with single numeric argument, it specifies the length of the array.
- The elements can be passed as arguments in the Array() constructor.
|
1 2 3 |
var array_name = new Array(); // Empty array var array_name = new Array(10); // with specified length var array_name = new Array(element0,element1,......,elementN); // with elements |
Example 1:
In this example, we are trying to store the student names in Javascript array. Here we named the variable as student and called the array constructor with the arguments of student names.
|
1 2 3 4 |
<script type="text/javascript"> var student = new Array('Kevin','Larry','Stephen','Alex'); console.log(student); </script> |
Example 2 :
In this example, first we created the empty array variable named as student. Then we used one of the array method push( ) to add each name in the array.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> var student = new Array(); // empty array student.push('Kevin'); // Array push method used to add the elements student.push('Larry'); student.push('Stephen'); student.push('Alex'); console.log(student); </script> |
Output
Iterate over an array in Javascript
Like other programming languages (C,C++,Java and Python), We can use the for loop to iterate the elements of array in Javascript. In this example, the variable i is used as array index. As we defined i =0,the index position starts from 0. Also the variable student is the array which contains all the values.
|
1 2 3 4 5 6 |
<script type="text/javascript"> var student = new Array('Kevin','Larry','Stephen','Alex') for(var i = 0; i<student.length; i++){ console.log(student[i]); } </script> |
Output
Kevin
Larry
Stephen
Alex
Print Javascript array in HTML page
Lets create simple HTML page to show the value of array in the browser.
The above HTML page has the button “Show Address”. If we clicks that button, it will show the value of array in the same page. Here the array variable is address which contains the collection of values such as Door no, Street, State and Country details.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> // declare custom function in js function getAddress() { // Create array with values var address = new Array(874,'Station Road','New York','USA'); console.log(address); // create variable to append/show the values of array in html page var html = "<table border='1|1'>"; // Iterate array elements using for loop for(var i = 0; i<address.length; i++){ html+="<tr>"; html+="<td>"+address[i]+"</td>"; html+="</tr>"; } html+="</table>"; // Change the content of HTML element which will be displayed in the browser document.getElementById("example").innerHTML = html; } </script> </head> <body> <h2> Javascript Array Example</h2> <button type="button" class="btn btn-default" onclick="getAddress()">Show Address</button> <p id="example"></p> </body> </html> |
Output
