Developer deals with arrays every day. Being a collection, an important property to query is the number of items: Array.prototype.length.
In JavaScript the length does not always indicate the number of existing elements (for sparse arrays) and modifying this property may remove elements.
Let's demystify the magic behind this property.
lengthof an array is an unsigned, 32-bit integer that is numerically greater than the highest index in the array.
This property behaves differently for specific array types. Let's enumerate them:
An array is dense when it's elements have contiguous indexes starting at 0. For example [1, 3, 4] is dense, because the indexes are contiguous: 0, 1 and 2.
An array is sparse when it's elements don't have contiguous indexes starting at 0. For example [1, , 4, 6] is sparse, because elements indexes are not contiguous: 0, 2 and 3.
Length as the number of elements in array
The common usage of the length is to determine the number of elements. This is correct for dense collection type:
var fruits = ['orange', 'apple', 'banana']; //fruits is a dense arrayfruits.length // prints 3, the real count of elementsfruits.push('mango');fruits.length // prints 4, one element was addedvar empty = [];empty.length // prints 0, empty array
The dense array does not have empties and the number of items corresponds to highestIndex + 1. In [3, 5, 7, 8] the highest index is 3 of element 8, thus the array size is 3 + 1 = 4.
Length as a number bigger than highest index
In a sparse array the length is greater than the highest index, but it does not indicate the real number of elements. When querying length , it's bigger than elements count. It happens because of the gaps in the array.
var animals = ['cat', 'dog', , 'monkey']; // animals is sparseanimals.length // prints 4, but real number of elements is 3var words = ['hello'];words[6] = 'welcome'; //the highest index is 6. words is sparsewords.length //prints 7, based on highest index
When adding or removing elements, length is mutated based on the highest index only. Any array modifications that do not affect the highest index do not modify length, for example when using delete.
var colors = ['blue', 'red', 'yellow', 'white', 'black'];colors.length // prints 5delete colors[0]; // remove the first element 'blue'. // The array becomes sparsecolors.length // still prints 5, because the highest index 4 // wasn't modified
Length modification
In the previous explanations, the length was read-only. But JavaScript allows to modify this property also.
Length modification affects the array, depending on the new value and existing highest index. It can remove elements or make the array sparse.
When the new length number is less or equal than the highest index, any elements whose index is greater or equal than the new size are removed. An useful scenario to remove elements from the end of array.
var numbers = [1, 3, 5, 7, 8];numbers.length = 3; // modify the array lengthnumbers // prints [1, 3, 5], elements 7 and 8 are removed
If using a number greater than the highest index (or using a number bigger than current length), the array will become sparse. It's rarely useful.
var osTypes = ['OS X', 'Linux', 'Windows'];osTypes.length = 5; // creating a sparse array. Elements at indexes 3 and 4 // do not existosTypes // prints ['OS X', 'Linux', 'Windows', , , ]
It's possible to assign a different type than number to length. JavaScript will convert the primitive to a number. If the conversion result is NaN or number less than 0, an error is thrown Uncaught RangeError: Invalid array length.
var numbers = [1, 4, 6, 7];numbers.length = '2'; // '2' is converted to number 2numbers.length = 'not-number'; // throws Uncaught RangeError: Invalid array lengthnumbers.length = -2; // throws Uncaught RangeError: Invalid array length
Code safely
Modifying the array length, removing elements with delete, adding elements with [newIndex] are sources of potential problems by creating sparse arrays. And as result an inconsistent length value.
JavaScript offers safer alternatives.
To add elements to the end of an array use Array.prototype.push() and to remove the latest pop(). To insert an element to the beginning use unshift() and to remove the first one shift(). For more complex insertions, deletions or replacements, splice() is powerful enough too.
var companies = ['Apple', 'Dell'];companies.push('ASUS'); // Adds an element to the endcompanies // prints ['Apple', 'Dell', 'ASUS']companies.pop(); // prints "ASUS". Removes the last elementcompanies // prints ['Apple', 'Dell']companies.shift(); // prints "Apple". Removes the first array elementcompanies // prints ["Dell"]companies.splice(1, 0, "Microsoft", "HP"); // Add 2 companiescompanies // prints ["Dell", "Microsoft", "HP"]companies.length // prints 3. The array is dense
There are rare situations when the array can be sparse. It's not safe to rely on the length to determine the number of elements. Just use a helper function which handles the missing elements:
/** * Count the number of elements in a sparse array * @param {Array} collection * @return {number} */function count(collection) { var totalCount = 0; for (var index = 0; index < collection.length; index++) { if (index in collection) { totalCount++; } } return totalCount;}
in operator determines if the object has a property. It works perfectly to check if an element exists at specific index.
Conclusion
As seen in the article, length is a property with complex behavior.
Mostly it works without surprises, but it's better to take precautions when dealing with sparse arrays and modifying the length.
An alternative is avoid at all modifying this property and use the splice() method.
See also
Array.prototype.length
Sparse arrays vs dense arrays
