Why is {}+{} in the same browser works have different results - javascript

I'm in the Google browser console run is like this
{}+{} => "[object Object][object Object]"
But I run in the source file is like this
{}+{} => NaN
I'm in the firefox browser console run is like this
{}+{} => NaN

I was preparing another answer that basically said, "I don't know but here are some tests that I done and got similar results". But suddenly I realized the real answer.
I think this is somewhat an undefined behaviour in javascript syntax. Chrome console developers maybe were aware of this and whenever you write {}+{} in console, it turns the code into ({}+{}). Try ({}+{}) or a={}+{} and you will get the same result everywhere which is "[object Object][object Object]". That is the result of applying plus operator to two objects in javascript.
When you write some code in snippet however, it is eval'ed as it is. And it calculates {}+{} as NaN. But NaN is not the result of adding two objects. {} is object constructor literal. But it is also used to scope. So what is evaluated is equal to:
{ // Open scope
// You can write any working code here
// Only the result of the last statement is printed to console
} // Close scope
+{} // Result of this is NaN
// + is the unary number cast operator not the binary addition operator
You can confirm this by using an operator that is only unary. Take this for example:
{}~{}
// Error in Chrome console as it is turned into ({}~{}) which is bad syntax
// -1 in eval as it is the result of ~{}

Related

ES6 : Output contains undefined along with results and I cannot understand why? [duplicate]

Every time console.log is executed, a line saying undefined is appended to the output log.
It happens in both Firefox and Chrome on Windows and Linux.
If you're running console.log() from a JS file, this undefined line should not be appended.
If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.
I tested both cases on my Chrome (Mac ver 23.0.1271.101) and indeed I see the undefined line when I run it inside the console. This undefined also appears when I write this line in the console: var bla = "sdfdfs"
Although talkol´s answer is ok, I try to put it more straight:
JavaScript is designed as a dynamic language which means that the type (string, void, boolean …) of a function return value is not pre-defined. If a function does not use a return statement or an empty return statement with no value, JavaScript automatically returns undefined. That means that in JavaScript every function returns something, at least undefined.
So the function console.log() in Chrome console either uses no or an empty return statement, so that the return value of this function is undefined. This function return value gets also displayed in the Chrome console.
[If somebody know where to find the definition of the console.log() function in Google Chrome source code, please comment with the link, then we can even go further and look at the real code, would be nice.]
Sources:
https://stackoverflow.com/a/20915524/1744768
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Follow the picture to solve this problem:
Ctrl + Shift + J
Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
The result of an assignment expression is the value that was assigned.
So the JavaScript engine just does an assignment but the console does one extra step which is to set whatever my last statement is, give you that value back. That’s why it prints 2:
In statements that have no return value you get something like undefined.
undefined is the return value of the console.log() in Chrome developer tools. You will get undefined if you do the following in Chrome developer tools, and you will see that you get undefined even though x has the value 3.
> let x = 3
> undefined
What you can do is simply create your own console.log like function with a return to change this behavior when doing a lot of coding in the developer console. Here is an example of what that looks like in the developer console:
console.log('I hate seeing the next line stating the obvious.')
I hate seeing the next line stating the obvious.
undefined
log = function(l){return l}
function log()
if(1 === 2){console.log('1 is not equal to 2.')}else{log('No Shit Sherlock.')}
"No Shit Sherlock."
That undefined you see in console is the return value of the function:
check out these two variants:
This one returns nothing
This one returns something:
Remember one thing. Any function that has some definition will always return something, If you skip the return keyword, it will eventually return undefined when you call it.
If you're using console.log to emit multiple values in a single line, here's a hacky alternative:
var1 + ' ' + var2 + ' ' + var...
(Better ideas welcome, this might blow up in certain circumstances)

JavaScript - Different outputs on different compiler (undefined on Chrome) [duplicate]

