Crear rango en JavaScript-sintaxis extraña

Entender este "hackeo" requiere entender varias cosas: {[89]]}

1. Por qué no solo hacemos {[24]]}
2. Cómo maneja Function.prototype.apply los argumentos
3. Cómo Array maneja múltiples argumentos
4. Cómo maneja la función Number los argumentos
5. Qué hace Function.prototype.call

Son temas bastante avanzados en javascript, por lo que será más que largo. Empezaremos desde el principio. ¡Abróchate el cinturón!

1. ¿Por qué no solo Array(5).map?

¿Qué es una matriz, ¿en serio? Un objeto regular, que contiene claves enteras, que se asignan a valores. Tiene otras características especiales, por ejemplo la variable mágica length, pero en su núcleo, es un mapa regular key => value, al igual que cualquier otro objeto. Juguemos un poco con arreglos, ¿sí?

var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined

//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']

Llegamos a la diferencia inherente entre el número de elementos en la matriz, arr.length, y el número de asignaciones key=>value que tiene la matriz, que puede ser diferente de arr.length.

Expandiendo la matriz a través de arr.length no crea ninguna nueva asignación key=>value, por lo que no es que el array tenga valores indefinidos, sino que no tiene estas claves. ¿Y qué sucede cuando intentas acceder a una propiedad inexistente? Se obtiene undefined.

Ahora podemos levantar la cabeza un poco, y ver por qué funciones como arr.map no caminan sobre estas propiedades. Si arr[3] fuera simplemente indefinido, y la clave existiera, todas estas funciones de matriz simplemente pasarían por encima de ella como cualquier otro valor:

//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';

arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']

arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]

I intencionalmente se usó una llamada al método para probar aún más el punto de que la clave en sí nunca estuvo allí: Llamar undefined.toUpperCase habría generado un error, pero no lo hizo. Para probar que :

arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined

Y ahora llegamos a mi punto: ¿Cómo Array(N) hace las cosas. La sección 15.4.2.2 describe el proceso. Hay un montón de tonterías que no nos importan, pero si te las arreglas para leer entre líneas (o puedes confiar en mí en este caso, pero no), básicamente se reduce a esto:

function Array(len) {
    var ret = [];
    ret.length = len;
    return ret;
}

(opera bajo la suposición (que se comprueba en la especificación real) de que len es un uint32 válido, y no cualquier número de valor)

Así que ahora puedes ver por qué hacer Array(5).map(...) no funcionaría - no definimos len elementos en la matriz, no creamos las asignaciones key => value, simplemente alteramos la propiedad length.

Ahora que tenemos eso fuera del camino, veamos la segunda cosa mágica: {[89]]}

2. Cómo funciona Function.prototype.apply

Qué hace apply es básicamente tomar una matriz y desenrollarla como argumentos de una llamada a función. Eso significa que los siguientes son más o menos los mismos:

function foo (a, b, c) {
    return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3

Ahora, podemos facilitar el proceso de ver cómo funciona apply simplemente registrando la variable especial arguments:

function log () {
    console.log(arguments);
}

log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
 //["mary", "had", "a", "little", "lamb"]

//arguments is a pseudo-array itself, so we can use it as well
(function () {
    log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
 //["mary", "had", "a", "little", "lamb"]

//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
 //[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]

//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!

log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]

Es fácil probar mi afirmación en el penúltimo ejemplo: {[89]]}

function ahaExclamationMark () {
    console.log(arguments.length);
    console.log(arguments.hasOwnProperty(0));
}

ahaExclamationMark.apply(null, Array(2)); //2, true

(sí, juego de palabras). El mapeo key => value puede no haber existido en el array que pasamos a apply, pero ciertamente existe en el arguments variable. Es la misma razón por la que el último ejemplo funciona: Las claves no existen en el objeto que pasamos, pero sí existen en arguments.

¿Por qué es eso? Veamos La sección 15.3.4.3, donde se define Function.prototype.apply. La mayoría de las cosas que no nos importan, pero aquí está la parte interesante:

1. Sea len el resultado de llamar al método interno [[Get]] de argArray con el argumento "length".

Que básicamente significa: argArray.length. La especificación luego procede a hacer un simple bucle for sobre length elementos, haciendo un list de los valores correspondientes (list es un vudú interno, pero es básicamente un arreglo). En términos de código muy, muy suelto:

Function.prototype.apply = function (thisArg, argArray) {
    var len = argArray.length,
        argList = [];

    for (var i = 0; i < len; i += 1) {
        argList[i] = argArray[i];
    }

    //yeah...
    superMagicalFunctionInvocation(this, thisArg, argList);
};

Así que todo lo que necesitamos para imitar un argArray en este caso es un objeto con una propiedad length. Y ahora podemos ver por qué los valores son indefinidos, pero las claves no lo son, en arguments: Creamos las asignaciones key=>value.

Uf, así que esto podría no haber sido más corto que la parte anterior. Pero habrá pastel cuando terminemos, así que ten paciencia. Sin embargo, después de la siguiente sección (que será corta, lo prometo) podemos comenzar a diseccionar la expresión. En caso de que lo olvidaras, la pregunta era cómo funciona lo siguiente:

Array.apply(null, { length: 5 }).map(Number.call, Number);

3. Cómo Array maneja múltiples argumentos

So! Vimos lo que sucede cuando se pasa un argumento length a Array, pero en la expresión, pasamos varias cosas como argumentos (una matriz de 5 undefined, para ser exactos). La sección 15.4.2.1 dice nosotros qué hacer. El último párrafo es todo lo que nos importa, y está redactado realmente extrañamente, pero se reduce a:{[89]]}

