How to Create an Array in JavaScript

What you’ll build or solve

You’ll create arrays in JavaScript using common, reliable approaches.

When this approach works best

Creating an array works best when you:

• Store a list of items, like tags, products, or IDs.
• Collect values while processing input, such as form fields or CSV rows.
• Generate a sequence of values for UI or testing, like page numbers.
• Convert array-like data into a real array so you can use methods like map().

Avoid arrays when you need named fields for each value. Use an object instead when the data has clear keys, like { name, email }.

Prerequisites

• A browser console or Node.js
• Basic understanding of variables

No additional setup is required.

Step-by-step instructions

Step 1: Create an array with array literals

Array literals are the most common way to create an array.

const empty = [];
const numbers = [1, 2, 3];
const mixed = ["apple", 10, true];

console.log(empty);
console.log(numbers);
console.log(mixed);

Use this for most cases because it’s clear and compact.

What to look for:

[] always creates an array, even when it’s empty.

Step 2: Create an array with new Array()

Array is a built-in constructor. Use it when you need a specific length.

const items = new Array("a", "b", "c");
console.log(items);

If you pass a single number, JavaScript creates an empty array with that length:

const slots = new Array(3);
console.log(slots.length);

What to look for:

new Array(3) creates empty slots, not actual values like undefined.

Step 3: Create an array from iterable or array-like values with Array.from()

Use Array.from() when you have something you can iterate over, like a string or a NodeList.

const letters = Array.from("Mimo");
console.log(letters);

In the browser, this helps when you get a NodeList from the DOM:

const buttons = Array.from(document.querySelectorAll("button"));
console.log(buttons);

What to look for:

Array.from() creates a real array, so array methods work immediately.

Step 4: Create an array from existing values with the spread operator

Use spread (...) to copy values into a new array.

const original = [1, 2, 3];
const copy = [...original];

console.log(copy);

You can also combine values while creating the array:

const start = [1, 2];
const result = [...start, 3, 4];

console.log(result);

What to look for:

Spread makes a shallow copy, so nested objects remain shared.

Examples you can copy

Example 1: Build an array of tags from input

const input = "js, arrays, basics";
const tags = input
  .split(",")
  .map(tag => tag.trim());

console.log(tags);

Example 2: Generate page numbers

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

Example 3: Convert a NodeList to an array (browser)

const links = Array.from(document.querySelectorAll("a"));
const hrefs = links.map(link => link.href);

console.log(hrefs);

Example 4: Combine items into one array

const featured = ["book", "lamp"];
const sale = ["chair", "desk"];

const allProducts = [...featured, ...sale];
console.log(allProducts);

Common mistakes and how to fix them

Mistake 1: Using new Array(3) and expecting values

What you might do:

const arr = new Array(3);
console.log(arr[0]);

Why it breaks:

The array has empty slots, not usable values you can read or map over safely.

Correct approach:

If you want actual values, create them:

const arr = Array.from({ length: 3 }, () => 0);
console.log(arr);

Mistake 2: Forgetting to convert a NodeList before using array methods

What you might do:

const buttons = document.querySelectorAll("button");
buttons.map(btn => btn.textContent);

Why it breaks:

NodeLists do not always support array methods like map().

Correct approach:

const buttons = Array.from(document.querySelectorAll("button"));
const labels = buttons.map(btn => btn.textContent);

console.log(labels);

Mistake 3: Copying an array but still sharing nested objects

What you might do:

const original = [{ id: 1 }];
const copy = [...original];

copy[0].id = 2;
console.log(original[0].id);

Why it breaks:

Spread copies the array container, but nested objects still point to the same reference.

Correct approach:

Create new objects if you need independence:

const original = [{ id: 1 }];
const copy = original.map(item => ({ ...item }));

copy[0].id = 2;
console.log(original[0].id);

Troubleshooting

• If you see TypeError: ... is not a function, confirm the value is a real array before calling array methods.
• If new Array(5) behaves strangely, log the array and check for empty slots.
• If copied arrays still affect each other, check for nested objects and copy them too.
• If document is undefined, you are running in Node.js, not the browser.

Quick recap

• Use [] for most arrays.
• Use new Array() when you need a specific length, and watch out for empty slots.
• Use Array.from() for strings, NodeLists, and array-like values.
• Use spread (...) to copy or combine arrays.
• Remember spread is a shallow copy for nested data.