Diving Deep into Array Index Positions

by kirupa   |   filed under Arrays

When it comes to arrays in JavaScript, each item stored by our array has an address. Yes, a real address that you and I can use to precisely point to a location in our array:

This address is known as the index position (or index value). Unlike real-world addresses that have all sorts of complex combinations of words and numbers and punctuation marks, our array index positions are far simpler. They are just numbers starting from 0 and incrementing by 1 until every item in the array is accounted for:

We can see here that we have an array called people. Each item in our people array has an index position, and this index position starts at 0 with our first item. At index position 0, we have the value Mario. At index position 1, we have Luigi. At index position 2, we are at the end of our array where we have Yoshi.

Switching over to JavaScript, the above explanation can be represented as follows:

const people = ["Mario", "Luigi", "Yoshi"];

console.log(people[0]); // Mario
console.log(people[1]); // Luigi
console.log(people[2]); // Yoshi

Outside of rare situations, any time we are working with arrays, we will be working with index positions as well. This is why it is important for us to get a deeper understanding of how index positions work...or, in some cases, don’t work! Let’s dive into all of this now.

Onwards!

The Perfect Book to Learn About Arrays

To kick your array skills into the stratosphere, everything you need to be an arrays expert is available in this book.

BUY ON AMAZON

Out-of-Bound Index Positions

We are going to start our deep dive on index positions by looking at what happens when we specify an out-of-bound index position. The behavior we will observe will vary depending on whether we are reading a value or writing a value.

Reading from an Out-of-Bound Index Position

Whenever we try to read a value from an index position that doesn’t exist, JavaScript won’t throw an error. It will instead return undefined.

Take a look at the last line in the following code:

let people = ["Mario", "Luigi", "Yoshi"];

console.log(people[0]); // Mario
console.log(people[1]); // Luigi
console.log(people[2]); // Yoshi

console.log(people[5]); // undefined

Our people array has three items. Our last item, Yoshi, has an index position of 2. What we are doing in the last line is trying to read an item at index position 5. The thing is, there is no item at index position 5. What we will log is a value of undefined.

Writing to an Out-of-Bound Index Position

The behavior when writing to an out-of-bound index position is way different than reading from an out-of-bound index position. Take a look at the following code:

let people = ["Mario", "Luigi", "Yoshi"];

console.log(people[0]); // Mario
console.log(people[1]); // Luigi
console.log(people[2]); // Yoshi

console.log(people[5]); // undefined

We are writing the value of Koopa to the index position of 5. What happens in this case is that our array grows to accommodate this index position. If we visualized this, this is what we would see:

let people = ["Mario", "Luigi", "Yoshi"];
people[5] = "Koopa";

We are writing the value of Koopa to the index position of 5. What happens in this case is that our array grows to accommodate this index position. If we visualized this, this is what we would see:

Our array now has a size of 6 items. What is interesting here is that we have two empty array values at index positions 3 and 4. When we try to read the value of what is in these positions, we’ll see a value of undefined:

let people = ["Mario", "Luigi", "Yoshi"];
people[5] = "Koopa";

console.log(people[3]); // undefined
console.log(people[4]); // undefined

This is totally misleading. Both of these array locations do not actually store a value of undefined. These are truly empty locations, and this is indicated as such in the DevTools:

When we have empty values in our array, our array is said to have holes. An array with holes is known as a sparse array. There are a few techniques we can use to detect the presence of holes in an array. One approach is to use Object.keys to see what key values our array stores:

let people = ["Mario", "Luigi", "Yoshi"];
people[5] = "Koopa";

let keys = Object.keys(people);
console.log(keys); // ['0', '1', '2', '5']

With arrays, index positions will appear as keys. If there are any holes, those index positions will not appear in the list of keys. Notice that index positions 3 and 4 are not present.

Another approach is to use the in operator to check if a particular index position exists in our array or not. Take a look at the following snippet:

let people = ["Mario", "Luigi", "Yoshi"];
people[5] = "Koopa";

console.log(2 in people); // true
console.log(3 in people); // false
console.log(4 in people); // false

We can see that 2 in people is true because 2 is a valid index position in our array. Both 3 and 4 return false because they are holes and don’t have valid index positions defined.

function findHoles(array) {
    let holes = [];
    
    for (let i = 0; i < array.length; i++) {
        if (!(i in array)) {
            holes.push(i);
        }
    }
    return holes;
}


let myArray = new Array(5); // Creates a sparse array with 5 holes
myArray[2] = "Real value!!!"; // Assign a value to index 2
console.log(findHoles(array)); // Output: [0, 1, 3, 4]

Invalid Index Positions

A valid index position is a positive integer ranging from 0 to a number around 4.29 billion (aka an unsigned 32-bit integer). Yes...if we specified an index position at the upper maximum allowed when working with an array, we would have a really REALLY big array.

Now, what happens when we specify an invalid index position? What if we did something like this?

let people = ["Mario", "Luigi", "Yoshi"];
people["foo"] = "Toad";

When we specify an invalid index position, our array just keeps on working...kind of. The thing to keep in mind is that our array is a JavaScript object. When our array is faced with an invalid index position, it switches away from operating in “Array” mode and goes into “JavaScript Object” mode.

In the above snippet, the foo index position is treated just like any other key that a JavaScript object will have to store. This will be visualized as follows:

The thing to keep in mind is that our foo key and the Toad value, despite being defined on our people array, are not actually a formal part of our object’s array behavior. To reiterate, they are treated like a regular object key/value pair instead:

Only array entries with a valid index position are treated in an array-like manner. That sounds really bizarre, but we have several ways of checking that this is true. When we check the length of our people array using the length property, the length is only three:

let people = ["Mario", "Luigi", "Yoshi"];
people["foo"] = "Toad";

console.log(people.length); // 3

The length property does not count the Toad value stored under the foo property as being a part of the array behavior.

If we iterate through our array using a for loop, forEach, or map, we will see similar behavior. Only the items at valid array index positions are used as part of the iteration:

let people = ["Mario", "Luigi", "Yoshi"];
people["foo"] = "Toad";


// using for loop
for (let i = 0; i < people.length; i++) {
    console.log(people[i]);
}

// using forEach
people.forEach(myFunction);

function myFunction(item, index) {
    console.log(item);
}

// using map
people.map(x => console.log(x));

/*
Output for all the above approaches is:

    Mario
    Luigi
    Yoshi
    
*/

To really drive this point home, take a look at the following code:

let people = ["Mario", "Luigi", "Yoshi"];

people["foo"] = "Toad";

people.push("Boo")
people.push("Wario");

people[-2] = "Kamek";
people["bar"] = "Wiggler";

people.pop();

What do you think the final state of our people array will be? Click or tap on the blurry image below to unblur it and reveal the answer:

All array-related activities are clumped together and operated on in the special array region.

The remaining key/value pairs live outside of the array region and behave as regular objects. The order in which the keys are added matches the order in which they are specified in the code.

Conclusion

Index positions are critical to helping store and manipulate data in our arrays. Almost every data structure and algorithm relies on our understanding of them. Because JavaScript isn’t a strongly typed language, there are very easy ways for us to misuse index positions or have code that gives us the false illusion that our arrays are working properly.

What makes all of this tricky is that it doesn’t help that an invalid index position is often a perfectly valid object key. Hopefully this deep dive helped you to better understand how index positions work.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!