Array.from() and Array.of()

They solve different problems. Array.of takes its arguments and makes them the contents of a new array, so it always creates an array of exactly the values you passed to it. Array.from takes something you can walk through, such as a set or a string, and creates an array from what it finds there.

console.log(Array.of(1, 2, 3));            // [1, 2, 3]
console.log(Array.from('abc'));          // ['a', 'b', 'c']
console.log(Array.from({ length: 3 }));   // [undefined, undefined, undefined]

// The trap: one number sets the length, not the contents.
console.log(Array(3));                   // three empty slots
console.log(Array(1, 2, 3));             // [1, 2, 3]
console.log(Array.of(3));                // [3]

The trap at the end is the one that interviewers like. Calling Array with a single number creates an array with that many slots and no values in them, which is completely different from what it looks like it should do. Array.of does not have that special case, so Array.of(3) is an array that holds the number three. That makes Array.of the safer choice whenever the values come from a variable, because it does the obvious thing.

Array.from is the more useful of the two in everyday code. It turns anything you can walk through into an array, so it works with sets, maps, strings, the arguments object, and generators. It also takes a second argument, which is a function that is applied to each value while the array is being built. That saves you a separate step and an extra array.

There are several ways, and they are not interchangeable. The literal is the fastest and the clearest when you have a fixed list, such as const items = [1, 2, 3];. The Array constructor with a length is useful when you want an empty array of a known size, but remember that it fills the slots with holes rather than values, so you should fill it with a simple loop instead of expecting values in it.

To copy from an existing collection you have a few options. The spread operator copies something you can walk through into an array, the slice method copies an existing array, and Array.from handles both kinds of source and accepts an optional function that changes each value as it is copied.

To generate a sequence, the Array constructor with a length plus a fill loop is the usual choice. For a fixed range, building the array from a list of indexes is a common trick that you will see in older code.

Two cautions. The literal is the fastest way to create an array, because the engine can plan its shape from the start, while many separate push calls make the array grow and move its memory as it goes. And an array that was created with a length has holes in it, which behave differently under the iteration methods, so if you are going to fill it right away, fill it completely.

Array.from takes two arguments. The first one is the source, which can be something you can walk through, such as a set or a string, or an object that has a length and numbered values. The second one is optional, and it is a function that receives each value together with its position and returns the value to put in the new array.

// Anything you can walk through works as the source.
console.log(Array.from(new Set([1, 2, 2, 3])));              // [1, 2, 3]
console.log(Array.from('abc'));                            // ['a', 'b', 'c']

// The function runs while the array is being built.
console.log(Array.from({ length: 4 }, function (value, i) { return i * i; }));  // [0, 1, 4, 9]

// Array.from counts characters, while string length counts code units.
console.log(Array.from('𐐷').length);   // 1 - one character
console.log('𐐷'.length);              // 2 - two code units

The second argument is the reason Array.from is worth knowing. It replaces a pattern of two steps, where you convert something and then change each value, and it avoids building an extra array in the middle.

The string example is the subtle one. The length of a string counts UTF-16 code units, so a character outside the basic plane counts as two. Array.from walks a string one character at a time, so it gives you one element for that character. That difference matters whenever you are working with text that might contain such characters, and it is a good detail to raise when somebody asks about string handling in general.

One more note about the array-like case. When the source has a length but cannot be walked through, Array.from reads the numbered values from zero up to that length and gives each one to your function. That is how you build an array of a fixed size from a function that generates the values.