[]['map']['constructor']('console.log(1)')();
This line of code outputs '1' in my js file, by itself. According to Martin Kleppe, how this breaks down:
[]['map'] becomes function
function['constructor'] becomes Function
Function('console.log(1)')() becomes eval('console.log(1)')
Could there possibly be an Explain Like I'm Five Stacks Edition for this, in simpler Javascript logic? Because when Martin explained it, he had skipped many steps for a beginner like me :(
[]['map']['constructor']('console.log(1)')();
Remember JavaScript supports square-bracket- and dot-syntax for interrogating objects.
So the first part is equivalent to
[].map.constructor
...where [] creates a new array. This array inherits (on its prototype) a map() method, which in turn inherits, on its prototype, a reference to the Function constructor (since map() is a function.)
So all of this was just a convoluted route to Function(). We could replace map() with any other array method e.g. forEach or reduce, or not use arrays at all, e.g.
document['querySelector']['constructor']
...since every method inherits from Function().
Now, Function() allows you to create dynamic functions by passing the body of the function as a string to its first and only argument.So:
var myFunc = new Function('alert("hello from my func");');
This technique is almost never used and comes with the same security risks as eval(). There's rarely a good reason (or safe way) to evaluate string as code, in any language. (That said, it's worryingly common in frameworks as a means to allow JS-based instructions and syntax in DOM attributes, for example, e.g. Framework7).
In your example, the function being dynamically created is one which logs the integer 1 in the console.
Finally, the trailing () immediately executes our created function. It's not assigned to a variable; it's merely executed.
[]
Thats an Array Literal. It creates a new array.
['map']['constructor']
This is bracket notation for accessing an objects ( the arrays) property. Cause map is a function, its constructor is the global Function function.
('console.log(1)')
This calls the Function function with some code as the first argument. This returns a new function with the code we passed inside of it ( bad black magic ).
()
Now we call that function.
[]['map']['constructor']('console.log(1)')();:
[]: is an array (instance of Array)['map']: is bracket notation accessing the property map of the array from 1.['constructor']: accessing using the bracket notation the constructor property of the function map from 2. which is Function('console.log(1)'): Calling Function from 3. with the string "console.log(1)" that will return a function whose definition is: function() { console.log(1) }.(): calling the function returned from 4. which will log 1 to the console.