How to Convert to an Array in JavaScript

What you’ll build or solve

You’ll convert strings, sets, maps, DOM collections, and objects into arrays.

When this approach works best

Use this approach when you:

• Convert a NodeList from querySelectorAll into an array.
• Turn a Set or Map into an array for transformation.
• Split a string into parts or characters.
• Extract keys, values, or entries from an object.

Avoid conversion when:

• You already have an array.
• You only need a simple loop and the original structure already supports iteration.

Prerequisites

• A .js file or browser console
• Basic familiarity with arrays and objects

No additional setup is required.

Step-by-step instructions

1) Choose the right conversion method

Pick one option based on what you are converting.

Option A: Convert iterables to arrays

Use this for strings, sets, maps, and DOM collections like NodeList. Array.from() and spread syntax do the same conversion. Choose whichever style you prefer.

const str = "Hello";

// Explicit
const arr1 = Array.from(str);

// Concise
const arr2 = [...str];

console.log(arr1);
console.log(arr2);

Convert a Set:

const set = new Set([1, 2, 3]);

const a = Array.from(set);
const b = [...set];

console.log(a);
console.log(b);

Convert a Map to an array of [key, value] pairs:

const map = new Map([
  ["name", "Alex"],
  ["age", 28]
]);

const entries = Array.from(map);
console.log(entries);

What to look for:

• If you see “is not iterable,” the value is not an iterable.
• DOM collections like document.querySelectorAll() are iterable in modern browsers and convert cleanly.

Option B: Use .split() for strings with separators

Use .split() when you want to break a string into parts based on a delimiter.

const tags = "HTML,CSS,JavaScript";
const arr = tags.split(",");

console.log(arr);

Split into characters:

const word = "Code";
const chars = word.split("");

console.log(chars);

What to look for:

• Without a separator, you get the full string as one element.
• Use "" to split into characters.

Option C: Use Object.keys(), Object.values(), or Object.entries() for objects

Plain objects are not iterable, so convert them using object helpers.

const user = { name: "Alex", age: 28 };

console.log(Object.keys(user)); // ["name", "age"]
console.log(Object.values(user)); // ["Alex", 28]
console.log(Object.entries(user)); // [["name", "Alex"], ["age", 28]]

What to look for:

• Use keys() when you need property names.
• Use values() when you need the values.
• Use entries() when you need pairs you can map over.

Examples you can copy

Example 1: Convert a NodeList and add a class

const items = Array.from(document.querySelectorAll(".item"));

items.forEach((el) => el.classList.add("active"));

Example 2: Convert a Set and remove duplicates

const names = ["Sam", "Sam", "Lina"];
const uniqueNames = [...new Set(names)];

console.log(uniqueNames);

Example 3: Convert an object into key-value strings

const scores = { math: 90, english: 85 };

const lines = Object.entries(scores).map(([subject, score]) => {
  return `${subject}: ${score}`;
});

console.log(lines);

Common mistakes and how to fix them

Mistake 1: Spreading a plain object

What you might do:

const obj = { a: 1 };
const arr = [...obj];

Why it breaks: Plain objects are not iterable.

Fix:

const obj = { a: 1 };
const arr = Object.entries(obj);

Mistake 2: Calling .split() without a separator

What you might do:

"HTML,CSS".split();

Why it breaks expectations: You get ["HTML,CSS"] as one element.

Fix:

"HTML,CSS".split(",");

Mistake 3: Using Array.from() on a non-iterable

What you might do:

Array.from({ a: 1 });

Why it breaks: The object is not iterable, so conversion does not work as intended.

Fix:

Object.keys({ a: 1 });

Troubleshooting

If you see “object is not iterable,” use Object.keys(), Object.values(), or Object.entries() instead of spread.

If .split() returns one element, check that you passed the correct separator.

If your result does not support .map(), confirm you are working with a real array.

If DOM conversion fails, log the value and confirm it is a NodeList.

If nothing runs, confirm your script executes and add a quick console.log("running") at the top.

Quick recap

• Convert iterables with Array.from() or spread syntax.
• Split strings with .split().
• Convert objects with Object.keys(), Object.values(), or Object.entries().
• Plain objects are not iterable.
• Confirm the result is an array before using array methods.