Blue number in Chrome Dev Console?

Question

In javascript I have a variable that I push to console.log then increment it and push it to the log again, which shows the below in the Chrome Dev Tools.

This variable has done some freaky stuff, like if I try to use the += operator to add to it, it actually puts the added value after the number (for example if x=5 and I did x+=3, x would equal 53). The really boggling part of this is that incrementing it with ++ works as expected, but my question isn't why that's happening but rather why the incremented number is blue in the console? If anyone could tell me possible cases where the above would happen that'd be great, but I have a feeling the blue entry in the console is related to it.

So basically why, in the Chrome Dev Console, would a number show up in blue?

Wrongly

Answer 1

When you print a string using console.log you get black output. However, if you print a number the output is blue. See the screenshot bellow (don't mind the lines with 'undefined' value as this is what console.log() returns by default).

And you are right, your problems with += are somehow connected to these colours. You were adding number to a string which resulted in concatenation (53).

Jae

Well if it's a string that explains why using += would tack it to the end, now I just need to figure out why it's a string in the first place. Thank you very much! – Wrongly

@Konrad, What's the reason for the color change? – Fi

Answer 2

Note the difference between using commas and plus signs in console.log()

console.log( 'console.log("(" + 1 + ")"); // string concat' );
console.log("( " + 999 + " )"); 

console.log( 'console.log("(", 1, ")"); // string, number (blue), string' );
console.log("(", 999, ")");

Echelon