Create Arrays From Objects With Array.from() - JavaScript Tutorial

hey guys hey going in this video I'll be showing you how to use the array dot from function in JavaScript so essentially it's a really simple function and it allows you to create an array from an iterable or an array like object so it's really useful and even provides a map function for convenience if you wanted to manipulate or change the data in which you are creating the array from so I'm gonna be showing you how it works with a few examples so let's go inside the text editor right here and scroll down to the JavaScript section so firstly I want to demonstrate how you can use it on an array like object so for example an array like object would be the arguments object that that you get inside a function so for example I'll make a function right here called myfunc and inside here I'm going to simply say console.log arguments and then I'm just gonna go down here and call that function and pass in a few values such as 1 dumb and something like let's just say an object and we can just say name and then dumb once again okay so 3 arguments into this function and I'm gonna save this and refresh the browser as we can see here we get the arguments object logged out to the console and the arguments object is basically just an array like object containing all of the arguments in which I passed through as you can see here it's got indexes so 0 1 and 2 and it's also got a length property so essentially an array like object in java script contains indexes and also the length property which means this function is going to be supported with the array dot from function okay so with that being said let's go back inside here and let's create an array using the array dot Fromm function so let's get rid of this and say Const let's just call this one an array is equal to array dot from and then passing here arguments as I said since arguments is an array like object it's going perfectly fine because the radar front function has access to the indexes and also the length property so now I'm gonna console.log eggs array just like this okay and I'm gonna now save this and then refresh once again and we can see in the console we get here an actual array this time round containing all of the arguments so in this case maybe the arguments object is perfectly fine the way it is but it's just an example so now I want to show you how it works with an iterable object so for example one of the most common iterables in javascript is going to be a node list and typically you get a node list from calling the query selector all functions so let's go back inside here and get rid of all this stuff and make a new constant board elements equal to documents like query selector all we're going to be selecting every element on the page so we can pass in here an asterisk as my query selector all my CSS selector okay and now I'm gonna just simply I go down here and make a new constant called L array so element array equal to array got from and passing here elements okay so once again essentially your elements here is a node list and an old list is an iterable object because it provides an iterator when you call the symbol dot elevator property on the node list okay so I'm now gonna console.log L array just like this I'm gonna save this and then refresh this and we can see right here we get an array of all the elements if you wanna know whether or not an object is iterable it's really straightforward I just go back inside here and I'm just going to console download the actual elements object itself okay so inode list I'm gonna save this here and refresh once again and in the console I'm just going to expand the node list objects right here and we can see on the bottom here inside the prototype we have here a symbol iterator property containing a function and basically this right here denotes that this this object is iterable okay so many objects in jobs gives obviously iterable things like string and node list map sets arrays etc so all of those types are going to be supported with the array from a function just for good measure I will be showing a second example here of an iterable object this time a string so back inside here let's get rid of all this stuff make a new constant coordinate equal to Dominica just like this I'm now going to say STR array once again in a very similar fashion array dot from and passing here name then of course console.log string array and we should see now DME NRC as separate elements inside B right I'm gonna save this here and refresh and we can see right here we get an array of all of the characters in that string okay so once again it works because strings are iterable okay so the last thing I demonstrate is going to be the map function however I might just mentioned before that if you're not too sure what your reports are or hard they work definitely check out my video on iterables I'll leave a link to it in the comments below but anyway let's take a look at this map function right here and what it can be used for for the array dot from function so let's go back inside here we're going to be using the same string right up here okay and we can just change this to instead take a second argument in the array dot from and this one is going to be the map function so essentially the map function works in a very similar way if not the same way as a typical array map function and that one right there allows you to manipulate each element inside the array so we can put in here for example function which accepts a character just like this because obviously the iterator for or the for the string is going to provide individual characters which means essentially this function right here is gonna run for every single character inside my name right here okay which means if we return car dot to uppercase just like this essentially it's gonna grab this value and put it in the place of what it should be so essentially we're gonna get once again my name individual characters however they're going to be uppercase T instead so I'm gonna save this here and refresh one one more time we can see here we get uppercase for all of my characters okay and one last thing to mention about the array dot front function is that it performs a shallow copy okay so this essentially means that if you were to provide an actual object or array as one of your elements inside your iterable then of course if you change that object outside of the array you create that change will be carried across so I might just demonstrate this real quickly here by creating an array from a set okay so I'm gonna go right here and make a new constant call this one my set equal to a new set obviously sets are iterable so it's gonna work fine with the array dot from so I'm now gonna say my stepdad I'm gonna add an object to my set so I'm gonna save right here let's just say name and make this dumb once again now I'm going to say essentially for Const value of my sets values just like this okay so essentially I'm just getting each one of the values from the set I'm gonna say consult log value okay I'm gonna save this here and refresh and we can see right here we get name is equal to Dom of course we get the actual object right there so now I'm going to create an array from this set so instead a Const sets array is equal to array up from and parsing here of course the set just like this and then once I've got this set array at index 0 it's gonna be this object so I'm gonna say set array at index 0 then dot name is cable to Bob instead so now as we can see here we are still referencing the sets but because this is a shallow copy we don't actually copy the values inside the property inside the arm the object which means if I save this and refresh we can see of course the object inside the set is the same as the one that's inside the array which means of course the change gets applied right here and we get Bob as the name so that what there is the array dot from function in JavaScript thank you for watching guys and I'll see you later

Channel: dcode

Views: 7,579

Rating: 4.9503107 out of 5

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, js, javascript, ecmascript, ecmascript2015, es6, es7, array, from, iterable, iterator, for, of, loop, object, prototype, symbol, string, over, shallow, deep, copy, advanced, map, filter, reduce, method, function, arguments

Id: NPbDqbwtr-4

Length: 9min 51sec (591 seconds)

Published: Wed Nov 06 2019