The array length property of the JavaScript array returns the number of elements the array can hold. The length also includes the number of elements plus empty slots (in the case of sparse arrays), if any, in that array. We can also use the length property to increase or shorten the array’s length. In this tutorial, let us learn more about the length property of the array and how to use it in JavaScript
Table of Contents
Length Property of the array
Using the Length Property of the array.
- We can find the array’s length (i.e., the number of elements in a dense array).
- Use it to change the length of the array.
The length of the array is an unsigned, 32-bit integer. It can start from 0 and hold up to a maximum of 4294967296 (232) elements. Note that the length is always greater than the highest index in the array.
Finding the length of the array
The syntax for finding the length is as follows
1 2 3 4 5 | //Syntax array.length |
The following code creates the books array with four elements. Hence the books.length property returns the length as 4.
1 2 3 4 5 6 | //Example const books = ["Ulysses", "Don Quixote", "War and Peace", "Moby Dick"]; console.log(books.length) //4 |
1 2 3 4 5 6 7 | //Array with 6 elements const books= new Array(6); console.log(books.length) //6 console.log(books) //[ <6 empty items> ] |
If the array is dense, then the number of elements in the array is the same as the array’s length. We will find more about dense and sparse arrays at the end of this article.
Changing the length of the array
We can also set the length of the array using the following syntax
1 2 3 4 5 | //Syntax array.length = number |
In the following example, we set the books.length as 10.
1 2 3 4 5 6 | //Example const books = ["Ulysses", "Don Quixote", "War and Peace", "Moby Dick"]; books.length = 10 console.log(books.length) //10 |
The maximum length of an array can be 4294967295 or 232.
1 2 3 4 5 6 7 | //Example const books = []; books.length =4294967295 console.log(books.length) //4294967295 console.log(books) //<4294967295 empty items> |
Anything above will result in RangeError.
1 2 3 4 5 | const books = []; books.length =4294967296 //RangeError: Invalid array length |
Setting the array length property can have unintended consequences if we are not careful because it can remove the elements from the array or make it a sparse array.
Removing all elements from the array
By setting its length to 0, we can remove all elements from the array. This essentially creates an empty array.
1 2 3 4 5 6 7 8 9 | const books = ["Ulysses", "Don Quixote", "War and Peace", "Moby Dick"]; console.log(books) //[ 'Ulysses', 'Don Quixote', 'War and Peace', 'Moby Dick' ] //Setting the length as Zero books.length = 0 console.log(books.length) //0 console.log(books) //[] |
Shortening an array
If we set the length to a value smaller than the current length of the array, then all the elements whose index is greater than or equal to the new length are removed (truncates the array).
1 2 3 4 5 6 7 8 9 10 11 12 | const books = ["Ulysses", "Don Quixote", "War and Peace", "Moby Dick"]; console.log(books) //[ 'Ulysses', 'Don Quixote', 'War and Peace', 'Moby Dick' ] //Setting the length as books.length = 2 console.log(books.length) //2 //last two elements are removed console.log(books) //[ 'Ulysses', 'Don Quixote'] |
Increasing the length of an array
We can set the length property of an array to a value that is higher than the highest index. The length of the array will extend, but no elements are added to the array. The array is extended by adding empty slots, which results in a sparse array.
1 2 3 4 5 6 7 8 9 10 11 12 | const books = ["Ulysses", "Don Quixote"]; console.log(books) //[ 'Ulysses', 'Don Quixote'] //Setting the length as books.length = 6 console.log(books.length) //62 //4 empty elements console.log(books) //[ 'Ulysses', 'Don Quixote',<4 empty items>] |
Create an empty array
The following code creates an array of fixed-length 3
1 2 3 4 5 6 | const books = []; books.length = 3 console.log(books.length) //3 console.log(books) //[empty x 3] |
or
1 2 3 4 5 | const books = Array(3); console.log(books.length) //3 console.log(books) //[empty x 3] |
Array with Fixed Length
We can make the fixed length array by making the length property non-writable. This will prevent adding the new element or modifying the length property.
The length property is automatically updated whenever we add a new element to the array (or remove it). But if the length property is non-writable, then inserting or removing it will result in an error. Hence resulting in an array whose length is fixed.
1 2 3 4 5 6 7 8 9 10 11 | //Array of length 2 const books = ["Ulysses", "Don Quixote"]; Object.defineProperty(books, "length", { writable: false }); books[5] ="Moby Dick" ; // TypeError: Cannot assign to read only property 'length' of object '[object Array]' books.push("Moby Dick"); // // TypeError: Cannot assign to read only property 'length' of object '[object Array]' |
Sparse vs. Dense Arrays in JavaScript
JavaScript arrays can be dense or sparse.
An array is dense if it has values at every index. i. e., it has values at the index starting from 0 until array.length - 1. The array’s length property correctly identifies the array’s number of elements.
For Example, the books array in the following example is dense. It has a length of 4 and contains values at every index starting from 0 to 3
1 2 3 4 | const books = ["Ulysses", "Don Quixote", "War and Peace", "Moby Dick"]; console.log(books.length) //4 |
The array is sparse when its length exceeds the number of elements. i.e., at least one of the indexes is empty, or the array has holes.
The following example creates a dense array of books with length 2. When we increase its length to 3. JavaScript adds an empty element to it. Now the book array becomes a sparse array.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //dense array const books = ["Ulysses", "Don Quixote"]; console.log(books) //[ 'Ulysses', 'Don Quixote'] //increasing the length to 3. Array will become sparse array books.length = 3 //array length is 3 console.log(books.length) //3 console.log(books) // [ 'Ulysses', 'Don Quixote', <1 empty items> ] //But it Prints only 2 element. books.forEach(element => console.log(element)); //Ulysses //Don Quixote |
You will learn more about a dense and sparse array.
Summary
- Use the array length property to determine the number of elements in the array or set its length.
- The array’s length is equal to the number of elements if the array is dense. Length also includes the number of empty items if the array is sparse.
- Decreasing the length of the array will truncate the array. Increasing its length will result in a sparse array.
- We can make the fixed length array by making the length property non-writable
