JavaScript Array of() Method

The Array.of() method is a static method used to create a new Array instance from a variable number of arguments, regardless of the number or type of those arguments.

While it may look similar to the standard Array() constructor, it was introduced in ES6 to solve a specific, confusing quirk in how JavaScript handles array creation.

The Array.of() method is a static factory method used to create a new Array instance from a variable number of arguments, regardless of the number or type of those arguments. Introduced in ES6, it was specifically designed to solve a notorious inconsistency in the older Array() constructor.

1. The Core Purpose: Solving the Constructor Quirk

To understand why Array.of() exists, you must first look at the confusing behavior of the standard Array() constructor. The constructor changes its behavior based on the number of arguments passed to it:

• Passing multiple arguments: It creates an array containing those arguments.
• Passing a single integer: It creates a sparse array with a length equal to that integer, but with no actual elements (only “empty slots”).

// The Constructor Quirk
const oldWay1 = Array(3);     // Creates [ , , ] (length 3, no values)
const oldWay2 = Array(3, 4);  // Creates [3, 4]

// The Array.of() Consistency
const newWay1 = Array.of(3);    // Creates [3]
const newWay2 = Array.of(3, 4); // Creates [3, 4]

Array.of() provides a predictable result: every argument passed to it becomes an element in the new array, at the index corresponding to its position in the argument list.

2. Syntax and Parameters

The method is called directly on the Array global object.

Array.of(element0, element1, /* … ,*/ elementN)

• Parameters: Any number of elements of any type (objects, numbers, strings, or even other arrays).
• Return Value: A new Array instance containing the provided elements.

3. Comparison with Array Literals

In most daily coding scenarios, a simple array literal [] is preferred over Array.of() because it is shorter and more idiomatic.

const literal = [1, 2, 3];
const method  = Array.of(1, 2, 3);
// Both result in the same array structure.

However, Array.of() becomes essential in functional programming and class inheritance scenarios where you need a function that maps arguments to a new array instance, or when you are dynamically subclassing Array.

4. Usage in Class Inheritance

When you create a custom class that extends Array, the Array.of() method is inherited. When called on the subclass, it returns an instance of that subclass rather than a standard array. This is something an array literal cannot do automatically.

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

// Array.of() knows to return a 'MyArray' instance
const custom = MyArray.of(10, 20);

console.log(custom instanceof MyArray); // true
console.log(custom.isEmpty());           // false

const dimensions = [10, "20x20", 5];

const results = dimensions.map(d => {
  // If d is 5, Array(d) creates 5 empty slots. 
  // Array.of(d) creates [5].
  return Array.of(d); 
});