Arrays in JavaScript are zero-based. This means that JavaScript starts counting from zero when it indexes an array. In other words, the index value of the
first element in the array is “0” and the index value of the second element is “1”, the third element’s index value is “2”, and so on. This is not unusual in computer programming languages. The JavaScript array length property is given in a one-based context. So, a JavaScript array with one element will have a “length” of “1”. If a JavaScript array has four elements, then that array’s “length” property will have a value of “four”. But [and here is the point where many get confused], if a
JavaScript array has four elements, the last element has an index of “3”. This is because, again, JavaScript arrays are zero-based. In Example # 1, we have an array with five elements. The console.log[] statement reflects this as well because the “length” property of this array is “5” [i.e. this is a one-based value]. So, even though the array has a length of 5, the first element has an index of 0, and the last element [the 5th element] has an
index of 4. Now this is the most important point, and it’s what explains the “off” reference: the length of the array is always one higher than the index of the last array element because the array indexes are zero-based, but the length property is one-based. In Example # 2, we create a variable who’s value is one LESS than the length of our array. So, since our array’s “length” property is “5”, our “len” variable is equal to “4”. Our loop
will start at 0, and run until it equals “4”. This IS five iterations, but we are starting at 0, not one. So, since JavaScript starts counting Arrays from Zero, our code successfully outputs the value of each element in the array. This is a very common technique: when you want to iterate an array, you create a for-loop, and set the max iterations to “one less than” the length of the array. Now while this may seem tedious, it’s actually a rock-solid pattern to follow, because the array’s
length will always [always] be one higher than the index of the last element in the array. So, it follows that if your loop iterates X times, and X equals “one less than” the length of the array, then your loop will always iterate over every element in the array. This takes a little getting used to, but once you do, it becomes second nature. JavaScript arrays are zero-based. The JavaScript array “length” property returns
the number of elements in an array, but it is a one-based value. So whenever you want to use the “length” property to say “hey, start from the first element in an array and go until you reach the last element,” start from zero, and go until you reach the array’s “length” property value, but “minus one!”The “length” property of a JavaScript array is a very helpful tool, but why is array length
always one “off”?The Array Length – Example # 1
One Less Than the Length – Example # 2
Console Output – Example # 3
Summary
Helpful Links for JavaScript Arrays
JavaScript Array Management with Push[], Pop[], Shift[] and Unshift[]
Two Ways to Dynamically Append an Element to a JavaScript Array
The The value of the length
property of an object which is an instance of type Array
sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.Try it
Description
length
property is an integer with a positive sign
and a value less than 2 to the 32nd power [2^32].
const listA = [1,2,3];
const listB = new Array[6];
console.log[listA.length];
// 3
console.log[listB.length];
// 6
listB.length = 4294967296; //2 to the 32nd power = 4294967296
// RangeError: Invalid array length
const listC = new Array[-100] //negative sign
// RangeError: Invalid array length
You can set the length
property to truncate an array at any time. When you extend an array by changing its length
property, the number of actual elements increases; for example, if you set length
to 3 when it is currently 2, the array now contains 3 elements, which causes the third element to be a non-iterable empty slot.
const arr = [1, 2];
console.log[arr];
// [ 1, 2 ]
arr.length = 5; // set array length to 5 while currently 2.
console.log[arr];
// [ 1, 2, ]
arr.forEach[[element] => console.log[element]];
// 1
// 2
As you can see, the length
property does not necessarily indicate the
number of defined values in the array. See also Relationship between length
and numerical properties.
Writable
: If this attribute set tofalse
, the value of the property cannot be changed.Configurable
: If this attribute set tofalse
, any attempts to delete the property or change its attributes [Writable
,Configurable
, orEnumerable
] will fail.Enumerable
: If this attribute set totrue
, the property will be iterated over duringfor
orfor...in
loops.
Examples
Iterating over an array
In
the following example, the array numbers
is iterated through by looking at the length
property. The value in each element is then doubled.
const numbers = [1, 2, 3, 4, 5];
const length = numbers.length;
for [let i = 0; i 3] {
numbers.length = 3;
}
console.log[numbers]; // [1, 2, 3]
console.log[numbers.length]; // 3
Create empty array of fixed length
const numbers = [];
numbers.length = 3;
console.log[numbers]; // [empty x 3]
Specifications
ECMAScript Language Specification # sec-properties-of-array-instances-length |
Browser compatibility
BCD tables only load in the browser