Array.from Method in JavaScript

ladies and gentlemen today we're gonna talk about a new method in JavaScript arrays called array dot from now array dart from has a lot of utilities and so we're gonna look at all the utilities and how to do it with array from and how to do it without array from see if we can do something else to create the same functionality and if you move if you want more interesting videos coming directly to you please click on the bell icon if you haven't done so so you would get all the latest updates from Texas and welcome to tech see tutorials [Music] so first of all array has a prototype method called from so early dart from was recently introduced in JavaScript and if I want to find out how to access it if I do console dot log if I type array and run it I would see its prototype but if I do dir I should see more and if I expand it I have a bunch of methods one of them is array from another is is array you probably used it and it has array often some other now this is not array prototype that is different this is a constructor array prototype so if I look at the other prototype where all the other methods are if I create an empty array and look at its prototype I would get a bunch of methods this I can use directly on array so for example if I create an array and I can do let's splice and array from is I have to use the array constructor and then from so this is a difference between the array method and arrays prototype arrays constructor method so already dot from is array constructor method it doesn't work directly on the area like this so that's the first thing you need to know so what is what does it do a ring from basically you can create arrays from something now what is that something it could be an array like objects or you can create a brand new array from scratch and you can actually do a lot with it actually it's very flexible so let's look at a very simple example so if I have some string let's say Texas and I want to convert this into an array now typically I can do something like this console.log using spread operator if I do this it would convert into an array and it does its splits the entire thing character by character and puts it into each element or I can do this I can say Const from string equal to array dot from and pass the string and if I console.log from string and write it I get the same result as this one I can also create arrays from fly a lot of times I want to create an empty array I just want to create an empty array of a certain size I can do it using array now from so I can say Const from scratch equal to already dot from and then I would have to provide a length so I would have to prove the first argument would be some sort of object with leant equal to let's say five and it will take a callback function in the second argument where each array would have value and index and what I want to say is once you create it it would have some value in index now because I'm creating array from nothing the value would be undefined and index would be you know zero one two three four right because the length is fine if I just use value as as the value then it would create an array of length five with undefined in it and run it I would get an array empty array with undefined if I want to do like empty string I can simply hard-coded string here when I run it I would get or even empty strings so this is quite useful I can actually since I can use index as the value all I have to do is I and it would fill one two three four and I can do that and I can use some math with index you know I can say let's square every index and fill it with it and it would give me 1 0 1 4 9 16 right now without using array from how can you do it well there was a way so let's take this out and we're gonna use older method not vary from so Const from scratch equal to I would have to use new array this is an array constructor and if I say I want five elements this would create an array with five elements let's see what happens so now if I run this I would get an array but if you can see it's empty there is nothing inside so it's actually designated a length so the length is five but they are completely empty and I can use fill method so what I would have to do is wrap this like this and use fill and I'm going to put 0 and run it and I would get 5 zeros let's say if I want to fill if I want to fill it with let's say 0 1 2 4 5 0 1 2 3 4 I would have to use map function which all the indexes I can do this we and I and I so initially creates an empty array with length five May fills it with zero and then it fills it with the index which is zero one two three four so if I run this I will get zero one two three four but this I can do in one line I'm sure there is another way to do it if you know please let me know another utility of reform is let's say if I have an array Const array equal to show you something like this it has three elements 1 1 & 2 well 1 1 is duplicate elements so if I want to get all the unique values which is 1 & 2 and remove any duplicates I can do this Const unique equal to array dot from and then I can use new set and pass the array so set basically only holds unique value so it converts array into set with unique values and then a radar from converts that set back to the array if I console.log this and run this I would get only 1 & 2 if I want to do this without alright from I can simply do this const unique equal to i can simply use a sprayer operator and new set all right this would do the same thing if i console.log it and run it i would get one two so in this case sprayer operator is much looks much nicer another utility is let's see if i have some function inside i can access all the arguments that is passed using arguments object so five console.log arguments if i run it like this I would get an argument object but if you look at the argument object it doesn't have much in its prototype doesn't have all the array matters for example I'm looking for join let's say if I want to take the argument and join them together I don't see it for example if I want to do this t e H and if I run this I would get the argument object but I cannot really use join because inside I want to convert this back into a string so what I can do is console.log and array dot from and I can pass the arguments object which converts into an array then I can do join by empty space which meaning joins all the characters together now if I run this I will get Texas so this array has all the array prototype methods unlike arguments which doesn't and I'm sure there are some more interesting uses usage of a radar from but if you know any interesting use do share in comment and I hope you enjoy this video and if you did please like don't forget to Like subscribe and provide a nice comment and you can also follow me on Facebook and Twitter and also created a private Facebook group where we can discuss problems like this and any new technology new concepts that are coming in the front end I'll provide a link here you can you can try to join and I will approve and you can also translate this video for me it's pretty simple the information is in the description [Music]

Channel: techsith

Views: 29,404

Rating: 4.9580646 out of 5

Keywords: javaScript, Array.from, array.of, javaScript array prototype, javaScript Array methods

Id: zVMkR-IrBJI

Length: 12min 8sec (728 seconds)

Published: Wed Mar 20 2019