# The Magic Behind Array Length Property

Posted January 17, 2016

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.

`length` of 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`

See the example in JS Bin

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`

See the example in JS Bin

## 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', , , ]`

See the examples in JS Bin

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`

See the examples in JS Bin

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.