Can anyone explain why the following code works when run as part of function, but it produce strange result when run by itself in the Chrome Console window?

var foo = function() { 
    var x = 1;
    while (x<3) { 
        console.log(x);
        x = x+1;
    }
}

foo(); // This prints 1,2 as expected

But when I run just while part directly in Chrome Console I get 1,2,3 which makes no sense (see image for the output):

    var y = 1;
    while (y<3) { 
        console.log(y);
        y = y+1;
    }

    // This prints 1,2,3 in the console

Note that there somewhat similar question about console.log resulting in undefined (Chrome/Firefox console.log always appends a line saying undefined), but there is no function call in my sample and while does not ever return any value.

Can anyone explain why the following code works when run as part of function, but it produce strange result when run by itself in the Chrome Console window?

var foo = function() { 
    var x = 1;
    while (x<3) { 
        console.log(x);
        x = x+1;
    }
}

foo(); // This prints 1,2 as expected

But when I run just while part directly in Chrome Console I get 1,2,3 which makes no sense (see image for the output):

    var y = 1;
    while (y<3) { 
        console.log(y);
        y = y+1;
    }

    // This prints 1,2,3 in the console

Note that there somewhat similar question about console.log resulting in undefined (Chrome/Firefox console.log always appends a line saying undefined), but there is no function call in my sample and while does not ever return any value.

• javascript
• google-chrome
• console

• 5 Do you have a jsFiddle proving your statement? – Lucero Commented May 30, 2013 at 1:37
• 1 If the second one returns that, you should trade in your browser for a newer version ? – adeneo Commented May 30, 2013 at 1:38
• 2 @fenderog both log the same for me, as expected - 1,2 – momo Commented May 30, 2013 at 1:38
• 5 Friends, before you go downvoting this, it's a much more reasonable question than you may think. Try pasting that second piece of code into the Chrome console and you will see why it might be confusing. – Michael Geary Commented May 30, 2013 at 1:47
• 2 @Isaac and Lucero - you are indeed right: the question as originally worded was definitely confusing. (And sorry for the harsh wording of my comment originally - I toned it down!) Mike Christensen made an excellent edit to the question, adding a screenshot showing the confusing output from the Chrome devtools. Much better with that screenshot! – Michael Geary Commented May 30, 2013 at 2:00

2 Answers 2

You are being misled by Chrome's JavaScript console.

In addition to the output of console.log() calls, the console also displays the value of the last expression executed in the code you run there.

In your first example, the last expression is the foo(); call at the end. foo() doesn't return any value, so the result is undefined and that's what's printed after the 1 and 2 that your console.log(y) calls print.

In the second example, console.log() is still being called only twice, again printing 1 and 2. The 3 printed after that is not from a console.log() call, it's the value of the last expression executed, the final y = y + 1; that brings y up to 3 and causes the while loop to terminate.

Here's another example. Paste this code into the console:

var y = 1, message = '';
while( y < 3 ) { 
    console.log( y );
    y = y + 1;
    message = 'y is ' + y;
}

Now it prints:

1
2
"y is 3"

The 1 and 2 are again from the console.log(y) calls as before. Like the other examples, after the code finishes running it prints the last expression executed—but now that expression is:

message = 'y is ' + y;

where y is again 3 at the end.

Or a much simpler example. Enter this in the console:

console.log( 'Hi!' );

It prints:

Hi!
undefined

The Hi! is your console.log() executing, and the undefined is the return value of the console.log() call.

Another clue here is the little symbol to the left of the last value printed to the console in each of the examples. It looks like that symbol means that the dev tools are printing the value automatically instead of from a console.log() call.

It isn't just restricted to the console, as shown via:

<script>
console.log(eval("var y = 1;while (y<3) { console.log(y);y = y+1;}"))
</script>

That is a rough way to go about replicating the output, but it may be noted that eval will preform in the same way