Day 4 of JS30 challenge, today I worked with various methods on array (I knew most of them beforehand) but I learned two cool things today.
The key concepts I learned from today’s challenge were:
- Converting iterables to array in JS.
- Displaying array of objects nicely formatted in console.
As you might have observed that
document.querySelectorAll doesn’t return us an actual
Array but instead it returns us what is called as a
NodeList doesn’t have all the methods that an
Array does (like
NodeList is an example of what we call as “iterable” in JS. So whenever working with iterables we tend to prefer to convert them to an actual
Array so that we have more options to work with.
I already knew of one way to convert them:
const anyIterable = document.querySelectorAll('a'); const convertedArray = Array.from(anyIterable);
Here we used the
Array.from method to convert the iterable to an
The other way I learned today was:
const anyIterable = document.querySelectorAll('a'); const convertedArray = [...anyIterable];
Here we made use of a combination of 2 things:
When we prepend an iterable with
... (called the ES6 spread operator) what it does is it extracts all values from that iterable and replaces the
...anyIterable part of the expression with those values.
Then when we enclose the “spreaded” values with
] it converts the whole thing into an array containing all the values from that iterable.
Both produce the same result. I don’t know if one performs better than the other under large data-sets. But even though the
[...anyIterable] way is more concise, to me the
Array.from(anyIterable) usage seems more readable.
That’s all folks, that was it for today. If you have anything unclear in this article or want to discuss anything else, hit me up on twitter @varun_barad.