JavaScript Array.of() Method

Summary: in this tutorial, you will learn how to improve array construction using the JavaScript Array.of() method in ES6.

Introduction to the JavaScript Array.of() method

The Array.of() static method allows you to create a new Array from a variable number of arguments.

Here’s the syntax of the Array.of() method:

Array.of(element1, element2, ...)Code language: JavaScript (javascript)

In this syntax:

element1, element2, … are the elements of the new array.

The Array.of() method returns a new instance of the Array that includes the element1, element2, …

JavaScript Array.of() examples

Let’s take some examples of using the Array.of() method.

Basic Array.of() method example

The following example uses the Array.of() method to create a new array that contains one number:

let numbers = Array.of(10);

console.log({ numbers });
console.log({ length: numbers.length });Code language: JavaScript (javascript)

Output:

{ numbers: [ 10 ] }
{ length: 1 }Code language: CSS (css)

In this example, the Array.of() method returns a new array that contains a single number 10.

The following example uses the Array.of() method to create an array from the three letters 'A', 'B', and 'C':

let chars = Array.of('A', 'B', 'C');

console.log({ chars });
console.log({ length: chars.length });Code language: JavaScript (javascript)

Output:

{ chars: [ 'A', 'B', 'C' ] }
{ length: 3 }Code language: CSS (css)

Practical Array.of() method example

When selecting DOM elements, you often receive a NodeList or HTMLCollection objects. These objects are array-like objects, not Array objects.

To manipulate DOM elements more effectively, you can use the Array.of() with the spread operator (...) to create a new array of DOM elements.

For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Array.of() method</title>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <script>
      const listItems = document.getElementsByTagName('li');
      Array.of(...listItems).forEach((item) => (item.style.color = 'red'));
    </script>
  </body>
</html>Code language: HTML, XML (xml)

How it works.

The HTML document has a ul element that contains three li elements.

First, select the li elements using the getElementsByTagName() method:

const listItems = document.getElementsByTagName('li');Code language: JavaScript (javascript)

The return value (listItems) is a HTMLCollection .

Second, create a new Array from the elements of the HTMLCollection object, iterate over each element, and change its color to red:

Array.of(...listItems).forEach((item) => (item.style.color = 'red'));Code language: JavaScript (javascript)

Array.of() method vs. Array constructor

When creating a new array using the Array constructor with a number, it’ll create an array with the corresponding length. For example:

const arr = new Array(3);

console.log({ arr });
console.log({ length: arr.length });Code language: JavaScript (javascript)

Output:

{ arr: [ <3 empty items> ] }
{ length: 3 }Code language: CSS (css)

In this example, the Array constructor creates a new array with the length 3 and includes 3 empty items.

But when you pass a value that is not a number to the Array constructor, it’ll create a new array with the length 1 and include that value as an element:

const arr = new Array('3');

console.log({ arr });
console.log({ length: arr.length });Code language: JavaScript (javascript)

Output:

{ arr: [ '3' ] }
{ length: 1 }Code language: CSS (css)

This behavior can be confusing and error-prone because you might not know the type of value that you’re passing to the Array constructor.

ES6 introduced the Array.of() static method to solve this problem.

The Array.of() method is similar to the Array constructor, but it does not treat a single numeric value special. In other words, the Array.of() method always creates an array containing the values you pass to it regardless of the types or the number of arguments.

Summary

Use the JavaScript Array.of() method to create a new instance of an Array from a number of values.

Was this tutorial helpful ?