Every time console.log is executed, a line saying undefined is appended to the output log.
It happens in both Firefox and Chrome on Windows and Linux.
If you're running console.log() from a JS file, this undefined line should not be appended.
If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.
I tested both cases on my Chrome (Mac ver 23.0.1271.101) and indeed I see the undefined line when I run it inside the console. This undefined also appears when I write this line in the console: var bla = "sdfdfs"
Although talkol´s answer is ok, I try to put it more straight:
JavaScript is designed as a dynamic language which means that the type (string, void, boolean …) of a function return value is not pre-defined. If a function does not use a return statement or an empty return statement with no value, JavaScript automatically returns undefined. That means that in JavaScript every function returns something, at least undefined.
So the function console.log() in Chrome console either uses no or an empty return statement, so that the return value of this function is undefined. This function return value gets also displayed in the Chrome console.
[If somebody know where to find the definition of the console.log() function in Google Chrome source code, please comment with the link, then we can even go further and look at the real code, would be nice.]
Sources:
https://stackoverflow.com/a/20915524/1744768
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Follow the picture to solve this problem:
Ctrl + Shift + J
Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
The result of an assignment expression is the value that was assigned.
So the JavaScript engine just does an assignment but the console does one extra step which is to set whatever my last statement is, give you that value back. That’s why it prints 2:
In statements that have no return value you get something like undefined.
undefined is the return value of the console.log() in Chrome developer tools. You will get undefined if you do the following in Chrome developer tools, and you will see that you get undefined even though x has the value 3.
> let x = 3
> undefined
What you can do is simply create your own console.log like function with a return to change this behavior when doing a lot of coding in the developer console. Here is an example of what that looks like in the developer console:
console.log('I hate seeing the next line stating the obvious.')
I hate seeing the next line stating the obvious.
undefined
log = function(l){return l}
function log()
if(1 === 2){console.log('1 is not equal to 2.')}else{log('No Shit Sherlock.')}
"No Shit Sherlock."
That undefined you see in console is the return value of the function:
check out these two variants:
This one returns nothing
This one returns something:
Remember one thing. Any function that has some definition will always return something, If you skip the return keyword, it will eventually return undefined when you call it.
If you're using console.log to emit multiple values in a single line, here's a hacky alternative:
var1 + ' ' + var2 + ' ' + var...
(Better ideas welcome, this might blow up in certain circumstances)

node js REPL console prints undefined [duplicate]

Every time console.log is executed, a line saying undefined is appended to the output log.
It happens in both Firefox and Chrome on Windows and Linux.
If you're running console.log() from a JS file, this undefined line should not be appended.
If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.
I tested both cases on my Chrome (Mac ver 23.0.1271.101) and indeed I see the undefined line when I run it inside the console. This undefined also appears when I write this line in the console: var bla = "sdfdfs"
Although talkol´s answer is ok, I try to put it more straight:
JavaScript is designed as a dynamic language which means that the type (string, void, boolean …) of a function return value is not pre-defined. If a function does not use a return statement or an empty return statement with no value, JavaScript automatically returns undefined. That means that in JavaScript every function returns something, at least undefined.
So the function console.log() in Chrome console either uses no or an empty return statement, so that the return value of this function is undefined. This function return value gets also displayed in the Chrome console.
[If somebody know where to find the definition of the console.log() function in Google Chrome source code, please comment with the link, then we can even go further and look at the real code, would be nice.]
Sources:
https://stackoverflow.com/a/20915524/1744768
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Follow the picture to solve this problem:
Ctrl + Shift + J
Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
The result of an assignment expression is the value that was assigned.
So the JavaScript engine just does an assignment but the console does one extra step which is to set whatever my last statement is, give you that value back. That’s why it prints 2:
In statements that have no return value you get something like undefined.
undefined is the return value of the console.log() in Chrome developer tools. You will get undefined if you do the following in Chrome developer tools, and you will see that you get undefined even though x has the value 3.
> let x = 3
> undefined
What you can do is simply create your own console.log like function with a return to change this behavior when doing a lot of coding in the developer console. Here is an example of what that looks like in the developer console:
console.log('I hate seeing the next line stating the obvious.')
I hate seeing the next line stating the obvious.
undefined
log = function(l){return l}
function log()
if(1 === 2){console.log('1 is not equal to 2.')}else{log('No Shit Sherlock.')}
"No Shit Sherlock."
That undefined you see in console is the return value of the function:
check out these two variants:
This one returns nothing
This one returns something:
Remember one thing. Any function that has some definition will always return something, If you skip the return keyword, it will eventually return undefined when you call it.
If you're using console.log to emit multiple values in a single line, here's a hacky alternative:
var1 + ' ' + var2 + ' ' + var...
(Better ideas welcome, this might blow up in certain circumstances)

{}+{}="[object Object]", but {}+[]=0? [duplicate]

