25 - Array.from() and Array.of().txt

[00:00] [music]

Instructor: [00:02] We have a whole new bunch of array methods added in ES6. I'm going to talk about from and of first. The reason I'm going to talk about these two together is because they both are not on the prototype. 

[00:13] What I mean by that is, if I create my new array, like const ages =, and then ages does not have .from, and it does not have .of. Why? Because they are not on the prototype, they are on the array itself, so there is array.of and array.from.

[00:33] What do these do? First thing that they do is that array.from will take something that is array-ish and turn it into a true array. There's couple situations where we often need that, and that is when we are working with DOM elements.

[00:51] Let's go ahead and select all the people. const people = document.querySelector, and we want to select all the Ps inside of people. Now let's console.log people and see what we have. Good. We have all of these people here. Those are the three. 

[01:10] But what if I wanted just an array of the people's names? I could do const names = people.map, and it would take in the person, and it would return person.textContent. Give that a save.

[01:25] Now we get this error people.map is not a function. Why is that? Let's do a console.log of people, open that sucker up. We have a length, but the prototype is not an array, it's a NodeList.

[01:40] That's what I mean. I've been saying a couple times in this course, where something is array-ish or array-like, and that means that it has a length, which means it's array-ish, it has some of the methods, but doesn't have all of the methods that a regular array would have. We looked at that a couple videos ago.

[01:59] What we need to do in order to make this map work? We simply would have to make another variable, so const people array = we'll just call it array.from. Notice how I call it right off of array, and then you pass it the thing that is array-like. In this case, it is a NodeList that has a length, so it's going to be able to convert from that to a real one.

[02:23] When I console.log people array, we still get that error. Don't worry about that, it's because we hadn't switched it out. Open it up. Hey, look. The prototype is array now, and you open that sucker up, and you see absolutely all the methods that you're probably used to. 

[02:38] You can call array.from onto it, and then I will take this people array and map over that instead, and now we should have a names array, which is actually everyone's name.

[02:51] Similarly, we can have also done this array.from. Just wrap our querySelector right into it, and then we don't need that second variable here. We can just map over the people. 

[03:06] I could have also done this in one single go, rather than having to do it in two lines. array.from takes the second argument, which is a map function, which allows us to modify data as we are creating the array.

[03:21] I'm going bring this back to a regular document.querySelector. I'm going to do on a couple lines so it's nice and visible, and I'm going to say const people array = array.from. Now I am going to comment out this names array here, because array.from will take a second argument, which is a map function. 

[03:44] I'm going to say person, and from that we are going to return whatever we want. Return Wes. Console.log people array. Then you have Wes Wes Wes. Why? Because it loops over every single paragraph tag, and then return to us something.

[04:06] What is this person here? Let's console.log it. Each person is the actual DOM node, so if we return, instead of returning obviously just Wes, we're going to return person.textContent. That should give us the actual person's name.

[04:25] There we go. Look at, now people array = Wes Kate Snickers. I created that array in one single go. I don't need the names array, where I've mapped it separately, because array.from will take a second argument, which is the ability to map over it.

[04:44] Another use case is that if we want to convert the arguments object into an actual array. I'm going to comment this stuff on out, and we're going to create some function called sumAll. 

[04:56] When we run it, we're going to call sumAll and pass it a whole bunch of numbers that all need to be added up. We just did an example like this when we looped over it. However, if you want to use a reduced one, I am going to show you how to actually do that.

[05:09] Inside of this function I'm going to console.log arguments. It looks like an array, and that would be a perfect use case for reduce. I'm going to take arguments, and I'm going to reduce it, which take the previous and the next, and return the previous + next. I'm going to start with 0That should work, right? Arguments.reduce is not a function. Why not? If we console.log arguments, do we see arguments.reduce? Here's arguments. Let's look into the prototype. I don't see .reduce. Why not? Because this is arguments. It is not an array, it's array-ish.

[05:57] All we would have to do is say const nums = array.from(arguments), and then we use that nums one to reduce on over it, and our sumAll, if we were going to call this from console, you see that we got our numbers added on up for us.

[06:16] That's pretty common use case where you actually do want to convert your arguments object onto an array. Again, it is array-ish, because it has a length, but it doesn't have any other of methods on it.

[06:27] Next up, we have array.of. It's pretty straightforward. Pretty much how it works is you say const ages = Array.of, and you just pass it as many arguments as you want. That's going to create an array from every single that argument you pass it. 

[06:43] That's it. There is nothing else much more to array.of. That's one of those you put in your back pocket, because you might need it at some point.