Array.length: I bet, You're missing something about it.

Arrays are the most used data structure in the programming world and while working we often required to find the length of the array.

In JavaScript, the .length property gives us the length of an array. This length property in not straightforward, It can get a little bit tricky sometimes.

Let's explore .length in detail and how JavaScript computes it internally.

const arr = [10,20,30];
const length = arr.length;
console.log(length);        // 3
console.log(arr.length);    // 3

A little information about Arrays -

Arrays in JavaScript are objects where the index happens to be key and array elements are corresponding values.

Don't believe me? Here is the proof

const arr = [10,20,30];
const length = arr.length;
console.log(length);        // 3
console.log(typeof arr);    // object
console.log(Object.keys(arr)); // ["0", "1", "2"]

Notice the keys we got are indices of the array.

How array.length is computed behind the scenes?

Let's go step by step

JavaScript goes through all the keys of the Array object.
It finds the last key. "2" in this case.
Add up one to the last key and returns. i.e. 3 is returned.

So the way it works has some interesting consequences

suppose we say,

arr[5] = 10 // this line sets the key "5" to arr. Now,

console.log(arr.length) // prints 6

why? because It goes all over the keys of arr, finds "5" as the last key, adds one to it & returns.

const arr = [10,20,30];
arr[5] = 60;
const length = arr.length;
console.log(length);       // 6

But manually setting an index to a higher number creates empty slots in the array with undefined values. See in the example below for clarity.

const arr = [10,20,30];
arr[5] = 60;
const length = arr.length;
console.log(length);       // 6
console.log(arr) // [10, 20, 30, undefined, undefined, 60]

Notice that elements in arr are undefined in middle. Because we had three elements earlier and after that we set the 6th element manually but didn't set the 4th and 5th one.

Truncating array using the length property

We can truncate or even empty our original array by setting array.length to a lower value.

For ex, if we say arr.length= 2

This means we are telling JS that we only want first 2 elements, so JS removes all other elements.

arr.length = 0 // this makes the arr empty

See example below

const arr = [10,20,30];
arr.length = 2;
console.log(arr) // [10, 20]

// Making array empty

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

Last but not least

When we use methods like forEach, map etc. on this array , we only get the actual elements.

This is because these methods don't go through empty slots created by extending the length property of the array.

const arr = [10,20,30];
arr.length = 6;
console.log(arr); //[10, 20, 30, undefined, undefined, undefined]
arr.forEach(e => console.log(e));

//Output
10
20
30

Notice that it doesn't print undefined stuff.

Summary

Array.length is used to find the length of an array in JavaScript.
Arrays are basically objects having indices as key and elements as corresponding values.
.length is tricky, can be used to change the size of the array easily.

If you got any questions or doubts, feel free to ping me on Twitter.

twitter.com/faheem_khan_dev

I hope it was a great read for you. If you have any feedback please share it in the comment below. Also, if you find it helpful, please like and hit the follow button on the right top corner.