What happens when an array object is incremented in JavaScript?

Question

A very simple question, but I could not find the answer anywhere. Check the following code.

var myArray = [0,1,2,3,4,5,6,7,8,9];

for(i=0; i < myArray.length; myArray++){
 console.log("Loop iteration step : "+i);
}

console.log("After array increment : " + myArray);

The myArray++ is not a typo. As you can see, the code will only run once. And after running it once, the loop terminates and myArray becomes NaN.

What is happening here to the array? How can an array become a NaN?

P.S: OK, more information since everyone is curious why myArray++ is not a typo. Yes, it was a typo at first. That's how I came up with this But that's not the problem I have here. I added the complete loop because I wanted to show the place I came up with this error.

Answer 1

EDIT: I have fixed some (shameful) misconception in terms of what the increment operand does. I fell into the same mistake of not looking up the actual docs. I hope this helps other users not fall upon the same mistake. (thank you for pointing that out @gurvinder372.)

I highly recommend you look up the documentation for "Increment" , the first sentence explains what's happening:

The increment operator increments (adds one to) its operand and returns a value.

One would think the Increment operator ++behaves as following:

myArray++ ---> myArray = myArray + 1;

When JavaScript evaluates myArray + 1 anything can come off that. In this case just try it out:

var myArray = [0,1,2,3,4,5,6,7,8,9];
myArray + 1
"0,1,2,3,4,5,6,7,8,91"

You could assume then it assigns a string back to myArray , when increment operator in the for loop evaluates, it determines that value is not a number, hence the NaN, and for loop exits before second iteration when condition i<NaNevaluates to false. Try it out:

var a = "a";
a++;
NaN

But that's not entirely correct (I messed up in terms of what myArray++ actually does under the hood, and it's better to understand what it's actually happening). Looking at the actual specs for Postfix Increment operator, we get the following:

Steps

myArray++

1. lhs = myArray

2. oldValue = Number(myArray)

   oldValue = NaN

3. newValue = oldValue + 1

   newValue = NaN + 1

   newValue = NaN

4. myArray = NaN
5. The Postfix Increment operator returns oldValue, NaN and now myArray=NaN

So what you end up with in your for loop after the first iteration when the Postfix Increment operator runs is:

for ([initialization]; [condition]; [final-expression])
    statement

for ([initialization]; i<myArray.length; NaN)
    statement

for ([initialization]; i<NaN.length; NaN)
    statement

for ([initialization]; i<undefined; NaN)
    statement

for ([initialization]; false; NaN)
    statement

I hope this helps clear up a bit what's happening in every step and part of the loop and why myArray ends up with value NaN.

Here's something interesting to try and see if you understand why in this infinite loop your myArraygets to stay as [...] but counter is NaN after second call.

var myArray = [1,2,3,4,5,6,7,8,9];
var counter = myArray;
for(let i=0; i<myArray.length; counter++){
    console.log("Infinite calls. Never leaving and counter is " + counter);
   // i++; if you don't want to eat up that infinite loop.
}

Answer

You get the infinite loops because your expression i<myArray.length will always evaluate to True since i is never modified. Meanwhile, counter will go to NaNafter first iteration because of what was explained at the start of the post. myArray stays cool because the Postfix Increment is done upon counter. Why does this loop iterate but the one you did, does not? Because in the one you did you end up changing the value of myArrayinto NaNforcing the expression in the loop i<NaN.length---> i<undefined to be false after first iteration, causing the loop to exit.

Answer 2

As per spec for Postfix Increment Operator

2. Let oldValue be ToNumber(GetValue(lhs)).

And

var myArray = [0,1,2,3,4,5,6,7,8,9];
Number(myArray) //NaN

Hence myArray++ => NaN

Demo

var myArray = [0,1,2,3,4,5,6,7,8,9];
console.log( "Just increment using postfix operator ", myArray++ );

myArray = [0,1,2,3,4,5,6,7,8,9];
console.log( "Number conversion ", Number(myArray) );