Array 1…N em JavaScript: segredos de velocidade e desempenho

Array 1…N em JavaScript: do simples ao performático

Olá, colega desenvolvedor! Se você já se deparou com a tarefa de "criar um array de números de 1 a N" — você não está sozinho. Esta é uma pergunta tão popular no Stack Overflow que acumulou milhares de visualizações e dezenas de respostas. Parece simples, não é? Mas o diabo, como sempre, está nos detalhes: desempenho, legibilidade e versatilidade do código.

Hoje vamos analisar todas as principais maneiras de criar um array [1, 2, 3, ..., N] em JavaScript, comparando-as em velocidade, elegância e aplicabilidade. Você descobrirá qual método escolher para um projeto comum e qual usar quando cada milissegundo conta. Vamos nessa!

Por que isso é importante? Contexto da tarefa

Imagine: você está escrevendo um algoritmo de ordenação, gerando dados de teste, criando uma grade para um jogo ou apenas querendo obter rapidamente uma sequência de números. Em todos esses casos, você precisa de um array de 1 a N. Parece simples — um loop for e pronto. Mas o JavaScript moderno oferece tanto açúcar sintático que é fácil se perder.

Vamos abordar 5 abordagens principais, desde os clássicos até os modernos one-liners, e testá-los em condições reais. Prepare o console do navegador e seu editor favorito — vai esquentar!

Método 1: Loop for clássico

Uma maneira básica, mas confiável, que todo iniciante conhece:

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]

Vantagens:

\n
• Máxima legibilidade — compreensível até para quem está começando a aprender JS.
\n
• Sem chamadas ocultas ou mágica.
\n
• Funciona em todos os ambientes, incluindo navegadores muito antigos.
\n

Desvantagens:

\n
• Mais lento que algumas alternativas (mas não crítico para N pequenos).
\n
• Muito código para uma tarefa simples.
\n

Método 2: Array.from() com função map

Uma abordagem moderna e elegante, introduzida no ES6:

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

Aqui criamos um array com um comprimento específico e o preenchemos imediatamente com uma função map. O segundo argumento de Array.from é exatamente a função mapeadora, que recebe o índice atual i e retorna i + 1.

Vantagens:

\n
• Muito conciso e expressivo.
\n
• Não requer a criação prévia de um array vazio.
\n
• Bom desempenho.
\n

Desvantagens:

\n
• Pode ser menos óbvio para iniciantes.
\n
• Cria um objeto intermediário { length: n }.
\n

Método 3: Operador Spread + keys()

Um dos one-liners mais populares no Stack Overflow:

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

Como funciona? Array(n) cria um array esparso com n elementos vazios. .keys() retorna um iterador de índices (0, 1, 2...). O operador Spread o expande em um array normal, e então o map desloca os valores em +1.

Vantagens:

\n
• Muito conciso (uma única linha).
\n
• Parece "mágico" — surpreende agradavelmente os colegas em code reviews.
\n

Desvantagens:

\n
• O mais lento de todos os métodos para N grandes (devido à dupla passagem e criação de arrays intermediários).
\n
• Mais difícil de entender para iniciantes.
\n
• Consome mais memória.
\n

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

Outra variação popular:

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