Quick Reach
The array length property
The array length property is used to return or set the length of an array. The length property is quite useful in getting the array count that you can use in the for loop to perform some desired action based on array elements.
See an example of length property
This tutorial will show you how to use the JavaScript array length property with examples but let us first look at its general syntax.
How to use the array length property?
Following is the general syntax of using array length property:
arrayname.length
To set the length of JS array:
Arrayname.length= no_of_elements
See following examples online to learn more about length property.
An array size example by length property
The following example shows how to get array size by using the length property of the array. We have created a NumArr array and the alert will show JavaScript array size by using the length property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript”>
var NumArr = [1,2,3,4,5];
alert (NumArr.length);
</script>
</head>
<body>
</body>
</html>
|
JavaScript array length example with for loop
As mentioned earlier, you can use array length property in the for loop to define the limit of iterations. That helps to iterate through elements to perform some actions in DOM elements.
The following example shows, using the JavaScript length in the for loop. See demo online and read details below:
Experience this example online
|
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>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var USStates = [“New York”, “Texas”, “Florida”, “California”];
var i;
var arrdisplay = “The State names in JS array are: <BR>”;
for (i=0; i < USStates.length; i++){
arrdisplay += USStates[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
As you can see, the i variable’s maximum limit is set by using array length property in for loop. The USStates array, that contains four US State names is then displayed in HTML paragraph by using the innerHTML method.
The length property returned value 4 and assigned this to the for loop. So for loop will iterate till variable i’s value is less than 4.
JavaScript length to set the size of array example
You can also use length property to set the size of an array. You may require that in specific scenarios to define the size of an array. The following example shows how you can set that.
Experience this example online
|
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
34
35
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var USStates = [“New York”, “Texas”, “Florida”, “California”];
USStates.length = 4;
var i;
var arrdisplay = “The State names in JS array are: <BR>”;
for (i=0; i < USStates.length; i++){
arrdisplay += USStates[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
You can see, the array length is set to 4. If you use less than four elements in the array and try to display, it will show this as undefined. Similarly, if you use more than four elements while the length is set to 4, then elements will cut off or will not be shown.
Similarly, if you use more than four elements while the length is set to 4, then elements will cut off or will not be shown.
See example below.
An array length set example with more elements
The following example sets the array elements equal to five while we will assign only 3 array elements. See how array will be displayed by using the for loop?
Experience this example online
|
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
34
35
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var USStates = [“New York”, “Texas”, “Florida”];
USStates.length = 5;
var i;
var arrdisplay = “The State names in JS array are: <BR>”;
for (i=0; i < USStates.length; i++){
arrdisplay += USStates[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
You can see, the array length is set to five. The elements are then displayed by using the for loop. As there are only three array element values (State names) the other two will be displayed as undefined.
You may also like to read: Javascript Array
Leave A Comment?