<p>The JavaScript function <code>Array.from</code> is not often discussed, but it is great!</p>
<p>Sometimes we run into something which is array-like, but is not actually an array. It would be nice to use the standard array methods like <code>forEach</code> or <code>filter</code>, but they're not directly available since the thing is not really an array.</p>
<h1>🧚</h1>

<p><code>Array.from</code> to the rescue!</p>
<p>It turns things into an array, which means we can use the array methods we're already familiar with.</p>
<p>Here are some examples array-like things which I've found useful to convert to an array using <code>Array.from</code>:</p>
<ul>
<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></li>
<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection">HTMLCollection</a></li>
<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></li>
<li><a target="_blank" href="https://nodejs.org/api/buffer.html">Buffer</a></li>
</ul>
<p>Here is an example of removing a frisbee 🥏 from a string of sports balls using the <code>filter</code> array method.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> realSportsBalls = <span class="hljs-built_in">Array</span>.from(<span class="hljs-string">'⚽🏀🏈⚾🥎🎾🏐🏉🥏🎱'</span>)
    .filter(<span class="hljs-function"><span class="hljs-params">ball</span> =&gt;</span> ball !== <span class="hljs-string">'🥏'</span>)
    .join(<span class="hljs-string">''</span>);
</code></pre>
<h1>🤹‍♂️</h1>

<p>What exactly is an "array-like" thing? It is an object with a <code>length</code> property and indexed elements. "Indexed elements" means that some of the keys of the object are numbers.</p>
<pre><code class="lang-js"><span class="hljs-built_in">Array</span>.from({
    <span class="hljs-attr">length</span>: <span class="hljs-number">3</span>,
    <span class="hljs-number">0</span>: <span class="hljs-string">'A'</span>,
    <span class="hljs-number">1</span>: <span class="hljs-string">'B'</span>,
    <span class="hljs-number">2</span>: <span class="hljs-string">'C'</span>,
});
<span class="hljs-comment">// Evaluates to [ "A", "B", "C" ]</span>
</code></pre>
<h1>🫐</h1>

<p>Read more about <code>Array.from</code>:</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" class="autolinkedURL autolinkedURL-url" target="_blank">developer.mozilla.org/en-US/docs/Web/JavaSc..</a></p>
<p><a href="https://www.w3schools.com/jsref/jsref_from.asp" class="autolinkedURL autolinkedURL-url" target="_blank">w3schools.com/jsref/jsref_from.asp</a></p>
<h3>📡📡📡</h3>

<p>Cover photo by braincontour from Pexels</p>


The JavaScript function `Array.from` is not often discussed, but it is great!

Sometimes we run into something which is array-like, but is not actually an array. It would be nice to use the standard array methods like `forEach` or `filter`, but they're not directly available since the thing is not really an array.

<h1>🧚</h1>

`Array.from` to the rescue!

It turns things into an array, which means we can use the array methods we're already familiar with.

Here are some examples array-like things which I've found useful to convert to an array using `Array.from`:

- [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
- [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)
- [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
- [Buffer](https://nodejs.org/api/buffer.html)

Here is an example of removing a frisbee 🥏 from a string of sports balls using the `filter` array method.

```js
const realSportsBalls = Array.from('⚽🏀🏈⚾🥎🎾🏐🏉🥏🎱')
    .filter(ball => ball !== '🥏')
    .join('');
```

<h1>🤹‍♂️</h1>

What exactly is an "array-like" thing? It is an object with a `length` property and indexed elements. "Indexed elements" means that some of the keys of the object are numbers.

```js
Array.from({
    length: 3,
    0: 'A',
    1: 'B',
    2: 'C',
});
// Evaluates to [ "A", "B", "C" ]
```

<h1>🫐</h1>

Read more about `Array.from`:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

https://www.w3schools.com/jsref/jsref_from.asp

<h3>📡📡📡</h3>

Cover photo by braincontour from Pexels
