Difference Between Array.from and Array.of in JavaScript

JavaScript provides various methods for creating and manipulating arrays, two of which are Array.from and Array.of. These methods are part of the ECMAScript 6 (ES6) specification and offer distinct ways to create arrays.

Understanding the differences between these two methods is important for efficient array handling in your JavaScript code. This article will explore the differences between Array.from and Array.of, their use cases, and examples to illustrate their behaviour.

What is Array.from

Array.from is a static method that creates a new, shallow-copied array from an array-like or iterable object. This method is particularly useful when you need to convert other types of objects to arrays or when you want to create an array from an iterable with some transformation.

Syntax:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameters:

• arrayLike: An array-like or iterable object to convert to an array.
• mapFn (optional): A mapping function to call on every element of the array.
• thisArg (optional): A value to use as this when executing the map function.

Example: Implementation to show example for Array.from

// Example 1: Array from the iterable object

let set = new Set([1, 2, 3]);
let arrayFromSet = Array.from(set);
console.log(arrayFromSet);

// Example 2: Array from string with the mapping function
let str = 'Hello';
let arrayFromString = Array.from(str, x => x.toUpperCase());
console.log(arrayFromString);

[ 1, 2, 3 ]
[ 'H', 'E', 'L', 'L', 'O' ]

What is Array.of

Array.of is a static method that creates a new array instance with a variable number of arguments, regardless of the number or type of the arguments. It is a more straightforward way to create arrays from arguments compared to the Array constructor.

Syntax:

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

Parameters:

• elementN: Elements used to create the array.

Example: Implementation to show example for Array.of

// Example 1: Creating an array from the multiple elements

let arr1 = Array.of(1, 2, 3, 4, 5);
console.log(arr1);

// Example 2: Creating an array from the single element

let arr2 = Array.of(10);
console.log(arr2);

[ 1, 2, 3, 4, 5 ]
[ 10 ]

Difference Between Array.from and Array.of in JavaScript