How to Use the Array length Property in JavaScript

  • 4 min read
  • November 29, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

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

Related Posts

How to Use parseInt() in JavaScript

How to Use parseInt() in JavaScript

The parseInt function parses a string argument and returns an integer. In its most simple form, the function looks like this: const x = ‘8’; console.log(parseInt(x));

How to Use promises in JavaScript

How to Use promises in JavaScript

JavaScript is a synchronous language, yet sometimes asynchronous behavior is required. For example, you may need to use an asynchronous function while waiting for data to

How to use the for…of Statement in JavaScript

How to use the for…of Statement in JavaScript

The for…of statement was introduced in ECMAScript2015 (ES6) and adds a powerful new type of loop to JavaScript. JavaScript offers many different types of loops, each