Add Turn An HTMLCollection Into An Array as a javascript til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_942 TILs and counting..._
+_943 TILs and counting..._
 
 ---
 
@@ -362,6 +362,7 @@ _942 TILs and counting..._
 - [Timing Processes](javascript/timing-processes.md)
 - [Transforming ES6 and JSX With Babel 6](javascript/transforming-es6-and-jsx-with-babel-6.md)
 - [Truthiness of Integer Arrays](javascript/truthiness-of-integer-arrays.md)
+- [Turn An HTMLCollection Into An Array](javascript/turn-an-html-collection-into-an-array.md)
 - [Turn Off Console Error Messages In A Test](javascript/turn-off-console-error-messages-in-a-test.md)
 - [Waiting On Multiple Promises](javascript/waiting-on-multiple-promises.md)
 - [Who Am I: NPM Edition](javascript/who-am-i-npm-edition.md)

javascript/turn-an-html-collection-into-an-array.md

@@ -0,0 +1,25 @@
+# Turn An HTMLCollection Into An Array
+
+If you are using any of the built-in document query utilities, such as
+[`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName):
+
+```javascript
+> document.getElementsByClassName("some-class")
+HTMLCollection(5) [ ... ]
+```
+
+Then you are going to get an
+[`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)
+in response. An instance of this cannot be iterated over, so you cannot call
+things like `map` and `filter` against it.
+
+To use Array collection methods, you are first going to need to turn the
+`HTMLCollection` into an array. You can do this with
+[`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from):
+
+```javascript
+> Array.from(document.getElementsByClassName("some-class"))
+[ ... ]
+```
+
+[source](https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc)