JavaScript Array Length: Find Array Length in Javascript

The javascript array length property sets or returns the number of elements in an array. Length is the only property that provides us with an easy and efficient way to determine an array size. The value is an unsigned, 32-bit integer. Max size is a nonnegative integer less than 2³².

For the first element of an array, the index number always starts at 0, whereas the length property always starts between 0 and 1. Zero, if no elements exist in the array.

Basically, the javascript array length is used to check whether an array is empty or not? If the array is not empty, then iterate through the elements using a loop.

4 Most Important Points on array.length Property

1. JS array length is dynamic means, whenever we add an element to the array the array size will be increased accordingly and vice versa. But we can restrict it by using non-writable property. Don’t worry we will discuss more at latter part of this article. So bear with us.
2. If the length is set to a value less than its current length, then elements that exceed the new length are removed.
3. If the length is set to a value greater than its current length, then the length property is increased to the new highest index. Keep in mind that the additional array slot(s) not filled with undefined values. Check for details.
4. If the length is set to an invalid value such as a negative number or non-numeric then JS throws a RangeError exception.

JS Array Length Syntax

Get the JavaScript Array Length:

arr.length

Set the JavaScript Array Length:

arr.length = number

How to Find Array Length in Javascript?

Javascript has an inbuilt length property to get the size of an array. The size is always a positive integer number.

Here is an example of how to use the .length property:

<script>
   let courses = ['Javascript','CSS','HTML','Asp.net']
   let totalCourses = courses.length
   console.log(totalCourses)
</script>

Output image

Code Explanation

Here in the above code, we are using an array named “courses” to store the course names. Later we used the variable “totalCourses”    to get the number of courses that we have stored in the courses array using the javascript array length property. After that we print the output in the console window and the output is 4 as expected.

Ok, now check the javascript array length property return datatype. As mentioned earlier the return type must be a positive integer number. Now prove it:

<script>
   let courses = ['Javascript','CSS','HTML','Asp.net']
   let totalCourses = courses.length
   console.log(typeof totalCourses)

   let kpiList = [12,13,14,25]
   let numberKpi = kpiList.length
   console.log(typeof numberKpi)

</script>

Output Image

Ok, so it’s now clear to you, and we hope you will never forget. In case of any doubt, not only for the length property but also for other javascript properties, you can use the typeof inbuilt operator for type checking.

Alternative Way to Find the Length of Array in Javascript

<script>
   
   function getArrayLength(arr)
   {
      let cnt = 0;
      for (const item of arr) {
      cnt++;
      }

      return cnt;
   }

   let courses = ['Javascript','CSS','HTML','Asp.net']
   console.log("Length of courses array is:", getArrayLength(courses));

</script>

Output Image

Code Explanation

In the above code block, we write a generic function to determine the length of any array passed in as an argument. We declared a variable named cnt and assigned 0 to it first. Upon receiving each element of the supplied array one at a time, we subsequently increase the value by 1.

To count the number of elements in the provided array, we used a for-of loop (not a general for loop) to check elements one by one in the array.

The purpose of the for-of loop is to iterate over the provided array until an undefined is encountered. This is the way we iterate over each and every element and increase our cnt variable until we reach the end of the array, “arr”. Once our for-of loop encounters the undefined value, the return line will be executed, and we get the cnt value as the length of the array “arr” finally.

We pass the array “arr” as the input to the function getArrayLength in order to get the length of the array as the returned value.

How to Iterate Over an Array in JS?

In the following example, we are going to iterate courses array using the javascript array length property. During iteration we also print the array elements in our console log.

<script>
   
   let courses = ['Javascript','CSS','HTML','Asp.net']
   let totalCourses = courses.length
   for (let i = 0; i < totalCourses; i++) 
   {
      console.log(courses[i])
   }

</script>

Output Image

Code Explanation

Here in the above code we initialize our courses array with values [‘Javascript’,’CSS’,’HTML’,’Asp.net’].

