How to Create an Array from 1 to N in JavaScript

By the end of this page, you will understand how to generate a sequence like 1...N in JavaScript, why loops are still valid, and how built-in tools such as Array.from() can make this pattern shorter and clearer.

In JavaScript, creating an array of numbers from 1 to N is really about generating a numeric range.

A range is a sequence of values that follow a pattern:

• 1, 2, 3, 4, 5
• 0, 1, 2, 3, 4
• 10, 20, 30

JavaScript does not have a built-in range literal like some other languages. That means you usually create ranges using:

• a for loop
• Array.from()
• array keys and mapping
• a reusable helper function

Your original loop is completely valid. In fact, it is often the clearest solution for beginners. But modern JavaScript provides more expressive options when you want to describe the result rather than manually build it step by step.

This matters in real programming because generating ranges is common when:

• paginating results
• building dropdowns such as years or days
• creating test data
• repeating operations a fixed number of times
• indexing rows, columns, or steps

So the real concept is not just “avoiding a loop.” It is learning how JavaScript constructs arrays from patterns.

Think of this like filling numbered tickets into a box.

• A for loop means: “Start at ticket 1, keep adding the next ticket until you reach N.”
• Array.from() means: “Give me a box with N slots, and for each slot, compute the value that should go there.”

Both approaches still do repeated work internally. The difference is mostly how you express your intent:

• loop: how to build it
• declarative method: what array you want

So even when you “avoid the loop,” JavaScript is still iterating somewhere under the hood.

A modern and common way to create an array from 1 to N is with Array.from().

const N = 5;
const numbers = Array.from({ length: N }, (_, index) => index + 1);

console.log(numbers); // [1, 2, 3, 4, 5]

How this works

• { length: N } creates an array-like object with N slots.
• Array.from() turns it into a real array.
• The callback runs once for each position.
• index starts at 0, so we add 1 to get 1...N.

Traditional loop version

const numbers = [];
for (let i = ; i <= N; i++) {
  numbers.(i);
}

Consider this code:

const N = 4;
const result = Array.from({ length: N }, (_, index) => index + 1);
console.log(result);

Step by step

1. N is set to 4.
2. { length: N } becomes { length: 4 }.
3. Array.from() prepares to create an array with 4 items.
4. The callback runs once for each index:
   • index 0 → 0 + 1 → 1
   • index 1 → 1 + 1 → 2
   • index 2 → 2 + 1 → 3

Generating arrays from 1 to N appears in many practical situations.

Pagination

const totalPages = 5;
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

Use this to render page buttons in a UI.

Year dropdowns

const numberOfYears = 10;
const years = Array.from({ length: numberOfYears }, (_, i) => 2020 + i);

Useful for forms and filters.

Generating placeholder rows

const skeletonRows = Array.from({ length: 3 }, (_, i) => ({ id: i + , :  }));

In real projects, developers often wrap range generation inside helper functions so the intent is clear.

Common helper pattern

function range(start, end) {
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

console.log(range(1, 5)); // [1, 2, 3, 4, 5]

This is more reusable than hardcoding 1...N every time.

Guard clause for invalid input

function rangeOneToN(n) {
  if (!Number.isInteger(n) || n < 1) {
    return [];
  }

  return Array.from({ length: n }, (_, i) => i + 1);
}

This avoids bugs when n is negative, not a number, or not an integer.

Here are common mistakes beginners make when creating a range.

Off-by-one errors

Broken code:

const numbers = Array.from({ length: 5 }, (_, i) => i);
console.log(numbers); // [0, 1, 2, 3, 4]

If you want 1...N, add 1:

const numbers = Array.from({ length: 5 }, (_, i) => i + 1);

Using new Array(N).map(...)

Broken code:

const numbers = new Array(5).map((_, i) => i + 1);
console.(numbers); 

Here is a comparison of common ways to create a range in JavaScript.

Create 1...N

const arr = Array.from({ length: N }, (_, i) => i + 1);

Create 0...(N-1)

const arr = Array.from({ length: N }, (_, i) => i);

Loop version

const arr = [];
for (let i = 1; i <= N; i++) {
  arr.push(i);
}

Reusable helper

function rangeOneToN(n) {
  if (!Number.isInteger(n) || n < 1) return [];
  return Array.from({ : n },  i + );
}

Is a for loop bad for creating an array from 1 to N?

No. A for loop is a clear and efficient solution. Modern alternatives are mainly about readability and style.

What is the shortest modern JavaScript way to create 1...N?

Array.from({ length: N }, (_, i) => i + 1)

Why does new Array(N).map(...) not work properly?

Because new Array(N) creates empty slots, and map() skips them. Use Array.from() or .fill() first.

Can I create a reusable range function in JavaScript?

Yes:

function range(start, end) {
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

• for loop — The most direct way to build an array step by step.
• Array.from() — A core method for creating arrays from array-like values or patterns.
• map() — Often used after creating arrays to transform values.
• array-like objects — Important because Array.from() can convert them into real arrays.
• indexes in JavaScript arrays — Helpful for understanding why range generation usually starts from 0 internally.
• let vs const vs var — Relevant when writing modern loops and array-building code.
• helper functions — Useful for wrapping range logic into reusable utilities.
• off-by-one errors — A common issue when generating numeric sequences.