Array.from() and Array.of() in JavaScript

JavaScript arrays are familiar enough that it is easy to assume every array‑related API is equally obvious. Then new Array(3) turns up, or a NodeList refuses to behave like an array, and suddenly the edges start showing.

ES6 added two useful methods that clean up a lot of that awkwardness:

• Array.from()
• Array.of()

They solve different problems, but both make array creation more consistent and less surprising.

Array.from() creates an array from something array‑like or iterable

This is the method you reach for when you have something that is not quite an array yet.

A classic example is a NodeList:

const buttons = document.querySelectorAll('button');const buttonArray = Array.from(buttons);

Now buttonArray is a real array, which means array methods such as map, filter, and find are available directly.

That sounds small, but it removes a lot of friction in DOM‑heavy code.

Why Not Just Use the Value as It is

Sometimes you can. Many browser collections expose iteration these days, and modern APIs are friendlier than they used to be.

Still, converting to a real array is often worth it because:

• the intent becomes clear
• the method surface becomes predictable
• you avoid odd behaviour from array‑like structures

In older front‑end work especially, this distinction mattered constantly.

Array.from() works with more than DOM collections

Anything iterable or array‑like can be a candidate.

For example, a string:

const letters = Array.from('hello');console.log(letters);

This produces:

['h', 'e', 'l', 'l', 'o']

Or a Set:

const uniqueValues = new Set([1, 2, 2, 3]);const values = Array.from(uniqueValues);

That gives us a proper array of unique numbers.

It Can Also Build Arrays from Array‑Like Objects

An object with numeric keys and a length property is enough:

const pseudoArray = {  0: 'first',  1: 'second',  length: 2,};const result = Array.from(pseudoArray);

This produces ['first', 'second'].

That is useful for understanding what Array.from() really does. It is not just a DOM helper. It is a general bridge into real arrays.

The Optional Mapping Function is Easy to Overlook

Array.from() can also transform values as it creates the array:

const doubled = Array.from([1, 2, 3], (value) => value * 2);

That produces [2, 4, 6].

You could, of course, do this in two steps with .map(). The benefit here is that creation and transformation happen together, which can be neat when generating arrays from non‑array inputs.

Generating Ranges Becomes Fairly Tidy

One common trick is:

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

That gives:

[1, 2, 3, 4, 5]

This is not built into JavaScript as a dedicated range function, but Array.from() gives us a compact enough pattern when we need one.

Array.of() solves a different, older awkwardness

The Array constructor has a slightly surprising rule:

const values = new Array(3);

That does not create [3].

It creates an array with length 3 and empty slots.

But:

const values = new Array(3, 4);

creates [3, 4].

That difference based purely on the number of arguments has confused JavaScript developers for years.

Array.of() fixes that inconsistency by always treating its arguments as array elements:

const values = Array.of(3);

Now the result is exactly what most people would expect:

[3]

This Makes Intent Much Clearer

When you see:

Array.of(3)

you can be confident that the goal is "an array containing the number 3", not "an empty array with length 3".

That may sound like a minor distinction, but removing this kind of ambiguity is precisely what makes everyday code less error‑prone.

Array.from() and Array.of() are easy to mix up

The names are similar, but the jobs are not.

Use Array.from() when you already have something array‑like or iterable and want to turn it into an array.

Use Array.of() when you want to create an array from a list of values, especially when the Array constructor would behave oddly.

In short:

• from converts
• of creates explicitly

A Real‑World Front‑End Example

Suppose we have some buttons on a page and want a clean array of their labels:

const labels = Array.from(  document.querySelectorAll('button'),  (button) => button.textContent?.trim() ?? '',);

That is concise, but still readable.

Or suppose we want a one‑item array containing a page number:

const pages = Array.of(1);

That avoids the new Array(1) trap entirely.

The Methods are Simple, but They Encourage Better Mental Models

The real value here is not just memorising two more APIs.

It is understanding:

• the difference between arrays and array‑like values
• the odd edge cases in the Array constructor
• the importance of explicit creation and conversion

Once that is clear, a lot of JavaScript collection code starts to feel less improvised.

These are Modest Features, but Very Practical Ones

ES6 is often remembered for the headline features: classes, modules, promises, destructuring, and so on.

Array.from() and Array.of() are quieter additions, but they earned their place. They smooth off older inconsistencies and make common tasks read more like what we actually mean.

That is usually the mark of a good language feature.

If an API helps the code say exactly what it is doing without drama, you will end up using it more often than you first expect.