What do Array.from and Array.of do?

Q: What do Array.from and Array.of do?

**Target Audience:** Engineers preparing for JavaScript array-fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The real conversions and the real holes-vs-values contrast below were **actually run** — not descriptions of documented behavior. ## 1. Why This Even Matters — A Story First A universal adapter plug that genuinely works with any wall socket shape — a string, a Set, a Map, a NodeList — versus a single, correctly-labeled switch that does exactly one specific thing (turn arguments directly into an array) with zero ambiguity about what it means. `Array.from` is the universal adapter; `Array.of` is the unambiguous switch — verified directly below. ## 2. The Core Idea 📌 **Interview term:** `Array.from()` converts any real iterable or array-like into a genuine array; `Array.of()` builds an array directly from its arguments, avoiding `new Array(n)`'s real

The problem

Question presented to candidate: "You're given a DOM NodeList and need to use array methods like .map() on it, which NodeList doesn't have directly. Separately, someone wrote new Array(3) expecting an array containing the number 3, and got confused by the result. How do Array.from and Array.of each solve these two genuinely different problems?"

What a strong answer should cover:

📌 Interview term: Array.from(iterableOrArrayLike, mapFn?) — builds a real array from anything genuinely iterable (a string, Set, Map) OR genuinely array-like (has a length and indexed properties, but no iterator — like a DOM NodeList in some contexts, or arguments) — directly answering the prompt's NodeList scenario.
📌 Verified, not assumed: real Array.from calls genuinely converted a string, a Set, a Map, and a genuine array-like object ({length, 0, 1, 2}, no iterator) all correctly into real arrays.
📌 Interview term: the real new Array(n) ambiguity, directly answered — new Array(3) genuinely creates an array with length: 3 and real holes (not the number 3 as an element) — confirmed directly by a striking real contrast: new Array(3).map(x => 1) genuinely stayed empty (map skips real holes), while Array.from({length: 3}).map(x => 1) genuinely produced real values, because Array.from genuinely materializes real undefined slots that new Array(n) alone leaves as holes.
📌 Interview term: Array.of(...items) — directly avoids the ambiguity: Array.of(3) genuinely produces [3] (a real one-element array containing the number 3), confirmed directly against new Array(3)'s genuinely different, three-hole result.
A precise answer names Array.from's real, optional second argument (a map function) as letting it double as a combined "convert and transform" step in one call — verified directly with a real {length: n}-based range-generator idiom.

Clarifying questions expected:

"Does the actual source genuinely have a working iterator (a Set, Map, string), or is it merely array-LIKE (a length property plus indices, no iterator, like some NodeList usages or the classic arguments object)?" — Array.from, verified above, correctly handles both cases.
"Is the code creating an array from KNOWN arguments values (Array.of's real use case) or CONVERTING an existing iterable/array-like (Array.from's real use case)?" — directly decides which one actually applies.

Code / implementation expected: Yes — real conversions from a string, Set, Map, and array-like object, plus the real, striking new Array(3) vs. Array.from({length:3}) contrast on .map(), is the concrete, convincing proof of exactly what each method does and does not do.

array-from

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript array-fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The real conversions and the real holes-vs-values contrast below were actually run — not descriptions of documented behavior.

1. Why This Even Matters — A Story First

A universal adapter plug that genuinely works with any wall socket shape — a string, a Set, a Map, a NodeList — versus a single, correctly-labeled switch that does exactly one specific thing (turn arguments directly into an array) with zero ambiguity about what it means. Array.from is the universal adapter; Array.of is the unambiguous switch — verified directly below.

2. The Core Idea

📌 Interview term: Array.from() converts any real iterable or array-like into a genuine array; `A

The solution is hidden so you can try first

7 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal Array.from/of: converting a string, Set, and array-like source, plus the real new Array(3) holes-vs-Array.from-materialized-values contrast