The JavaScript Array Length property tells you the length of an array: the number of indexed positions from zero up to (but not including) its length. It is useful for reading an array’s size, controlling loops, validating input, and deliberately resizing arrays. Its behavior with sparse arrays and array-like objects is also important in advanced JavaScript.
What Is the JavaScript Array Length Property?
length is a special, writable own property of every JavaScript array. It is a property, not a method, so use items.length, not items.length().
const fruits = ["Apple", "Banana", "Orange", "Mango"];
console.log(fruits.length); // 4For a dense array, valid indexes range from 0 through length - 1. The length is one greater than the highest present array index, even if some positions are empty.
Get an Array’s Length
const students = ["Rahim", "Karim", "Nadia"];
const totalStudents = students.length;
console.log(totalStudents); // 3The value counts array positions, not characters, properties inside objects, or the total values in nested arrays. An array can contain mixed types and each position still contributes one to its length.
const data = [100, "JavaScript", true, null, { id: 1 }];
console.log(data.length); // 5Use Length in a for Loop
Use i < array.length so the loop stops before the first invalid index.
const languages = ["JavaScript", "Python", "PHP", "Java"];
for (let i = 0; i < languages.length; i++) {
console.log(languages[i]);
}If the array changes during the loop, checking length on every iteration uses its current size. If you need a fixed iteration boundary, store the initial length first.
Length with while, for…of, and Reverse Loops
const colors = ["Red", "Green", "Blue"];
let i = 0;
while (i < colors.length) {
console.log(colors[i]);
i++;
}
for (const color of colors) {
console.log(color);
}
for (let j = colors.length - 1; j >= 0; j--) {
console.log(colors[j]);
}for...of iterates values without needing an index. A reverse loop starts at length - 1; for an empty array that begins at -1 and the loop body does not run.
Change or Resize an Array with length
The array length property is writable. Setting it to a smaller valid integer deletes indexed elements at or above the new length. This mutates the original array.
const numbers = [10, 20, 30, 40, 50];
numbers.length = 3;
console.log(numbers); // [10, 20, 30]
console.log(numbers.length); // 3Setting length to a larger integer extends the range but does not populate new positions with actual values; it creates holes.
const fruits = ["Apple", "Banana"];
fruits.length = 5;
console.log(fruits.length); // 5
console.log(2 in fruits); // false
console.log(fruits[2]); // undefinedA missing position and an existing property whose value is undefined both read as undefined, but the in operator distinguishes them.
Add an Element at the Current Length
The current length is the next index after the final position, so assigning there appends an element.
const fruits = ["Apple", "Banana"];
fruits[fruits.length] = "Orange";
console.log(fruits); // ["Apple", "Banana", "Orange"]For ordinary appending, push() is usually clearer. It returns the new length.
const numbers = [10, 20];
const newLength = numbers.push(30, 40);
console.log(numbers); // [10, 20, 30, 40]
console.log(newLength); // 4How push(), pop(), and splice() Affect Length
push() adds items and returns the updated length. pop() removes the final item and returns it. splice() inserts or removes items at a selected position, shifting later items as needed.
const values = [10, 20, 30];
const removed = values.pop();
console.log(removed); // 30
console.log(values.length); // 2
values.splice(1, 0, 15, 18);
console.log(values); // [10, 15, 18, 20]
console.log(values.length); // 4Unlike changing length directly, splice() preserves a packed sequence by moving later elements.
Sparse Arrays and Array Length
A sparse array has holes: indexes below its length that have no own property. Assigning to a higher index raises length to that index plus one.
const values = [];
values[3] = 40;
console.log(values.length); // 4
console.log(0 in values); // false
console.log(3 in values); // trueThus, length is not always the number of elements actually present. For example, an array with length 6 can have only one assigned index.
Empty Slots vs. Explicit undefined
const holes = new Array(3);
const values = [undefined, undefined, undefined];
console.log(holes.length, 0 in holes); // 3 false
console.log(values.length, 0 in values); // 3 trueReading index zero from either array returns undefined, but only the second array has an element there. This difference affects enumeration and many array methods.
Length and Common Array Methods
map() returns an array with the same length as the source and preserves holes. filter() returns a new, compact array containing only values that pass its test, so its length can be smaller.
const numbers = [10, 15, 20, 25, 30];
const doubled = numbers.map(n => n * 2);
const even = numbers.filter(n => n % 2 === 0);
console.log(doubled.length); // 5
console.log(even); // [10, 20, 30]
console.log(even.length); // 3reduce() returns an accumulated result, not an array length. You may still use length to check the input or report its size.
const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600
console.log(prices.length); // 3Check Whether an Array Is Empty
const users = [];
if (users.length === 0) {
console.log("The array is empty");
}When input may not be an array, check its type first:
function isEmptyArray(value) {
return Array.isArray(value) && value.length === 0;
}
console.log(isEmptyArray([])); // true
console.log(isEmptyArray("")); // falseLength with Nested and Multidimensional Arrays
An outer array’s length counts its own positions. It does not count all values in nested arrays.
const matrix = [[10, 20], [30, 40], [50, 60]];
console.log(matrix.length); // 3
console.log(matrix[0].length); // 2For irregular nested arrays, sum each row’s length when you need the total number of inner positions.
const rows = [[10, 20], [30, 40, 50], [60]];
const total = rows.reduce((sum, row) => sum + row.length, 0);
console.log(total); // 6