This article was originally published on webinuse.com
The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array, as per MDN.
What does this mean? This means that length property “belongs” to Array data type and that it, either, returns the number of elements or sets the number of elements. Since the Array index is zero-based, the integer that is returned by length must be greater than the highest index by 1.
Dense and sparse arrays
.length property doesn’t actually return the exact number of elements, but rather the highest index plus 1. In order to explain this, we need to take a look at the difference between dense and sparse arrays.
Dense arrays are the type of arrays that we usually work with.
const arr = ["Audi", "BMW", "Mercedes"];
This is a typical example of a dense array, the type of array we are familiar with and work with.
const arr = ["Audi", "BMW", "Mercedes"]; let length = arr.length; console.log(length); // Result: // 3 let highestIndex = arr.length-1; console.log(highestIndex); // Result: //2
As we can see,
3 which is the exact number of items in the array
arr. The highest index is
2. Let’s try to add elements to an array and empty an array, and then check an index and the length.
let arr = ["Audi", "BMW", "Mercedes"]; /** * We know that arr.length === 3 * Let's add an element to array * */ arr.push("Ferrari"); let length = arr.length; console.log(arr.length); // Result: // 4 /** * In previous example highest index * was 2, let's check it now, after * we have added another element * */ console.log(arr.length-1); // Result: //3 //Let's empty our array arr = ; console.log(arr.length); // Result: // 0
Once we have emptied an array, it is pointless to check for index, because there is nothing inside our array.
What is a “Sparse array?” It is, basically, an array with holes. This means that sparse array doesn’t, necessarily, start at 0. Also, this means that sparse arrays don’t have sequential elements, there can be cases when there is not element after element, but rather a hole. Let’s take a look at several examples.
In the first variable
arr, we have 3 elements and “hole”/”empty space” on index 2. The second variable has 4 empty indexes and on the fifth we have
arr3 variable is created as an empty array. And then we assigned
"Python" on index 50. This means that there are 50 empty places before
As we can see in the example above
console.log() returned more than length. Even though we expected an integer, we got an integer plus array. This is because the browser is aware that this is a sparse array and it gave us the heads up. Also, wherever we had “hole” browser returned
let arr = ["Audi", "BMW","Mercedes"]; console.log(arr.length); //Result: //3 arr.length = 5; console.log(arr); //Result: //(5) ['Audi', 'BMW', 'Mercedes', empty × 2]
In the example above we used our standard array and then we used
arr again we saw that, now,
arr has a length of 5 and that two empty indexes are added at the end of it. So, basically, we got a sparse array.
Shorten an array
.length property, it just takes the exact number of elements that we provided from the beginning of the array. The rest of the elements are discarded and the array is mutated.
let arr = ["Audi", "BMW","Mercedes"]; console.log(arr.length); //Result: //3 arr.length = 1; console.log(arr); //Result: //['Audi']
We have shortened our array to 1 element, and only the first element is kept. The rest of them are deleted.
Empty an array
0 as our array’s length, our array will become empty.
let arr = ["Audi", "BMW","Mercedes"]; console.log(arr.length); //Result: //3 arr.length = 0; console.log(arr); //Result: //
As we can see from the code snippet when we set our length to
console.log() returned an empty array.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to create custom stackable toasts?
Top comments (0)