Array 1…N en JavaScript: secretos de velocidad y rendimiento

Array 1…N en JavaScript: de lo simple a lo eficiente

¡Hola, colega desarrollador! Si alguna vez te has enfrentado a la tarea de "crear un array de números del 1 al N", no estás solo. Esta es una pregunta tan popular en Stack Overflow que ha acumulado miles de visitas y docenas de respuestas. Parecería que no podría ser más simple. Pero el diablo, como siempre, está en los detalles: rendimiento, legibilidad y versatilidad del código.

Hoy analizaremos todas las formas principales de crear un array [1, 2, 3, ..., N] en JavaScript, comparándolas en velocidad, elegancia y ámbito de aplicación. Sabrás qué método elegir para un proyecto normal y cuál usar cuando cada milisegundo cuenta. ¡Vamos allá!

¿Por qué es importante? Contexto del problema

Imagina: estás escribiendo un algoritmo de ordenamiento, generando datos de prueba, creando una cuadrícula para un juego o simplemente quieres obtener rápidamente una secuencia de números. En todos estos casos necesitas un array del 1 al N. Parecería que un bucle for es suficiente. Pero el JavaScript moderno ofrece tanto azúcar sintáctico que es fácil confundirse.

Veremos 5 enfoques principales, desde los clásicos hasta los modernos one-liners, y los pondremos a prueba en condiciones reales. ¡Prepara la consola del navegador y tu editor favorito, que se pone intenso!

Método 1: Bucle for clásico

Una forma básica pero confiable que todo principiante conoce:

function createArrayLoop(n) {\n  const arr = [];\n  for (let i = 1; i <= n; i++) {\n    arr.push(i);\n  }\n  return arr;\n}\n\nconsole.log(createArrayLoop(5)); // [1, 2, 3, 4, 5]

Ventajas:

\n
• Máxima legibilidad: es comprensible incluso para quienes recién empiezan a aprender JS.
\n
• Sin llamadas ocultas ni magia.
\n
• Funciona en todos los entornos, incluidos navegadores muy antiguos.
\n

Desventajas:

\n
• Más lento que algunas alternativas (pero no es crítico para N pequeños).
\n
• Mucho código para una tarea simple.
\n

Método 2: Array.from() con función map

Un enfoque moderno y elegante, introducido en ES6:

const createArrayFrom = n => Array.from({ length: n }, (_, i) => i + 1);\n\nconsole.log(createArrayFrom(5)); // [1, 2, 3, 4, 5]

Aquí creamos un array con una longitud determinada y lo llenamos inmediatamente mediante una función map. El segundo argumento de Array.from es precisamente una función mapeadora que recibe el índice actual i y devuelve i + 1.

Ventajas:

\n
• Muy conciso y expresivo.
\n
• No requiere crear un array vacío previamente.
\n
• Buen rendimiento.
\n

Desventajas:

\n
• Puede ser menos obvio para principiantes.
\n
• Crea un objeto intermedio { length: n }.
\n

Método 3: Operador Spread + keys()

Uno de los one-liners más populares en Stack Overflow:

const createArraySpread = n => [...Array(n).keys()].map(i => i + 1);\n\nconsole.log(createArraySpread(5)); // [1, 2, 3, 4, 5]

¿Cómo funciona? Array(n) crea un array disperso de n elementos vacíos. .keys() devuelve un iterador de índices (0, 1, 2...). El operador Spread lo expande en un array normal, y luego map desplaza los valores en +1.

Ventajas:

\n
• Muy conciso (una sola línea).
\n
• Parece "mágico": sorprende gratamente a los colegas en las revisiones de código.
\n

Desventajas:

\n
• El más lento de todos los métodos para N grandes (debido al doble recorrido y la creación de arrays intermedios).
\n
• Más difícil de entender para principiantes.
\n
• Consume más memoria.
\n

Método 4: Array.fill() + map()

Otra variante popular:

const createArrayFill = n => Array(n).fill().ma