Have you ever come across odd ways to use Array.of() and Array.from()?

Question

Have you ever come across odd ways to use Array.of() and Array.from()?

Discover two innovative methods introduced in ES6 for Array: Array.of() and Array.from(). Their distinct uses are outlined on this informative page.

However, I find myself perplexed by the application of Array.of in this specific line.

// usage of Array.of
console.log(
    Array.of( "things", "that", "aren't", "currently", "an", "array" )
); // ["things", "that", "aren't", "currently", "an", "array"]

Consider the alternative approach below:

console.log(
    [ "things", "that", "aren't", "currently", "an", "array" ]
); // ["things", "that", "aren't", "currently", "an", "array"]

It's worth noting that the same outcome can be achieved using console.log(Array.of(...)). Is there any particular benefit to utilizing Array.of in this context?

Another source of confusion arises with the use of Array.from in the following line.

var divs = document.querySelectorAll("div");
console.log(
    Array.from( divs )
);

What if Array.from is omitted from the aforementioned code snippets.

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

Are there any advantages to employing Array.from in this scenario?

javascript arrays ecmascript-6

Answer 1

Answer №1

Understanding Array.of() Function in JavaScript

Brendan Eich, the creator of JavaScript, discussed the purpose of Array.of() in a forum post (Source):

Dmitry A. Soshnikov asked:

Brendan Eich responded:

The main goal of Array.of is to provide an array constructor that eliminates the special case for Array(42), which can lead to unexpected behavior by preallocating length but leaving gaps in the array.

Some developers questioned how using Array.of would be beneficial compared to manually enumerating items in an array initializer. The discussion highlighted the syntactic elegance and efficiency of using brackets for array initialization instead of relying on functions like Array.of.

Eich emphasized that Array.of is particularly useful when passing arguments as functions where the number of arguments might vary. In such cases, Array constructor may not behave as expected with single-number arguments, making Array.of a better option.

This explains the need for Array.of.

An example illustrating the difference between Array.of and Array constructors:

// Array.of(42) creates an array with 1 element (42). Using Array(42) will create an array with 42 undefined elements.
console.log(new Array(42));
console.log(Array.of(42));

Exploring Array.from() Method in JavaScript

The Array.from() method allows you to create a new Array instance from array-like or iterable objects.

Array-like objects (objects with length property and indexed elements)
Iterable objects (objects like Map and Set where you can access their elements)

For instance:

var sampleMap = new Map([[1, 2], [2, 4], [4, 8]]);
console.log("Original Map:");
console.log(sampleMap);

var newArrayFromMap = Array.from(sampleMap);
console.log("Transformed Array: ");
console.log(newArrayFromMap);

Answer 2

Understanding Array.of() Function in JavaScript

Brendan Eich, the creator of JavaScript, discussed the purpose of Array.of() in a forum post (Source):

Dmitry A. Soshnikov asked:

Brendan Eich responded:

The main goal of Array.of is to provide an array constructor that eliminates the special case for Array(42), which can lead to unexpected behavior by preallocating length but leaving gaps in the array.

Some developers questioned how using Array.of would be beneficial compared to manually enumerating items in an array initializer. The discussion highlighted the syntactic elegance and efficiency of using brackets for array initialization instead of relying on functions like Array.of.

Eich emphasized that Array.of is particularly useful when passing arguments as functions where the number of arguments might vary. In such cases, Array constructor may not behave as expected with single-number arguments, making Array.of a better option.

This explains the need for Array.of.

An example illustrating the difference between Array.of and Array constructors:

// Array.of(42) creates an array with 1 element (42). Using Array(42) will create an array with 42 undefined elements.
console.log(new Array(42));
console.log(Array.of(42));

Exploring Array.from() Method in JavaScript

The Array.from() method allows you to create a new Array instance from array-like or iterable objects.

Array-like objects (objects with length property and indexed elements)
Iterable objects (objects like Map and Set where you can access their elements)

For instance:

var sampleMap = new Map([[1, 2], [2, 4], [4, 8]]);
console.log("Original Map:");
console.log(sampleMap);

var newArrayFromMap = Array.from(sampleMap);
console.log("Transformed Array: ");
console.log(newArrayFromMap);

Answer 3

Answer №2

console.log(Array.of("Akansha")) //[ 'Akansha' ]

console.log(Array.from("Akansha")) //['A', 'k', 'a','n', 's', 'h','a']

let total1 = 100

let total2 = 200

let total3 = 300

console.log(Array.of(total1,total2,total3)) //[ 100, 200, 300 ]

Answer 4

console.log(Array.of("Akansha")) //[ 'Akansha' ]

console.log(Array.from("Akansha")) //['A', 'k', 'a','n', 's', 'h','a']

let total1 = 100

let total2 = 200

let total3 = 300

console.log(Array.of(total1,total2,total3)) //[ 100, 200, 300 ]

Have you ever come across odd ways to use Array.of() and Array.from()?

Answer №1

Understanding Array.of() Function in JavaScript

Exploring Array.from() Method in JavaScript

Answer №2

Similar questions

What is the best way to iterate through this array in ajax?

Need a jQuery callback function in PHP that only retrieves the value without any redirection

Remove an element from an array of string pointers

The aspect ratio of a DIV element is not maintaining its scale properly in Firefox

What is the best way to implement a Facebook share button using the Facebook Javascript SDK within an Ajax request?

The Ajax GIF Loader is not functioning in the latest versions of Internet Explorer and Firefox, but it is running smoothly in

Preventing file visibility in Three.js resource directory

What is causing my website to refresh before I can save the edits I have made after clicking on the edit button

Adding the classname "active" in ReactJS can be achieved by utilizing the `className` attribute within

I am struggling to make my button hover effects to function properly despite trying out numerous suggestions to fix it

Ways to incorporate validation into Material-UI form input fields

How can I pass a value to a javascript function when a button in asp.net is clicked?

What is the reason for Jest attempting to resolve all components in my index.ts file?

Tips for creating a Vue component that triggers the select dropdown to open when the entire div or wrapper is clicked

The #each helper in Handlebars is used to iterate over an array

angular-recaptcha: Adjusting language based on the website's language update

Error: Unable to access the 'wsname' property of an undefined value

Displaying an additional section using hover effects in Bootstrap

Prevent modal from closing when tapping outside of it

Is there a way to retrieve php session in a javascript file?