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.

conststr="Hello";

// Explicit
constarr1=Array.from(str);

// Concise
constarr2= [...str];

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

Convert a Set:

constset=newSet([1,2,3]);

consta=Array.from(set);
constb= [...set];

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

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

constmap=newMap([
  ["name","Alex"],
  ["age",28]
]);

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

consttags="HTML,CSS,JavaScript";
constarr=tags.split(",");

console.log(arr);

Split into characters:

constword="Code";
constchars=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.

constuser= { 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

constitems=Array.from(document.querySelectorAll(".item"));

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

Example 2: Convert a Set and remove duplicates

constnames= ["Sam","Sam","Lina"];
constuniqueNames= [...newSet(names)];

console.log(uniqueNames);

Example 3: Convert an object into key-value strings

constscores= { math:90, english:85 };

constlines=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:

constobj= { a:1 };
constarr= [...obj];

Why it breaks: Plain objects are not iterable.

Fix:

constobj= { a:1 };
constarr=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.