JavaScript Array length Property

The JavaScript array length property tells you the array's length and is normally one greater than its highest index. For a dense array, it matches the number of elements.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts.length); // 4
console.log(scripts[scripts.length - 1]); // HTML

Because indexes start at 0, a four-item array has indexes 0 through 3.

Read the Length of an Array Top ↑

const colors = ["red", "green", "blue"];
console.log(colors.length); // 3

length is a property, not a function, so do not write colors.length().

Use length to Access the Last Element Top ↑

The original page correctly centered on the common off-by-one issue. array[array.length] is beyond the last valid index.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts[scripts.length]);     // undefined
console.log(scripts[scripts.length - 1]); // HTML

For an empty array, array[array.length - 1] also returns undefined. Newer JavaScript also supports array.at(-1) for the last element, but the length-based form remains useful for understanding indexes.

Use Array length in a for Loop Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

for (let i = 0; i < scripts.length; i++) {
  console.log(scripts[i]);
}

The condition uses <, not <=, because the highest normal index is length - 1. See displaying array elements for other iteration choices.

Assign a Smaller length to Truncate an Array Top ↑

The length property is writable. Setting it to a smaller value deletes elements at indexes greater than or equal to the new length.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
scripts.length = 2;

console.log(scripts);        // ["PHP", "ASP"]
console.log(scripts.length); // 2

Clear an Array with length = 0 Top ↑

const scripts = ["PHP", "JavaScript", "Python"];
const sameArray = scripts;

scripts.length = 0;
console.log(scripts);   // []
console.log(sameArray); // []

This mutates the same array object, so other references see the cleared array. Compare this with reassigning array = [] in the emptying an array tutorial.

Increasing length Creates Empty Slots Top ↑

const values = ["A", "B"];
values.length = 5;

console.log(values.length); // 5
console.log(values[4]);     // undefined
console.log(4 in values);   // false

The new positions are empty slots. They are not automatically filled with undefined values.

Highest Index and Sparse Arrays Top ↑

Array length tracks the highest numeric array index plus one, which means a sparse array can have a large length with only a few populated positions.

const sparse = [];
sparse[100] = "last";

console.log(sparse.length);     // 101
console.log(Object.keys(sparse)); // ["100"]

So length should not always be described as the count of populated elements.

Count Words After Splitting a String Top ↑

The original tutorial used split() and length to count words. Trimming and splitting on whitespace handles repeated spaces better.

const text = "Welcome to plus2net. Learn web programming here.";
const words = text.trim() === "" ? [] : text.trim().split(/\s+/);
console.log(words.length); // 7

Common Array length Mistakes Top ↑

• Calling length() as though it were a method.
• Using array[array.length] for the last item.
• Looping with i <= array.length.
• Assuming length always equals the count of populated values in sparse arrays.
• Assigning a smaller length without realizing higher-index elements are deleted.
• Increasing length and assuming JavaScript fills the new slots with values.

Array Creation and length: Video Top ↑

← Array Reference Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: