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.

constempty= [];
constnumbers= [1,2,3];
constmixed= ["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.

constitems=newArray("a","b","c");
console.log(items);

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

constslots=newArray(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.

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

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

constbuttons=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.

constoriginal= [1,2,3];
constcopy= [...original];

console.log(copy);

You can also combine values while creating the array:

conststart= [1,2];
constresult= [...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

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

console.log(tags);

Example 2: Generate page numbers

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

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

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

console.log(hrefs);

Example 4: Combine items into one array

constfeatured= ["book","lamp"];
constsale= ["chair","desk"];

constallProducts= [...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:

constarr=newArray(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:

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

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

What you might do:

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

Why it breaks:

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

Correct approach:

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

console.log(labels);

Mistake 3: Copying an array but still sharing nested objects

What you might do:

constoriginal= [{ id:1 }];
constcopy= [...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:

constoriginal= [{ id:1 }];
constcopy=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.