JavaScript Array Cardio Practice - Day 1 — #JavaScript30 4/30

I hope you are ready to sweat because today we're not dealing anything pretty we're not dealing with CSS we're not dealing with Dom elements really we're dealing with the fundamentals of JavaScript and that is working with array methods I found that when I forced myself to get really good at filter map sort reduce all of those array methods I found that my JavaScript programming got a lot better and this is really what I want to drive home today's just throw a whole bunch of examples at you and really get you better at working with these array methods a lot of people like to call these filter map sort reduce these are sort of like the gateway drug to functional programming so what we've got here is some data constant Venters and each inventor is an object and then I've got also a people are right here which just has strings but inside of that string the last name comma space the first name so first of all let's kick it off here and and if you think you can do these on your own please pause the video and at least try them yourself but if you're fairly new to this stuff then then stick with me so first thing we're going to do is get people who were born in the 1500s so I'm gonna say Const 15 equals and we'll take the inventors and we're going to filter over it now the way that the filter works is you pass it a function and that function is going to loop over every single item in our array so Albert Isaac Galileo and it's going to give us the inventor invent or inventor it's I don't know eyes they all fancy so what that does is we take the inventors we loop over and for each inventor we can decide whether we want to keep it or not so go here we'll have an if statement and we say if the inventor dot and the dot year so that's when they were born if the inventor year is greater or equal to 1500 and the inventor year is less than 16 or we could do less or equal to $15.99 whatever you prefer whatever reads easier for you then we are going to return true and by returning true that means we keep it and then you don't have to a lot of times I see else people have an else here and you return false if you do not return anything other than true or something that is true the-- it will just throw it in the garbage so there's no need to return false here you just return true if you want to keep it so let's take a look at our variable here will console dot log it 15 we've got two people as a bit of a pain so I'm gonna show you a little tip console dot table aha very nice so these are the people that were born in the fifteen hundreds that we here have here now this can be greatly reduced first of all we can make this into an arrow function so delete the word function so you can delete the parentheses around a vent or if you prefer and we'll make that an arrow function good that still works and then this right here this just is either return true or return false so what we can actually do is do it all in line where we will just return these two things so it's going to give us the inventor and we're going to return the result of these two things which if both of them are true it's going to return a boolean of true and if that makes you a little bit uncomfortable reading that you can throw an extra set of parentheses around it I can delete this we've done it all in one line still works just as we planned good next one give us an array of the inventors first and last names what does map do map takes in an array it does something with that array and then returns a new array but of the same length I like to think of map as sort of like a factory machine where it takes in a raw material and will stamp it somehow and then and then kick out that item on the other end or as filter you can bring in ten things and return to map will always return the same amount of items as you give it so here's what we're going to do is will say Const full names equals inventors dot map and we have our inventor and there from that we are going to return the inventor dot first because that's the first name and we can return inventor last and console.log the full names kind of works but we still have a problem with the space here so you could either concatenate in a space which will work or you can return back ticks and use template strings working great for us past good next up the sort sort the inventors by birthdate oldest to youngest so if you've never used sort the way that sort works is that you get two items and you have these two items in your hand and you're asked to sort just those two items so you say is person a older than person B and if so you put the older person on top and the way that we do that is by returning one and negative one and that's going to bubble these items up and down in the array so we say Const ordered equals inventors dot sort and we have a function which that function is going to give us like the first person and the second person or a lot of people like just like to use a and B so whatever you prefer though so the first person is going to be a the second person is going to be B and then we will say if a dot and we need to do it based on their birthdate here so a dot year is greater than B dot year then we returned one else you return negative one and that's just going to move these people up and down in the you can sort of imagine the bubbling up and down inside of the array that we have let's take a look at way here Oh got an error here on line 39 what we do should be able to smell function right there we go and now we have the oldest people here while as the youngest people now this is really really long we could really cut that down by doing something like this so ordered equals inventors sort and you have a and you have B and from that we are going to do what's called a Turner area Turner area I can't say a properly Turner Eric Turner area operator whatever somebody once sent me a message after a talk and said you said turn right or wrong and now I'm self conscious every single time that I say it so from that we want to have a Turner area which is like a shorthand if statement was a ear is greater than B ear and if that is true return 1 otherwise return negative 1 and that is the exact same thing that's what we are doing here just doing it in one line with an arrow function and implicit return and a ternary operator let's double check that still works works great next one how many years that all of the inventors live so what our reduce will do is we're like a sort in a map they will just take items in and either sort them or they will turn them into something else or they will filter them down what a reduce will do is allow you to sort of build something on every single one so if you've ever done code like this or you like do like var total years equals zero and then you you bust out the the old for loop which one is that right here and then you have inventors and then you do like total years plus equals inventors you've done this before right where you have a variable before and then you do this crazy loop and then finally when you're done you can call so log total years write a reduced is just a much cleaner way to do that and you don't have to do this crazy square bracket eye which I've seen a lot of people have a trouble learning so that's what we're gonna do is we're gonna say Const total years equals inventors dot reduce and the way that reduce works is it's going to give you sort of like your running total total or what you've returned from this function last time so we're gonna call that total and then we it also is going to give you the inventor and from that you wrap those in some parentheses have an arrow function here and from that we are going to return the total which is what the total was last time around again all these functions reduce sort filter they just loop over every single one and then we are going to return the number of years that that inventor had lived so where as a inventor dot past - inventor dodge year now let's let's try that it's not gonna work totally for us constant log little years and we get this object object seven like what what's going on here and and the problem is that that first time around we don't have a total and it's equal to undefined so what we need to do is just make this zero and that will then allow us to add it up five hundred and twenty three years how you doing maybe need to go get a drink get a sports drink something like that we have another one coming up here sort inventors by years lived okay so Const oldest equals eventers dot now we're going to sort them and we are going to get a and B and before I do the returning one or negative one we're going to Const we're going to create some variables so we can use that in our if statement so that counts last guy how old did he live a dot past minus a dot year and then we'll say next guy is equal to B dot year then from that we are going to say if last guy is greater than next guy we are going to return one or negative one sorry and then else we are going to return one now that seems a little bit long we can really clean that up and we can simply just say return we can use our turned our River ear operator return next guy if that is true negative one otherwise if that is false return one and that's the exact same thing as doing this if statement we just do it in one fell swoop it's console.log the oldest consoled on table that beautiful this guy lived a whole bunch of years this guy didn't live as many looking good next create a list of boulevards in Paris that contained do anywhere in the name all right so let's I've got this link here and this one we're gonna have to do from the Consul I'm gonna open it up now we've got all of these boulevards here and I need to first get the Dom elements out of the page so how would we do that well we could say document query selector but we don't know what to select so well we have to do is get out our dev tools inspect whatever it contains this let's see what contains all of these here there we go MW - category Const cat document out query selector dot MW category so let's see we got here there we go category is equal to that div and then we want to find the links within it so I'm going to make another one console links equals against a category dot query selector all again you can call query selector on any existing Dom element doesn't always have to be document it could look inside of an existing element and that's really why I'm doing this in two steps I could have just said and don't be category a and found all the links but I really wanted to show you that you can call query selector against any existing Dom element to look inside of that Dom element so I'm just gonna look for links inside of that oh let's see we got links AHA so this is a list of links is every link on the actual page now what I want to do is first we're going to convert that list of links to a list of names and then we're going to filter that list of knee for only ones that include the actual name silver say Const duh equals links dot map remember if we take in a list of links and kick out a list of names so we're gonna map over each one it's gonna be a link and from that link we are going to return just the link text content and that will give us whatever the text is inside of that rather than the entire link we don't really care about the the rest of the link so let's see we got here uh-oh link stop map Oh perfect I'm glad we ran into this what did I tell you in an earlier video query selector will return to you a node list and if we open up the prototype you don't see map you see for each but not a map so what we need to do is change this into an array because right now it's just a node list so there's two ways we could do that first you can just wrap the entire thing and array dot from and that will convert it into an array or you might also see see people doing something like this where you create an array and then you use es6 spread to spread every single item into the array and again if you've watched the es6 videos that I've done on spreads you'll know that a spread will take every item out of something an iterable which in this case is going to be a node list and put it into the containing array so I think array dot from is probably a little bit more readable in this case so let's go with that and then we need to this should work now I can't rerun this code here because I've used Khan so it's sort of one of the pains of using cons it's gonna tell you it's already being declared so I just need to refresh and rerun this code here duh there we go duh is a huge array of every single one and then I'm just going to immediately filter that so what I like to deal with with mine is let's just put them on their own line the first one will map it and then the second one will filter it so let's say the street name and we're going to only return if the street name includes so let's see what we got here got a refresh again and rerun this now duh is equal there we go now we've got a subset of that initial array only containing the inside of it sorry for my French users I'm we have Canadian French which is not the same as European French next one we've got a sort exercise which is sorting the people alphabetically by and last name so we're not dealing with the inventors anymore we're done with those guys now we actually want to work with people okay well there's no like nice object here so how would I do that well let's go up here to the sort exercise you know I'm gonna say Const alpha equals I take the people and we are going to sort over it dot sort and let's just use a regular function here and we can go over to the es6 and we're going to get the last one and next one now I don't care about returning anything just yet what I want to do is just console.log the last one just to see what we're working with oh we get an error because I wrote this code in here which this was meant to run on the Wikipedia page and here you're trying to call query selector against category and if this category comes back with nothing you can't call query selector against it so you'd have to do a check there if you weren't sure that it was coming in I'll just comment that out for now and deal with what we've got here there we go so look back Glen Lake William so that is the last one but what I really want is to convert that into a first name and a last name so what we can do is we can say cost parts equals last one dot split and what are we gonna split it on well one thing that all of these people have in common is that there's a comma and a space so I'm gonna split it on a comma in a space and let's look at the parts that we have here okay so now we get an array where the first thing is the last name and the second thing is the first name it's a little bit back so what we could do is we could D structure that meaning that rather than return an array we can put those into their own variables right away so we say square bracket last comma first and now if we just console.log the last in the first as their own separate variables there we go Blake William William make videos whatever we have there cool now we have some proper variables to work with and then we have to do that with the next one as well and we probably want to rename these suckers to be something that obviously we can't use last at first so let's say a last a first a first and this one is going to be B last and B first that's that's gonna be the last person and the next person so what you have here good then we do our simple last name here that's really all we're concerned about in this case so turn a last is greater than B last if that's true return negative one otherwise return one lots console.log alpha there we go sorted Lake William is the first one last one is back Len oh we're backwards there I need to return one and a negative one instead go back as a first one Blake is the last one so you see that where we're actually not using this data that we've just made here that's simply for the conversion but we're still hanging on to the original string that we were working with if you did want to return an array or an object or something like that that's where reduce would come in so my editor is yelling at me here is telling me that I shouldn't be using a proper function should be using an arrow function in this case it still works just good whoo one more here we go and this one's going to reuse user reduce sum up the instances of these so we've got car car truck truck bike walk car and I want to I want to tally at the end of the day in order what to work with and reduces like one of the most flexible methods that we have in an array and this which is another way that we can use it so sake on Trane's for tation equals data dot reduce and we are going to then give ourselves a function which is going to be the object obj and then the let's call item which is going to be car car truck truck bike on every single one now we need to start with an object which has to have something like a car zero walk zero truck zero and if you're looking a bit like OS I don't know what all the possible ones are you can't just like hard code those in there and that's right we're just gonna start with a blank object here and we'll do this by ourselves so let's go back we're just gonna start with a blank object that's the starting and we're gonna loop over every single one so what we will do is just console.log item and then return the object and I just want to show you here that we're gonna get every single item as we loop over it good car car truck bike walk cetera et cetera now what we want to do is we need to say if let's do this we'll say object of item plus plus and usually what that would do if we had a walk zero here it would just increment it to 1 but because we don't know if that key exists just yet what we need to do is check for it on the end here so we have to say if there is no object item then object item is equal to zero that will just set the initial one to zero and then we can move along and increment it and return that object so if that has worked here althought log transportation here we go object bike car truck van so you see what they're there i I find that reduces probably the hardest one for people to get but we start with a blank object and then every time we loop over one we first see is there even a zero there to work with at all if not we mean to make we need to make an entry for that and then we go ahead and increment it and that's really nice because then I could come along here and add like a like a pogo stick and when i refresh the key of pogo stick is going to be added no problem to that actually probably wouldn't shouldn't put spaces in there but no problem added in so whew I know that was a lot um it's just a lot of exercise we've got another one coming up in a couple days that we're gonna go over as well but if you feel at all a little bit shaky at these just keep doing them over and over until you get til you totally understand what's going on as well as you feel comfortable just going into a website and doing one of these boulevard or Paris or taking some data and being able to to filter and sort over it see you in the next one [Music]

Channel: Wes Bos

Views: 102,214

Keywords: ES6, HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, friendly internet, programming, programming help, html, css, javascript, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, Trello, Mind Maps, Responsive Web Design (Industry)

Id: HB1ZC7czKRs

Length: 23min 27sec (1407 seconds)

Published: Mon Jan 02 2017