Prev
Home
Next
Menu

JS Arrays

In JS, an array is an object that represents an ordered collection of homogeneous (i.e. similar type of) elements. It is often used in programming when we want to store a list of elements and access them by using a single variable.

There exists a special data structure in JS named Array to store ordered collections of elements.

 

A) Creation of an Array

There are basically three methods to create an array in JS.

Method-1. Using array literal

Method-2. Using ‘new’ keyword to create an instance of Array directly

Method-3. Using an Array constructor with ‘new’ keyword

 
Method-1  Example.
<html>
<body>
<script type="text/javascript">
var players = ["Messi", "Ronaldo", "Mbappe", "Suarez", "Neymar"];

//using 'length' property
var len = players.length;

//accessing array elements
for (var i = 0; i < len; i++)
{
   document.write(players[i] + "<br/>");
}
</script>
</body>
</html>

Output:

Messi
Ronaldo
Mbappe
Suarez
Neymar
 
Method-2  Example. 
<html>
<body>
<script type="text/javascript">
var players = new Array(); //same as: var players = []; 
players[0] = "Messi";
players[1] = "Ronaldo"; 
players[2] = "Mbappe";
players[3] = "Suarez";
players[4] = "Neymar";

//using 'length' property
var len = players.length; 

//accessing array elements
for (var i = 0; i < len; i++)
{
   document.write(players[i] + "<br/>");
}
</script>
</body>
</html>

Output:

Messi
Ronaldo
Mbappe
Suarez
Neymar
 
Method-3  Example.
<html>
<body>
<script type="text/javascript">
var players = new Array("Messi", "Ronaldo", "Mbappe", "Suarez", "Neymar");
var x;
	
//using for..in loop
for (x in players)
{
    document.write(players[x] + "<br/>");
}
</script>
</body>
</html>

Output:

Messi
Ronaldo
Mbappe
Suarez
Neymar
 

B) JS Array Methods

Using the built-in methods of JS we can perform several operations on arrays. See the example below.

<html>
<body>

<h2>JS Array Methods</h2>

<p id="test1"></p>
<br>
<p id="test2"></p>
<br>
<p id="test3"></p>
<br>
<p id="test4"></p>
<br>
<p id="test5"></p>
<br>
<p id="test6"></p>
<br>
<p id="test7"></p>
<br>
<p id="test8"></p>
<br>
<p id="test9"></p>
<br>
<p id="test10"></p>

<script>
var players = ["Messi", "Ronaldo", "Mbappe", "Suarez", "Neymar"];

//using toString() method to convert an array to a string of array values
document.getElementById("test1").innerHTML = players.toString();

//using join() method to join all array elements into a string
document.getElementById("test2").innerHTML = players.join(" # ");

//using pop() method to remove the last element from an array
players.pop();
document.getElementById("test3").innerHTML = players;

//using push() method to add a new element to an array (at the end)
players.push("Neymar");
document.getElementById("test3").innerHTML = players;

//using shift() method to remove the 1st array element and "shifts" all other elements to a lower index
players.shift(); 
document.getElementById("test4").innerHTML = players;

//using unshift() method to add a new element to an array (at the start), and "unshifts" older elements
players.unshift("Kane"); 
document.getElementById("test5").innerHTML = players;

//changing element
players[0]="Messi";
document.getElementById("test6").innerHTML = players;

//using sort() method to sort the elements in an array
players.sort(); 
document.getElementById("test7").innerHTML = players;

//using reverse() method to reverse the elements in an array
players.reverse(); 
document.getElementById("test8").innerHTML = players;

//using concat() method to create a new array by merging existing arrays
var old = ["Pele", "Maradona", "Zidane"];
var new_list = players.concat(old); 
document.getElementById("test9").innerHTML = new_list;

//using slice() method to slice out a portion of an array into a new array
var part_list = new_list.slice(3);
document.getElementById("test10").innerHTML = part_list;

//using delete may leave undefined holes in the array. so, better to use pop() or shift()
delete players[4]; //delete element

</script>

</body>
</html>

Output:

JS Array Methods

Messi,Ronaldo,Mbappe,Suarez,Neymar

Messi # Ronaldo # Mbappe # Suarez # Neymar

Messi,Ronaldo,Mbappe,Suarez,Neymar

Ronaldo,Mbappe,Suarez,Neymar

Kane,Ronaldo,Mbappe,Suarez,Neymar

Messi,Ronaldo,Mbappe,Suarez,Neymar

Mbappe,Messi,Neymar,Ronaldo,Suarez

Suarez,Ronaldo,Neymar,Messi,Mbappe

Suarez,Ronaldo,Neymar,Messi,Mbappe,Pele,Maradona,Zidane

Messi,Mbappe,Pele,Maradona,Zidane

 

Prev
Home
Next