jsguides

Array.prototype.of()

Array.of(...elements)

Array.of() creates a new Array instance from a variable number of arguments, regardless of the number or type of arguments. Unlike the Array constructor, Array.of() does not treat a single number argument as an array length — it creates an array with that single element.

Syntax

Array.of(element0)
Array.of(element0, element1)
Array.of(element0, element1, ...elementN)

Parameters

ParameterTypeDefaultDescription
elementsanyAny number of values to include in the new array

Examples

Basic usage

const arr = Array.of(1, 2, 3);
console.log(arr);
// [1, 2, 3]

// Single number is treated as element, not length
const single = Array.of(5);
console.log(single);
// [5]

// Works with any type
const mixed = Array.of(1, 'two', true, null);
console.log(mixed);
// [1, 'two', true, null]

Array.of(5) produces [5] — a one-element array containing the number 5 — while Array(5) creates a sparse array with 5 empty slots. This distinction is the entire reason Array.of() was added to the language. When you receive arguments from user code or function parameters where a count of one is just as likely as a count of three, the constructor path is unsafe.

Comparing Array.of() vs array constructor

// Array.of() - treats argument as element
const withOf = Array.of(3);
console.log(withOf.length);    // 1
console.log(withOf);           // [3]

// Array() constructor - treats single number as length
const withConstructor = Array(3);
console.log(withConstructor.length);  // 3
console.log(withConstructor);         // [empty × 3]

// This is the key difference - Array.of() avoids this gotcha

The output confirms the behavior: Array.of(3) produces [3] with length 1, while Array(3) produces an array of 3 empty slots. If you were writing a function that accepts a dynamic argument list and passes it to an array constructor, the single-number case would silently create a sparse array instead of a single-element array — a bug that is easy to miss in testing because it only triggers with one numeric argument.

Creating arrays from array-like objects

// Convert arguments object to array
function greet() {
  const args = Array.of(...arguments);
  console.log(`Hello, ${args.join(' and ')}!`);
}
greet('Alice', 'Bob', 'Carol');
// Hello, Alice and Bob and Carol!

// Ensure consistent array creation
const numbers = Array.of(...[1, 2, 3]);
console.log(numbers);
// [1, 2, 3]

The spread operator with Array.of() is redundant when you already have an array ([...arr] does the same), but it becomes useful when the argument source is an array-like object — arguments, a NodeList, or a typed array — where a direct spread into a constructor would still hit the overload ambiguity. Array.of(...arrayLike) guarantees element-by-element construction.

Common Patterns

Array.of() is particularly useful when you need to create an array in scenarios where the Array constructor could behave unexpectedly:

  • Type-safe array creation: Always creates an array with the exact elements passed
  • Functional programming: Useful as a way to ensure values are wrapped in an array
  • Converting iterables: Works with spread operator to convert any iterable

Why Array.of() exists

The Array constructor has a confusing overload: Array(3) creates a sparse array with length 3, while Array(1, 2, 3) creates [1, 2, 3]. This makes the constructor unsafe to call with a variable number of arguments when one of them might be a single number. Array.of() was introduced in ES6 to provide a predictable alternative that always treats every argument as an element, never as a length.

Array.of() vs array literals

For fixed, hardcoded arrays, [1, 2, 3] is simpler and more readable than Array.of(1, 2, 3). Array.of() is most useful when you need to create arrays programmatically — for example, as a generic factory function, or when subclassing Array to create instances of the subclass.

class TypedArray extends Array {}

// Creates an instance of TypedArray, not Array:
TypedArray.of(1, 2, 3); // TypedArray [1, 2, 3]

// Array literal always creates Array, even in subclass context

Array.of() on subclasses

When called on an Array subclass (i.e., MyArray.of(...)), Array.of() uses the constructor of the subclass rather than Array. The result is an instance of MyArray, not a plain Array. This is the primary reason Array.of() exists as a method rather than just a standalone function: it respects the this context, making it suitable as a generic factory in class hierarchies where you need instances of the subclass without knowing its constructor signature upfront.

See Also