How to Use the Array length Property in JavaScript

The length property of an Array serves as a “getter / setter” for the number of items in the array.

When applied without an assignment operator (=), the length property returns the number of items in the array.

When applied with an assignment operator, the length property sets the number of items in the array.

Length as a getter example

Below is an example of using the length property as a “getter” for an array:

const fruits = ['peach', 'mango', 'banana', 'strawberry', 'apple'];
console.log(fruits.length);
// Expected output: 5

In the example above, the fruits array contains five items.

Applying the length property to the array, as a result, returns the number five.

Getter Syntax

The syntax for the “getter” version of the Array.length property is:

Array.length

This property returns the length of the associated array.

Length as a setter

When the length property is applied as a setter , things get interesting. Using the length property as a setter can be used to either shrink or extend an array.

Let’s first look at using the length property to shrink the above fruits array.

Shrinking an array

The following example demonstrates how to use length as a setter to shrink an array:

fruits.length = 3;
console.log(fruits);
// Expected output: ["peach", "mango", "banana"]

In the example above, the length property of the fruits array is set to 3. As a result, the fruits array is reduced to 3 items from its original 5. The other two elements are lost, as seen in the code below:

console.log(fruits[3]);
// Expected output: undefined

The above syntax should return the item at index 3 (i.e. item number 4; because the index count begins at 0). However, there are currently only three items in the array. Since there is no such item at index 3, the return value of this code is undefined.

Note: the value of the length property is always greater than the value of the index.

Note: shrinking an array changes the original array! The items that were truncated from the original array are lost.

Extending an array

Let us explore what happens when the array is extended back to its original length of 5:

fruits.length = 5;
console.log(fruits);
// Expected output: ["peach", "mango", "banana", empty × 2]

In the example above, the length property of the fruits array is set back to 5. However, as the two new slots (indices 3 and 4) are not assigned any value, they are considered “empty”. This has some interesting implications for array iteration, as we’ll explore below.

Iterating over empty slots

Array iteration methods like Array.map and Array.forEach ignore “empty” slots in an array when they perform their work, as the following example demonstrates:

fruits.map((fruit, idx) => console.log(`At index ${idx} the word length is ${fruit.length}`))
// Expected output:
// At index 0 the word length is 5
// At index 1 the word length is 5
// At index 2 the word length is 6

In the example above, the Array.map method is applied to the fruits array. The iteration method takes each item in the source array (fruit), along with its index (idx), and returns a String with these arguments included. The end result has only 3 prints to the console, despite the array actually containing 5 items – no action is taken for the empty slots for their value is undefined.

Note: the number of defined values in an array is not necessarily equal to the length property.

Setter Syntax

The syntax for the “setter” version of the Array.length property is as follows:

Array.length = number

number: a positive unsigned integer ranging from 0 to 4294967295

 

Related Articles

JavaScript – Arrays Explained

JavaScript – How to Use the Array sort() Method

JavaScript – How to Use switch Statements