Best of Modern JavaScript — Array.from and Getting Items

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the Array.from method and some instance methods.

Array.from and Map

Array.from takes a second argument that takes a function that maps the entry to the values we want.

For example, we can write:

const divs = document.querySelectorAll('div');
const texts = Array.from(divs, d => d.textContent);

We get the div elements with querySelectorAll method.

Then we call Array.from with the NodeList with the divs as the first argument.

The 2nd argument is a callback to let us map a value.

This is shorter than writing:

const divs = document.querySelectorAll('div');
const texts = Array.prototype.map.call(divs, s => s.textContent);

The from method is static, so it’ll be inherited if we create a subclass of an array.

For instance, we can write;

const obj = {
  length: 1,
  0: 'foo'
};

class FooArray extends Array {
  //...
}
const arr = FooArray.from(obj);

We can pass in an array-like object to FooArray.from the way we do with any array.

The mapping functionality also works.

So we can write:

class FooArray extends Array {
  //...
}

const divs = document.querySelectorAll('div');
const arr = FooArray.from(divs, d => d.textContent);

We called FooArray.from like we do with Array.from and get the same result.

Array.of

Array.of is another method of an array.

It takes a list of arguments to let us create an array.

This is an alternative to the Array constructor.

Instead of writing:

const arr = new Array(1, 2, 3);

We can write:

const arr = Array.of(1, 2, 3);

Array.of is better since it returns an array with the arguments even if there’s only one argument.

This isn’t the case with the Array constructor.

If we pass one argument, then it’ll try to create an array with the given length.

This also works with subclasses of Array.

For instance, we can write:

class FooArray extends Array {
  //...
}

const arr = FooArray.of(1, 2, 3);

Then we can check if an arr is an instance of FooArray by writing:

console.log(arr instanceof FooArray);
console.log(arr.length === 3);

Array.prototype Methods

There are also new Array.prototype methods added with ES6.

They include the Array.prototype.entries() , Array.prototype.keys() , and Array.prototype.entries() .

Array.prototype.entries() returns an array with arrays of index and element as entries.

For example, we can write:

const arr = ['foo', 'bar', 'baz'];

for (const [index, element] of arr.entries()) {
  console.log(index, element);
}

index will have the index of each entry and element has the element for each index.

Array.prototype.keys() have the index of the array.

For instance, we can write:

const arr = ['foo', 'bar', 'baz'];

for (const index of arr.keys()) {
  console.log(index);
}

Then we get the index value for each entry.

Array.prototype.values returns an array of values.

So we can write:

const arr = ['foo', 'bar', 'baz'];

for (const element of arr.values()) {
  console.log(element);
}

Searching for Array Elements

We can search for array elements with the Array.prototype.find method.

It takes the predicate which is a callback that returns the condition we’re looking for.

The 2nd argument is a value for this we use in our callback.

It returns the first item that’s found.

If nothing’s found, then undefined is returned.

For example, we can write:

const num = [2, -1, 6].find(x => x < 0)

then num is -1.

If we write:

const num = [2, 1, 6].find(x => x < 0)

then num is undefined .

Conclusion

Array.from can be used to map items the way we want.

Also, we can get indexes and elements and find elements in various ways.

The post Best of Modern JavaScript — Array.from and Getting Items appeared first on The Web Dev.