How does the following piece of expression evaluates to "10" [duplicate] - javascript

This question already has answers here:
Why does ++[[]][+[]]+[+[]] return the string "10"?
(10 answers)
Closed 6 years ago.
I have recently seen an expression from a source, which looks something like below -
++[[]][+[]]+[+[]]
Entering this into the Chrome (Windows 7, Version 27.0.1453.94 m) console shows a result of "10".
Can someone explain what's happening here?
JSFiddle.

JavaScript is fairly flexible about converting between data types. The first thing to notice is that +[] evaluates to 0.* That lets us rewrite the expression as:
++[[]][0] + [0]
The next thing to notice is that ++[[]][0] is the preincrement operator applied to the first element of [[]]. Normally you can't apply ++ to an array, but JavaScript kindly converts the first element to 0, so the result is that ++[[]][0] evaluates to 1 (the first element of [[]] having now been incremented). It is kind of like this:
var a = [[]];
var b = ++a[0];
// now a will be [1] and b will be 1
That leaves us with:
1 + [0]
JavaScript now converts the int and the array to strings (since [0] is not a numeric value) and concatenates them together. Done!
* My understanding of how +[] becomes 0 is that it is a two-step process: first, [] is converted to a string primitive, which is the empty string. The empty string then converts to a number, which is zero. Via the same route, [1] evaluates to '1' and then to 1, [2] evaluates to 2, etc. However, [1, 2] evaluates to '1,2' which evaluates to NaN. (The last because the decimal point separator is ., not ,. I don't know what would happen if my locale were different.)

This expression stringifies valid Javascript constructs that yelds NaN, numbers, boolean undefined etc.
e.g.
+[] -> 0 //The unary plus operator is applied to the result of toString applied to an empty array (which is an empty string)
!+[] -> true
You can have a look also at this question,
and at the no alnum cheat sheets.

+[] is a number conversion from array to number which is 0.
and +[0] is also 0.
So the final result can be deduced to (++0) + [0] which is 1+[0].
And for a number adding an array. They are converted to string so the result is actually '10'.
You can log typeof(++[[]][+[]]+[+[]]) to verify.

Related

A function which returns 5 without having any alphabet or number in it

Can anybody explain the solutions to this kata on codewars to me
The instructions are -
Write a function/proc/lambda called _ that always returns 5.
Sounds easy right? Just bear in mind that you can only use the following characters:
~!##$%^&*()-_+=[]{}|:;"'<,>.?/`
How will these solutions work
_=_=>-~-~-~-~-~[]
_=()=>+!""+!""+!""+!""+!""
And there are many other solutions but I am not understanding any of them.
All I understand is that a function named _ is defined. How the expressions, being returned evaluate is beyond me.
Thanks in advance!
_=()=>+!""+!""+!""+!""+!""
At first this sets up an arrow function named _ :
_=()=>
And if that is called it evaluates this:
!""
An empty string "" is falsy, its negation (!) is truthy so we end up at:
true + true + true + true + true
As adding booleans doesnt really work, they are converted to numbers first (false -> 0, true -> 1)
-~-~-~-~-~[]
That is slightly more complicated.
~[]
That calls the bitwise negation operator onto an empty array. Again, the empty array is converted to a number, by first converting it into a string ([] -> "") and then parsing that as a number ("" -> 0), its negation is the number 2 ^ 32 - 1 (where 32 bits are set). Now doing
~-
on that converts that into a negative number (-) and then swaps all bits again. This is repeated until we arrive at 101 in binary.

Why is (([]===[])+/-/)[1] = 'a' and (1+{})[(1<<1)+1] = 'b' in javascript?

Recently I came across an interesting website that illustrates a Javascript Obfuscator: http://bl.ocks.org/jasonsperske/5400283
For example, (([]===[])+/-/)[1] gives a and (1+{})[(1<<1)+1] gives b.
I have tried hard to understand the evaluation sequence of these obfuscated result but was in vain.
Taking (1+{})[(1<<1)+1] as an example, I understand that << is the bitwise shift operator and will return 2, so the expression becomes (1+{})[3]. But then I cannot understand what does it mean by 1+{} and [3].
Google isn't really helpful to this problem as search engines don't like the brackets or slashes very much, so in case there are duplicate questions I'm sorry about that.
It's just obfuscation tricks.
for example :
[]===[] ===> false
and
([]===[])+/-/ ===> "false/-/" ( You could test it in the console by yourself)
So what is (([]===[])+/-/)[1] ? ( second char)
That's right :'a'
You may want to look at this also :
You could go step by step:
(([]===[]))
is simply false. Converted into a string "false/-/"and indexed by [1] gives you the a of the string "false".
The same goes for (1+{}) which results in the string "1[object Object]".
And 1<<1+1 is another way of writing 3 so this results in "1[object Object]"[3], which is simply b.
1+{}'s result is a string "1[object Object]", (1+{})[3] is to get the char of index 3 which is b.
The first example:
[]===[]
Comparing two different objects with ===, so the result is false, whose toString result is "false".
/-/ is a regex object, whose toString result is "/-/"
When you do false + /-/, which will concat using the result of .toString(), so the result will be "false/-/", and the second char is a.

Demistify Coercion in JavaScript

Can somebody help me in demystifying the following expression:
++[[]][+[]]+[+[]]
My Understanding
Going from left to right:
++[[]]: Not sure what this will evaluate to and how.
[+[]]: The +[] will be executed first and the unary operator will try to convert [] to number. Hence 0. So the output of [+[]] will be [0].
[+[]]+[+[]]: Which is equal to [0] + [0]. Here both the array's toString() method will be called and the output will be "00".
Basically I am not able to understand the left most expression i.e. ++[[]]
++[[]][+[]]+[+[]]
The expression will be broken into two as follows
++[[]][+[]] and [+[]]
Now [+[]] evaluates to [0] (As you already understand.)
Next consider ++[[]][+[]] equivalent to ++([[]][+[]]):
steps(process)
++[[]][0]
Now [[]] is an array containing a single array as its element. So [[]][0] evaluates to [] that is already allocated in memory.
Now as the 0-element array is already allocated in memory hence at the time of a mathematical operation it is converted into 0 and hence the memory location having the 0-element array when incremented using ++ operator the memory location gets the new value 1.
So ++[[]][+[]] finally evaluates to 1.
Now its 1+[0] i.e. 1+[0].toString() i.e. 1.toString()+"0" i.e. "1" + "0" i.e. 10.
[+[]] translates to [0]
++[[]][+[]] translates to 1
And 1 + [0] is equal to "10" in javascript

Why and how does ([![]]+[][[]])[+!+[]+[+[]]] evaluate to the letter "i"? [duplicate]

This question already has answers here:
Why does ++[[]][+[]]+[+[]] return the string "10"?
(10 answers)
(![]+[])[+[]]... Explain why this works
(1 answer)
Closed 9 years ago.
While reading this article posted on dzone I found a snippet of JavaScript originally posted on Twitter by Marcus Lagergren.
The following code apparently prints the string "fail"
(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]];
This involves implicit type casting and I'm trying to understand how exactly this line is interpreted.
I've isolated each character
(![]+[])[+[]] prints "f"
(![]+[])[+!+[]] prints "a"
([![]]+[][[]])[+!+[]+[+[]]] prints "i"
(![]+[])[!+[]+!+[]] prints "l"
I've also managed to break down the expressions returning each letter apart from "i"
letter "f"
![] an empty array is an Object, which according to ECMAScript documentation, point 9.2 evaluates to true when converted to a boolean so this is false
false+[] as per Point 11.6.1 both arguments of the binary + operator get converted to String, therefore we get "false"+"", which evaluates "false"
+[] a unary plus operator causes a ToNumber conversion followed by a ToPrimitive conversion if the argument is an Object. The result of such conversion is determined by calling the [[DefaultValue]] internal method of the object. In case of an empty array, it defaults to 0.
(ECMAScript Documentation, sections: 11.4.6, 9.3, 9.1 )
"false"[0] we're accessing the character at index 0, hence the "f"
letter "a"
Same story, the only difference here are additional conversions in the part in square brackets (which evaluates to a number to point at another character in the string "false"), triggered by the use of unary + and ! operators.
+[] evaluates to 0, as explained above.
!0 evaluates to true as defined in Section 9.2 and Section 11.4.9. First, 0 is converted to a boolean false and then the operator inverts the value.
+true again, the unary plus triggers a ToNumber conversion, which returns a 1 for binary true
(Section 11.4.6 and 9.3)
"false"[1] returns the second character in the string, which is "a"
letter "l"
!+[] evaluates to true as explained above
true+true using the binary + on primitives triggers a ToNumber conversion. In case of true, its result is 1 and 1+1 equals 2
"false"[2] - self explanatory
letter "i"
What leaves me stumped is the letter "i". I can see that the second part (in square brackets) evaluates to the string "10" and that the first part (in parentheses) returns "falseundefined" but I can't make heads or tails of how this is happening. Could someone explain it step by step? Especially the magic that happens with square brackets? (arrays and array access)
If possible, I'd like each step to contain a link to the underlying ECMAScript rules.
What I find the most cryptic is this part: [][[]]
Your cryptic part isn't all that cryptic if you rewrite it a little:
[]['']
[] will be coerced into a string because it isn't an integer, so you're looking for a property of [] with the name '' (an empty string). You'll just get undefined, as there is no property with that name.
As for the actual letter, break the expression up into the two main components:
The string ([![]]+[][[]]):
[![]] is [false].
[][[]] is undefined.
Add them together and you get "falseundefined".
And the index: [+!+[]+[+[]]]. Some whitespace and parentheses will make the operations much clearer: [+(!(+[])) + [+[]]]:
[+[]] is [0].
+[] coerces [] to an integer, so you get 0.
!+[] coerces 0 to a boolean and negates it, so you get true.
+!+[] coerces true to an integer, so you get 1.
Add them together, and you get ["10"].
When using a string to access the properties of the array and the string happens to be an element of the array, the string is coerced into an integer and you get back the actual element of the array:
> [1, 2, 3]["0"]
1
> [1, 2, 3]["1"]
2
So your final result is:
> "falseundefined"["10"]
"i"
Read this answer for an explanation of the [false] + undefined part.
([![]]+[][[]])[+!+[]+[+[]]] has two parts :
([![]]+[][[]]) and the other which you found yourself.
![] returns false. Then we use [...] to get the .toString() behavior of +.
([]+[] is the same as [].toString()+[].toString())
the [][[]] is undefined because we're trying to access the index [] (or [].toString(), which is '') of [] which is undefined.
Sorry for the previous answered, I misread your comment totally.