function Array () {
    var ret = [];
    ret.length = arguments.length;

    for (var i = 0; i < arguments.length; i += 1) {
        ret[i] = arguments[i];
    }

    return ret;
}

Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]

Tada! Obtenemos una matriz de varios valores indefinidos, y devolvemos una matriz de estos valores indefinidos.

La primera parte de la expresión

Finalmente, podemos descifrar lo siguiente: {[89]]}

Array.apply(null, { length: 5 })

Vimos que devuelve un array que contiene 5 valores indefinidos, con claves todas en existencia.

Ahora, a la segunda parte de la expresión:

[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)

Esta será la parte más fácil, no complicada, ya que no depende tanto de hacks oscuros.

4. Cómo trata Number la entrada

Haciendo Number(something) (la sección 15.7.1 ) convierte something a un número, y eso es todo. Cómo lo hace es un poco complicado, especialmente en los casos de cadenas, pero la operación se define en sección 9.3 en caso de que esté interesado.

5. Juegos de Function.prototype.call

call es el hermano de apply, definido en sección 15.3.4.4. En lugar de tomar una matriz de argumentos, simplemente toma los argumentos que recibió y los pasa hacia adelante.

Las cosas se ponen interesantes cuando encadenas más de uno call juntos, manivela lo raro hasta 11: {[89]]}

function log () {
    console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^  ^-----^
// this   arguments

Esto es bastante digno de wtf hasta que captes lo que está pasando. log.call es solo una función, equivalente al método call de cualquier otra función, y como tal, tiene un método call sobre sí mismo también:

log.call === log.call.call; //true
log.call === Function.call; //true

¿Y qué hace call? Acepta un thisArg y un montón de argumentos, y llama a su función padre. Podemos definirlo a través de apply (de nuevo, código muy suelto, no funcionará):

Function.prototype.call = function (thisArg) {
    var args = arguments.slice(1); //I wish that'd work
    return this.apply(thisArg, args);
};

Vamos a rastrear cómo esto sucede: {[89]]}

log.call.call(log, {a:4}, {a:5});
  this = log.call
  thisArg = log
  args = [{a:4}, {a:5}]

  log.call.apply(log, [{a:4}, {a:5}])

    log.call({a:4}, {a:5})
      this = log
      thisArg = {a:4}
      args = [{a:5}]

      log.apply({a:4}, [{a:5}])

La parte posterior, o el .map de todo

Todavía no ha terminado. Veamos qué sucede cuando se suministra una función a la mayoría de los métodos de matriz:

function log () {
    console.log(this, arguments);
}

var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^  ^-----------------------^
// this         arguments

Si no proporcionamos un argumento this nosotros mismos, por defecto es window. Tome nota del orden en el que los argumentos se proporcionan a nuestra devolución de llamada, y vamos a extraño todo el camino a 11 de nuevo:

arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^    ^

Whoa whoa whoa...retrocedamos un poco. ¿Qué está pasando aquí? Podemos ver en sección 15.4.4.18 , donde se define forEach, lo siguiente sucede prácticamente:

var callback = log.call,
    thisArg = log;

for (var i = 0; i < arr.length; i += 1) {
    callback.call(thisArg, arr[i], i, arr);
}

Entonces, obtenemos esto: {[89]]}

log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);

Ahora podemos ver cómo funciona .map(Number.call, Number): {[89]]}

Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);

Que devuelve la transformación de i, el índice actual, a un número.

En conclusión,

La expresión

Array.apply(null, { length: 5 }).map(Number.call, Number);

Funciona en dos partes:

var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2

La primera parte crea una matriz de 5 elementos indefinidos. El segundo repasa esa matriz y toma sus índices, lo que resulta en una matriz de índices de elementos:

[0, 1, 2, 3, 4]