JavaScript Array Length Property

Illustration of using the JavaScript array length property to determine the size of an array in a tutorial.

The array length property in JavaScript

The array length property is used to set or return the total length or number of elements in the specified array.

The JS length property is particularly useful for manipulating array elements.

Generally, this property is used in JavaScript for and while loops to get the total number of elements to specify the condition part.

For example:

var Arrnum = [5,10,15,20,25];

Arrnum.length

It will return 5.

See the following online examples of using the length JavaScript property.

An example of array length property to get total elements

In this example, I have created an array of five elements.

After that, the array length property is used to return the number of elements in that array which is assigned to a variable.

Finally, the length of the array is displayed in an alert.

JS code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<script type="text/javascript">

var Arrnum = [5,10,15,20,25];
var totelement = Arrnum.length;
  
alert ("The array length is: " + totelement);   
</script>
</body>

</html>

An example of using array length property with for loop

In this example, the array length property is used in a for loop for specifying the number of times the loop should run i.e. in the condition part.

The array elements are displayed in a div element of HTML.

The code:

<!DOCTYPE html>
<html>
<style>
#div_demo {
  background: #4C9B79;
  height: 220px;
  width:40%;
  border-radius: 15px;
  padding:20px;
  font-size:18px;
  color:#fff;   
}
</style>
<head>

</head>
<body>
<div id="div_demo"></div>


<script type="text/javascript">

var Arrnum = [5,10,15,20,25];
var num;
var displayArray = "Demo of using the length property: <BR>";

for (num=0; num < Arrnum.length; num++){
    displayArray += Arrnum[num] + "<BR>";
    }
    document.getElementById("div_demo").innerHTML = displayArray; 

   
</script>
</body>

</html>

Output:

JavaScript length property

This is how the length property is used in the for loop:

for (num=0; num < Arrnum.length; num++){

displayArray += Arrnum[num] + "<BR>";

}

The code Arrnum.length specified the condition part of the for loop. In that case, as array elements are five, so loop is executed five times.

A length array property example with push method

The length method returns the total elements of an array not just at the time of creation but elements added at the later part or dynamically.

In this example, an array is created initially with three elements. After that, JS push method of arrays is used to add more elements to that array.

The length of the array initially and after adding elements are displayed in an alert, as the page loads.

Code:

<!doctype html>
<html>
<head>

<style>
#arr_demo {
  background: #415665;
  height: 270px;
  width:40%;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}

</style>
 
  
</head>
<body>
<div id="arr_demo"></div>

<script>
    var dynarray = [1,2,3];  
    var j= 10; // Used to give values to array elements
    var num;
    var displayArray = "The array with existing and new elements <BR><BR>";
    alert ("Array length initially: " + dynarray.length);
    
    //Creating new array elements
    for (var i = 0; i < 5; i++) {
      dynarray.push(j);
      j = j + 10;
    }
    //Displaying the dynamic array in a Div element
    for (num=0; num < dynarray.length; num++){
     displayArray += dynarray[num] + "<BR>";
     }
    document.getElementById("arr_demo").innerHTML = displayArray;
    alert ("Array length after push method: " + dynarray.length);
    
    

    
</script> 
 
</body>
</html>

Output:

JavaScript length

You can see the difference in length before and after using the array push method.

An example of shortening/setting the array length

As such, the length property can be used for setting the array length as well as returning the total number of elements in the array.

In this example, an array is created with five elements. After that, the length property is used to set the array as three.

See the code and output.

Code:

<!DOCTYPE html>
<html>
<style>
#div_demo {
  background: #4C9B79;
  height: 220px;
  width:40%;
  border-radius: 15px;
  padding:20px;
  font-size:18px;
  color:#fff;   
}
</style>
<head>

</head>
<body>
<div id="div_demo"></div>

<div id="div_demo2"></div>
<script type="text/javascript">

var Arrnum = [5,10,15,20,25];
var num;
var displayArray = "Array initially: [5,10,15,20,25]<BR><BR> Array after setting length: Arrnum.length = 3;<BR>";
//Setting array length
Arrnum.length = 3;

for (num=0; num < Arrnum.length; num++){
    displayArray += Arrnum[num] + "<BR>";
    }
    displayArray += "<br><br>Total length of array = " + Arrnum.length;
    document.getElementById("div_demo").innerHTML = displayArray; 


</script>
</body>

</html>

Output:

JavaScript length set

This is how the length property is used in the example:

var Arrnum = [5,10,15,20,25];

var num;

var displayArray = "Array initially: [5,10,15,20,25]<BR><BR> Array after setting length: Arrnum.length = 3;<BR>";

//Setting array length

Arrnum.length = 3;



for (num=0; num < Arrnum.length; num++){

displayArray += Arrnum[num] + "<BR>";

}

displayArray += "<br><br>Total length of array = " + Arrnum.length;

document.getElementById("div_demo").innerHTML = displayArray;

You can see that the length of the array is reduced to three elements.

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!