JavaScript dives – two array methods

Everyday as a developer who deals with JavaScript we’re in touch with Arrays, it doesn’t really matter if want it or not, eventually we have to operate on Arrays because of their capabilities to store the data and manipulate it.

What is actually an array? If defined by using simplicity it is a warehouse that allows you to store a collection of any type of data, which means that you can have a set of objects, booleans, numbers and strings. Why did I call it a warehouse?!

I didn’t mean to offend set of data in your array – don’t get me wrong, please. By showing you above picture I wanted to express what kind of mess we can have in our collection if we don’t take care of that and this is basically our array – basement.

1. Admission

In this blog post, I’d like to write about two interesting methods that help me a lot in my everyday development. We’re going to talk about Array.from and Array.of methods. Let’s dive into it – I can’t wait to show you these ways to transform collections arrays.

2. Array.from()

If you haven’t heard about the following method, it has been shipped in the ES2015 specification of JavaScript standards. The method gives you an option to create a new, shallow-copy instance of an array from a set of data that is array-like or iterable.

Example 1:

Array.from(“JavaScript”);
// Result: [“J”, “a”, “v”, “a”, “S”, “c”, “r”, “i”, “p”, “t”];

A presented syntax on the example above shows you a fundamental usage of the method. You’re correct if you’re thinking that this basic syntax transforms the word “JavaScript” into an array as the split method would do but split doesn’t give you a possibility to map through it.

Do you remember when we were trying to convert NodeLists to Array? Yes, we had to use specific hacks to achieve that, forget about hacks, you’ve got Array.from() which helps you to iterate over an array without any specific combinations, please take a look at the example below.

Example 2:

 const nodeList = document.querySelectorAll(‘.elemets-list’);
 Array.from(nodeList, elem => elem.textContent);

In the above example I’m getting a NodeList by using querySelectorAll, which we need to make iterable to map through it and get the wanted value. In that case, I’m using arrow function and returning textContent of one of the elements from a NodeList.

The method contains one more argument, which you can use as this.

Example 3:

const fn = (data) => data; // 405;
   Array.from([1,2,3], x => {
      this.a = x * 5;
      this.b = x * 9;
      this.result = a * b;

      return this.a * this.b; // [45, 180, 405]
   }, fn(this.result));

I've got one more example for you, did you know that you can generate an array by using Array.from? Yes, you can! In a really simple way, please take a look at the below code snippet:

Example 4:

// Generate an array with 5 slots without any values
Array.from({ length: 5 }); // Result: [undefined x 5];

// Generate an array with 5 slots filled by index
Array.from({ length: 5 }, (v, i) => i); // Result: [0,1,2,3,4];

// Perform many different operations on generated array
Array.from({ length: 5 }, (v, i) => i * 2); // Result: [0,2,4,6,8];

You can use Array.from() on:

• array-like objects which means object with length and indexed elements
• iterable objects such as Map and Set

3. Array.of()

The second menthod that I’d like to introduce you is Array.of(). This method creates a new Array for you based on the parameters passed to the method.

Example 1:

Array.of(7); // [7]
Array.of(1,2,3,4,5,6); // [1,2,3,4,5,6]
Array.of(...items);

As you can see in the above code sample, I showed you a functionality of Array.of method. Important thing is that it doesn't create empty slots as normal Array constructor would do, take a look at the example below.

Example 2:

new Array(7); // [empty x 7]

Above declaration of the constructor is going to create for us seven empty slots, which is completely unnecessary, unless you want to make a reservation of some memory. That would be a good solution but in my opinion, applies only to an enormous array containing million records or hundred thousand.

And that would be it in this blog post, I encourage you to see links down below. Those links will redirect you to official ECMAScript specification where you can see in a detailed way how those two methods work inside.

Array.from: https://tc39.github.io/ecma262/#sec-array.from
Array.of: https://tc39.github.io/ecma262/#sec-array.of