I noticed today that Chrome 49 no longer outputs NaN when you type {}+{} into the console. Instead it outputs the string [object Object][object Object].
Why is this? Did the language change?
Chrome devtools now automatically wrap everything that begins with { and ends with } in an implicit pair of parentheses (see code), to force its evaluation as an expression. That way, {} creates an empty object now. You can see this if you go back through the history (↑), the previous line will be contained in (…).
Why? I don't know, but I could guess it reduces confusion for newbies that don't know of the block-vs-object-literal thing, and it's also more helpful if you just want to evaluate an expression.
And in fact that's the reasoning, as discussed in bug 499864. Pure convenience. And because node REPL had it as well (see code).
If you hit the up arrow after checking this, you'll notice that instead of {} + {} it displays ({} + {}), which results in "[object Object][object Object]".
In comparison, in Firefox, {} + {} still displays NaN, but if you do ({} + {}) it also displays "[object Object][object Object]".
So, it looks like Chrome is adding the surrounding parenthesis automatically when it sees this operation.
As of Chrome 54 with regards to the console:
Unfortunately, I added the Clippy quote myself. The console gives no information about what it has done for you.
The new rules are incredibly simple saving us the trouble of laboriously typing these 2 difficult charcters o= or 0, before pasting Object Literals into the console:
If you have code that starts with: optional whitespace,(no comments permitted) followed by a {;
and that code could be interpreted as an object;
and that object is followed by no other code, unless:
the code after the first object is a binary operator,
then there can be as many operations as you like including groupings
provided the final operator has an Object literal in the right hand position;
and that final Object has not been grouped in parens
and that code is not terminated with a semicolon
and there are no comments following the code (internal comments are permitted so long as they are not in the initial or final position)
then and only then will your JavaScript (which may or may not actually be valid code) will be re-intrepted as a valid Object. You will not be informed that your code has been reinterpreted.
{wat:1}),({wat:2} Is finally an error again.
{let i=0;var increment=_=>i++} is correctly allowed, finally, which is quite a nice way of doing closures.
However, the following is incorrectly an object, this is just as a convenience as mentioned by #Bergi, it interprets JS wrong to help you! The spec says it is a block with a labeled statement "foo" with a literal 1 that is not assigned to anything.
{foo:1}
The above should be the same as
if(1) {
foo: 1
}
The following is treated correctly as a block... because it has a comment in front of it!
//magic comment
{foo:1}
So is this:
{foo:1}
//also magic
This is an Object:
{foo:
//not so magic comment
1}
This is an error
//not so magic comment
{foo:1}.foo
So is this:
{foo:1}.foo
This is fine:
1..wat
undefined
so is this:
['foo'][0]
The next one is correctly interpreted as an object whacked into the expression position with a 0, which is generally how we unambiguously ensure we have an expression instead of a statement.
0,{foo:1}.foo
I don't get why they wrap the value in parens. JS has some ridiculous design decisions, but trying to make it behave nicer in this one situation isn't really an option, the console needs to run JS correctly, and we need to be confident that chrome isn't just guessing that it thinks we really meant it to do something else.
If you don't like comma operators you can use assignment
x = {foo:1}.foo
Because as it stands
{} + {} + {}
"[object Object][object Object][object Object]"
;{} + {} + {}
"NaN[object Object]"
Crazy and consistent I can deal with... crazy and inconsistent no thank you!

Weird JS syntax: math operator in function declaration

I just played with Twitter API and found very weird construction. It's division operator between function name and arguments passing.
c/({"count":8098,"url":"http:\/\/example.com\/"});
I supposed that this should throw parser exception, but it works − just returning NaN instead of undefined. Also it works similar with * and - operators, while + returns c.toString() (or .valueOf, I dunno).
Even more, it's really syntax error thrown if i don't pass object to function. Here's examples:
function c() {}
>> undefined
c
>> function c() {}
c/()
>> SyntaxError: Unexpected token )
c/({});
>> NaN
c+({})
>> "function c() {}[object Object]"
c({})
>> undefined
I ran this in Chrome, but I belive it works everywhere if Twitter put it in response.
So. Why this even work, and how it works exactly? I believe this somehow releated to function returning value and its implicit type coercion, but I still don't get it.
Your URL is not escaped in that API call so twitter reads it incorrectly and creates meaningless syntax.
If you set the URL parameter to an escaped value (via encodeURIComponent) it will produce c({some:"Object"}) which is a JSONP response - JSONP is inherently a function call and works by injecting a script tag.
So, twitter does not produce this response deliberately, you're passing it problematic parameters and it's not failing gracefully.
As for why dividing a function in an object is NaN - in JS generally math operators don't throw very often. JavaScript is telling you - you tried to perform a math operation that doesn't make sense and the result is not a number - NaN.
For the funky results:
c/()
Is just invalid syntax, simply put you're diving something by nothing, 5/() would fail equally well.
c/({})
Diving a function by an object makes no sense, so it is giving you "Not a Number". I can add a spec quote but I don't think there is much more to add beyond "There is no way to interperet this differently".
c+({})
The + operator performs string concatenation in addition to numeric addition - so what's happening here is that toString is called for both the function and the object and you see the concatenated result.
c({})
This is just the return value of the function call

Categories

Resources