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
thiswhen 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);
Output
[ 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);
Output
[ 1, 2, 3, 4, 5 ] [ 10 ]
Difference Between Array.from and Array.of in JavaScript
Characteristics | Array.from | Array.of |
|---|---|---|
Purpose | Creates a new array from the array-like or iterable object | Creates a new array with the any number of elements |
Arguments | Takes an array-like or iterable object as the first argument | Takes the any number of arguments as individual array elements |
Use Case | Useful for converting iterable objects into the arrays | Useful for creating arrays with the specific set of the elements |
Flexibility | The Allows mapping and transformation of the array elements | The Accepts any number of the arguments treating each as an element |
Example | Array.from(set) | Array.of(1, 2, 3) |