And then stores the length of the courses array (which is 4) in the totalCourses length variable.

Now the for loop is ready to iterate over the courses array. Based on initialization the for loop starts with i=0 and continue iteration as long as the loop meet the length condition.

On each loop we print the array elements in our console log.

Shortening an Array Using Length

By using the JavaScript Array Length property you can get the length of an array. But here in the following example see how we can shorten the array courses to a length of 3. What is going to happen?

<script>
   
   let courses = ['Javascript','CSS','HTML','Asp.net'];
   courses.length=3;

   console.log(courses)

</script>

Output Image

Code Explanation

The courses array is initialized with [‘Javascript’,’CSS’,’HTML’,’Asp.net’].

Now we set the courses.length=3, therefore the array is truncated and keep only the first 3 elements. So the array now become to [‘Javascript’,’CSS’,’HTML’]. Discarded the last element from the array.

So, now if we print the array courses – it prints the truncated array like the above output screen.

How to Create an Empty Array of Fixed Length?

Alternatively if we set the array length to a higher value as mentioned in our “Most Important Points on array.length Property” section. Then it will create a sparse array.

<script>
   
   const courses = [];
   courses.length = 3;
   
   console.log(courses);

</script>

Output Image

How to Make an Array of Void?

If we set the length property of any array to 0 then the array is going to be void. Look at the below example:

<script>
   
   const courses = ['Javascript','CSS','HTML','Asp.net']
   courses.length = 0;
   
   console.log(courses);

</script>

Output Image

Code Explanation

The courses array is initialized with four string values: ‘Javascript’,’CSS’,’HTML’,’Asp.net’.

The line courses.length = 0; sets the length of the courses array to 0. This line of code removes all elements from the array and making it empty or void.

The console.log(courses); line then prints the current state of the courses array.

As the array now emptied, the output is [], means a void array at all.

Define an Array with Non-Writable Length

By default, a javascript array is dynamic, which means the JavaScript Array Length property is automatically updated by the array in the event of element addition or deletion. But we can restrict it. If the length property is set to non-writable, then the array will not be able to update it. If we try to add or delete any element of the array, this causes an error in strict mode.

In this cases we are also unable to modify the values of the array.

<script>

   "use strict";
   
   const courses = ['Javascript','CSS','HTML','Asp.net']
   Object.defineProperty(courses, "length", { writable: false });
   
   courses[3] = ''; // ERROR > Uncaught TypeError: Cannot assign to read only property 'length' of object '[object Array]'
   
   courses.push(''); // ERROR > Uncaught TypeError: Cannot assign to read only property 'length' of object '[object Array]'

</script>

Output Image

Javascript array Length vs. Size Comparison

Now we are going to figure out the actual difference between the array length and size. And also try to understand why this debate is still going on? Let’s see:

array.size	array.length
array.size() is a function	array.length is a property
array.size() is not a valid method means not a native JS function	It’s a native property
Commonly used as a custom getter.	Commonly used for array manipulation or iteration
You may need to add other library.	JS native property
Not recommended to use	Safe to use

Workaround to Javascript Array Length Undefined

It happens mainly for 2 reasons:

1. Initialization issue: If the array is not initialized before calling. Then you will receive JavaScript Array Length undefined error.
2. Type issue: May be you are using the length property on other type such as object instead of an array. Serialization issue also exist.

Browser Compatibility List of Javascript Array Length Property

Browser	Compatible?
Chrome	Yes
Edge	Yes
Firefox	Yes
Safari	Yes
Opera	Yes
IE	Yes

Conclusion

So far, we have discussed JavaScript array length in every aspect. From iteration to manipulation the length property is a must use property to work with arrays of different sizes and types.

Regarding the debate of size vs. length, we have clearly mentioned using the length over size method, as the size method is not a native JS method.

Still, do you have any confusion? Please write to us using our comment section.

FAQs