Obfuscated javascript code with binary values?

This code outputs D. The question is HOW?
alert([][(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]]()[([][(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]]()+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[+!+[]]](+[]+[+[]])[+!+[]]);
I understand that ![] is evaluated to false or 0 and so on, but how does it execute? And how can I convert this to something humans can understand and not only Jon Skeet?
Can someone break some piece of this code and explain me what's happening?
Well, evaluating the expression in parts, at the end it is equivalent to:
[]['sort']['call']()["btoa"]("00")[1]; // "D"
Which can be simplified to :
btoa("00")[1]; // "D"
How you can "decode it"?
Simply examine the operators used, for example, we can see at first that an array literal is used, then several bracket notation property accesses are done, and a couple of invocations.
How does it work?
The trick is to chain multiple type conversions, for example, to get the f letter:
(![]+[])[+[]]
If we examine the first part, in parentheses, ![]+[], we see a boolean negation, which will return false because an array object is always truthy, and then a concatenation.
That produces the string "false", then, the second part, we see a brackets applied to that string, to access a character, and the expression +[], which results in 0.
+[] gives zero because the Array's toString method returns an empty string, for an empty array like that one, and an empty string produces to zero when it is converted to number (the unary + operator in this example).
There are just tricks like that, things that produce a string, such "true", "false", "null", "undefined", etc... and more tricks to get the numerically.
For example to get a number -to access a character-, they use again cryptic type conversion:
+[]; // 0, equivalent to +""
+!+[]; // 1, equivalent to +true
!+[]+!+[]; // 2, equivalent to +true+true
!+[]+!+[]+!+[]; // 3, equivalent to +true+true+true
It does some tricks with the javascript type conversions. As CMS pointed out, it's equivalent to: []['sort']['call']()["btoa"]("00")[1];
They build the strings by pulling them out of things like false, etc.
For example, to get the s in "sort":
Get a "false": (![]+[]) -- ![] returns false and +[] converts it to a string.
Get the value 3 with: !+[]+!+[]+!+[] - each !+[] returns true, but when you add booleans you get an integer representation. e.g. true + true = 2
Get the s with string index access notation ("false"[3] = 's'): (![]+[]) [!+[]+!+[]+!+[]]
And now you have an s. They keep doing that until they have enough to access whichever method or property they want.
![] is false. ![] + [] evaluates to 'false'. +[] is 0 so !+[] is true, etc. javascript is very strange with its implied type conversions

Categories

Resources