JavaScript Array Length: Get and Set Array Length

With JavaScript, you're not only limited to retrieving the length of an array, but you can also manipulate the array's data by changing its length programmatically.

This article will teach you how to get and set array length with JavaScript.

What is the JavaScript.Array length Property?

length is a property of the JavaScript.Array class and allows you to return or set the number of elements within a given array.  Array elements could include strings, integers, objects, additional arrays, and more.

The value of the length property is a positive integer with a value less than 2 to the 32nd power, or 232.

Getting JavaScript Array Length

Here's a simple example showing how to retrieve the length of an array with JavaScript:

var colors = ["Red", "Green", "Blue", "Purple"];

console.log(colors);
// 4

There are four elements, so the resulting output is 4.

Setting JavaScript Array Length

You can also set the length of an array with JavaScript, altering an array's contents. By setting the array length to a smaller length than that of the actual length, you're truncating the excess elements off the end of the array.

Let's assume you have the same four colors as above, but you set the length of the array to a smaller amount than that of the total array length:

var colors = ["Red", "Green", "Blue", "Purple"];

colors.length = 2;

console.log(colors);
// ["Red", "Green"]

Out of curiosity, I checked to see what would happen if you set the length of the array larger than its actual length and came up with the following result:

var colors = ["Red", "Green", "Blue", "Purple"];

colors.length = 10;

console.log(colors);
// ["Red", "Green", "Blue", "Purple", empty x 6]

The remaining six elements in the array don't return as null or even as array nodes themselves, just empty elements.

You can also empty an array completely by setting its length to 0:

var colors = ["Red", "Green", "Blue", "Purple"];

colors.length = 0;

console.log(colors);
// []

Property Attributes Available

There are three properties available for the JavaScript.Array length property:

  • Writeable: A value of true indicates the value of the property can be changed, while a value of false indicates that the value cannot be changed.
  • Configurable: If this attributes is set to false, attempts to change or delete any of the three property's attributes will fail.
  • Enumerable: Setting this attribute to a value of true allows the property to be iterated over during a for or for..in loop.

Conclusion

The JavaScript.Array length property allows you to get an array's length as well as set the length by truncating or appending additional elements as necessary, and is supported by all browsers.

There are additional JavaScript array manipulation functions available that allow you to manipulate data within an array, also affecting its length.

Last Updated: February 08, 2021
Created: December 12, 2020

Comments

There are no comments yet. Start the conversation!

Leave a Comment

  Wrap code in a <code> and </code> block.
Subscribe to the newsletter to receive updates on new articles!
Remember my info