Best of Modern JavaScript — Array.from and Getting Items
Tags: javascript, webdev
Published: 2020-07-30 00:36:14

---
title: Best of Modern JavaScript — Array.from and Getting Items
published: true
date: 2020-07-25 19:37:48 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aarray-from-and-getting-items/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aarray-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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aarray-from-and-getting-items/) appeared first on [The Web Dev](https://thewebdev.info).