This article was originally published on webinuse.com
JavaScript Array length property is something we use, almost, every time we work with an array. But, often, we forget how powerful this property can really be.
What is JavaScript Array length property
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
There are two types of Arrays in JavaScript: dense and sparse. JavaScript Array length property gives different results for these two types. That is why we said that length must be greater than the highest index by 1. This means that sometimes .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
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.
JavaScript Array length property will always return the exact number of elements when it comes to dense arrays.
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, .length returned 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.
Sparse arrays
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.
let arr = ["Audi", "BMW",, "Mercedes"];
let arr2 = [,,,,"JavaScript"];
let arr3 = []
arr3[50] = "Python";
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 "JavaScript". 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 "Python", or 49 indexes. These were all examples of sparse arrays. Now, let’s use the JavaScript Array length property on all of those, to see what will happen.
let arr = ["Audi", "BMW",, "Mercedes"];
console.log(arr);
//Result:
//(4) ['Audi', 'BMW', empty, 'Mercedes']
let arr2 = [,,,,"JavaScript"];
console.log(arr2);
//Result:
//(5) [empty × 4, 'JavaScript']
let arr3 = []
arr3[50] = "Python";
console.log(arr3);
//Result:
//(51) [empty × 50, 'Python']
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 empty.
Manipulate array with JavaScript Array length property
JavaScript Array length property allows us to change the array’s length, by extending it, shortening it, or emptying it.
Extend array
When we use the JavaScript Array length property to extend an array what do we get? A Sparse Array. Here is an example.
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 .length which returned 3. After that, we used JavaScript Array length’s ability to mutate array and we set the array’s length to 5. When we console logged 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
As we said, the JavaScript Array length property gives us the ability to shorten an array. When we use .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
We can empty an array using JavaScript Array length. Once we pass 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 0, 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)