Array 1…N in JavaScript: Secrets of Speed and Performance

Array 1…N in JavaScript: From Simple to Performant

Hello, fellow developer! If you've ever faced the task of "creating an array of numbers from 1 to N" — you're not alone. This is such a popular question on Stack Overflow that it has gathered thousands of views and dozens of answer options. It seems like it couldn't be simpler, right? But the devil, as always, is in the details: performance, readability, and code versatility.

Today we'll break down all the main ways to create an array [1, 2, 3, ..., N] in JavaScript, comparing them by speed, elegance, and use cases. You'll learn which method to choose for a regular project, and which one when every millisecond counts. Let's go!

Why Is This Important? Task Context

Imagine: you're writing a sorting algorithm, generating test data, creating a grid for a game, or just want to quickly get a sequence of numbers. In all these cases, you need an array from 1 to N. It seems simple — a for loop and go. But modern JavaScript offers so much syntactic sugar that it's easy to get confused.

We'll look at 5 main approaches, from classics to modern one-liners, and test them under real-world conditions. Get your browser console and favorite editor ready — it's going to be intense!

Method 1: Classic for Loop

A basic but reliable method that every beginner knows:

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]

Pros:

\n
• Maximum readability — understandable even for those just starting to learn JS.
\n
• No hidden calls or magic.
\n
• Works in all environments, including very old browsers.
\n

Cons:

\n
• Slower than some alternatives (but not critical for small N).
\n
• Lots of code for a simple task.
\n

Method 2: Array.from() with map Function

An elegant modern approach introduced in ES6:

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

Here we create an array with a specified length and immediately fill it using a map function. The second argument of Array.from is the mapper function, which receives the current index i and returns i + 1.

Pros:

\n
• Very concise and expressive.
\n
• Doesn't require creating an empty array beforehand.
\n
• Good performance.
\n

Cons:

\n
• May be less obvious for beginners.
\n
• Creates an intermediate object { length: n }.
\n

Method 3: Spread Operator + keys()

One of the most popular one-liners on Stack Overflow:

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

How does it work? Array(n) creates a sparse array of n empty elements. .keys() returns an iterator of indices (0, 1, 2...). The spread operator expands it into a regular array, and then map shifts the values by +1.

Pros:

\n
• Very concise (one call).
\n
• Looks "magical" — pleasantly surprises colleagues during code review.
\n

Cons:

\n
• The slowest of all methods for large N (due to double iteration and creating intermediate arrays).
\n
• Harder for beginners to understand.
\n
• Consumes more memory.
\n

Method 4: Array.fill() + map()

Another popular option:

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