Learn 30 JavaScript Methods in 12 Days - HQ Cheatsheet given on completion! | Travis Rodgers | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn 30 JavaScript Methods in 12 Days - HQ Cheatsheet given on completion!

teacher avatar Travis Rodgers, Freelance Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (2h 18m)
    • 1. Introduction

    • 2. Day 1 - split

    • 3. Day 2 - slice

    • 4. Day 3 - slice, substring, substr

    • 5. Day 4 - reverse, join

    • 6. Day 5 - shift, unshift, pop, push

    • 7. Day 6 - charAt, indexOf, lastIndexOf

    • 8. Day 7 - String, toString, toFixed, Number, parseInt, parseFloat

    • 9. Day 8 - Math.round, Math.ceil, Math.floor, Math.min, Math.max

    • 10. Day 9 - forEach

    • 11. Day 10 - filter

    • 12. Day 11 - map

    • 13. Day 12 - reduce

    • 14. Congrats! Here's your Cheatsheet!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

One trait of a good developer is a person that can write code, not copy and paste it only. Or at least doing the former much more than the latter.

I was a copy and paste developer for a long time, relying heavily on Stack Overflow code that I would snatch and then alter to meet the conditions of my own purposes.

Now I’m not saying you can’t do this, but you should reach a point where you can produce a lot of code from scratch, talking through it out loud and actually “writing code.”

So in an effort to get better at typing code without looking everything up, AND in an effort to become better acquainted with the syntax and methods of JavaScript, I created this 12 day, blueprint course.

With this course comes a commitment to schedule out 12 days in order to devote 20 minutes to learning individual JavaScript methods one bite at a time; methods like split(), map(), slice(), join(), indexOf(), toString(), reduce(), etc.

You can complete the lessons in sequence, i.e. 12 days, or you can plan to do them every other day, perhaps 3 days a week and complete it all in 4 weeks. It's up to you.

Here's what you should do to get the maximum benefit of this course:

  • Follow along with each lesson and attempt the challenge exercises that I give

  • Devote 20 minutes of undivided attention to each lesson. Get the feel of typing that method, that array, that syntax from scratch. Build that muscle memory. Get the feel of what the parameters do. Try out your own combinations and tests until 20 minutes is up.

  • Continue on your predetermined schedule until the course is done.

  • Finally, print out a quality copy of the cheatsheet and hang it up by your desk. After going through the methods once, the cheatsheet will make complete sense and will be a valuable resource as you code in JavaScript.

    So what are you waiting for?

    Go ahead and sign up and level up those Javascript skills!

Meet Your Teacher

Teacher Profile Image

Travis Rodgers

Freelance Web Developer


Hello, my name is Travis Rodgers and I am a Freelance Web Developer, Blogger, Content Creator, and Digital Strategist over at Travis.Media.

Web development is not only my profession, but my passion, and I have over 4 years of hands-on experience building websites and providing custom coding solutions for small businesses, start-ups, and web agencies.

Whether it's a CMS like WordPress or a framework like Django, it's always thrilling to be able to create unique projects from scratch and share with others what I've learned along the way.

So I hope to bring value to all of you and help you in your own programming journey.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: there are 365 days in a year. Why not take 12 of those days and learn 30 JavaScript methods? With this course, you can do just that with day by day in step by step teaching combined with practical hands on challenges, you can work your way through 30 JavaScript methods in just 20 minutes a day for 12 days. But that's not all. After you've completed the 12 days, I'll give you a high quality cheat sheet with all 30 methods that you can hang by your desk for everyday reference. Hi, I'm Travis Rogers. I am a freelance Web developer, blogger and digital strategists over Travis dot media, and I hope to see you in the course. 2. Day 1 - split: Hey, guys. And welcome to Day One. Today we're going to be looking at the split method, alright? And just a quick note in these lessons, I'm going to give the, um, information up front, like the method and its arguments and all of that stuff, and then we'll move on to the practical examples. So if you if you hear the instructions and you hear what I'm saying and you're like, I just don't quite get it, hang in there and we're gonna move into the practical examples for every lesson. Okay? All right. So the split method, what is the split method? The JavaScript split method splits a string into an array of sub strings. All right, note the word string. So this is a string split into an array of sub strings from string to array. Here's an example. So here's a string. Today was a very productive day. Let's say we split it at thes spaces. It's gonna look like this theory will be UN array of sub string. So today isn't zero index was is in the one index a is in the two index and so forth Another example. Let's say that we split it way. Have a string here. Hello. How are you today? Let's say we split this at the Kama, so we're gonna have an array with two sub strings. Hello? Split it the comma and then another sub string. How are you today? Pretty straightforward. All right. It's up to you to tell it where and how to split. The split method takes two arguments and they're both optional and they are separator in limit. So the separator separator determines the character to use for splitting the string. All right, that could be a comma. That could be a space that could be the letter G. If left blank, the entire string will be returned intact. But as an array and the separator is how you tell it where to split. The second argument is to tell it how to split. So the second argument is the limit. Also optional it The limit is an integer specifying the number of splits. Items after this will not be included. So you can say, Hey, I only want to split twice and then cut it off. So just looking at it again. The split method takes two arguments separator and limit. Now let me show you an example. And then let's move on to give you some practice with it. So open up your browser and go to a website called J s console dot com. I thought about doing this in the browser console, but it's so small, let's just go to Js console dot com and you get a full screen here to play with. So let's look at an example. Okay, let's have a variable call today and let's put a string that said, today was a very productive day and enter. All right, so we have a string saved in a variable. Let's say we want to split it at the spaces, so we would just put today dot split parentheses, And inside of that, we were gonna give it to arguments. We're gonna, uh, first argument is gonna be the separator, which is gonna be a space. So we're going to say quote space quote. That's the first argument comma to move on to our second argument. Second argument. I only want three words and then cut off the string, but my semi colon and hit enter and there we have it. We have an array of sub strings, which is three of the words of the string. So today waas a simple All right Now let me show you a couple other cool things. All right, so let's put in another variable variable. Let's call this string and let's say this is going to be fun looking into the string method . So here's another variable called string with a string in it and let me show you some cool things. So watch this string dot split parentheses. What do you think's gonna happen? Well, let's see. All right. This turned the whole string into Honore. No sub strings just turned the string into an array. You can see how that would be useful turning the string into an array. Now let's try this string, not split. And remember, last time we put the quotes with a space in between it. Let's try the quotes without a space and see what happens. All right, so since we didn't put any spaces between it, it's split every single letter, which is really neat and right here it's not going to show the whole thing. So th i s sub strings are the letters, including these spaces. So if we open this up, we're going to see all of these letters here with spaces included. There are 54 in the string, so that's pretty neat. And then, of course, we looked at this one string dot split and then put the space This is going to split it at the space. So this is going to be so This is their array of sub strings. Cool. I think you get the point now, so let me give you a couple things to do. All right? So try this. Try to split it at the Kama. So give this a shot. String dot Split comma. Try that out, see what you get. All right. As you saw, there are no commas in the Senate, so watch this boom. All it does is turn their string into an array. There's no comments, No, where to split. So that was pretty silly. 11 it. All right. So try this. Try to split it at the g. C. This is good going. There's a G to be fun looking. There's another G into the string method. So three G's and the Senate's split it at the G, see what happens. All right, Let's try it out. All right, so it split the string at the G and ditch the G. All right, so it's split it at the G, took the G out. So this is that's one sub string and then going without the G. Actually, there's four G's innocents so going, we just got the o i n so you can split it at the letters. But just remember, it takes the letters away. So now let's try it with the second argument. So let's do like string dot split g three. Let's loss. Try G two and see what that gives. OK, so it's split it at the G's, but only two times, right? So here is a challenge for you. Okay, this is really good. Try to get this. Try to see if you can make well. Actually, let me give you the string first. So here's the string. Here's here's your challenge Variable tricky type of sin And put the word Gosh Geo s H eight times Put that eight times in hit Enter I want you to make this sentence Say go, go, go, go, Go! So removed the s h somehow and just make it say, go comma, Go, comma Go. Come ago. So I want you to make it say this. I want you to make it. Say that, See if you can do it. All right, here's the answer. In case you hopefully you got that. It's pretty straightforward. But here's the answer. If you didn't so I'm gonna put my ticket. Tricky is the variable. I'm going to split it. And what do we want to do to make us a go? Go, go, go. We need to remove the S h so we can split it at the S h. And remember, that removes the s age. So let's try that split at the S h in my cynical in and enter. And there it is. Go, go, go, go, go, go! Great job. I think you understand. The split meant that I would sit around and try out some more things. It's a lot you can do with that. You can add regular expressions. Uh, which is really neat, I think is a little advance for this course, but city or give it a shot. Try some fun things out, and I think you'll love it. See, in the next lesson 3. Day 2 - slice: everyone. And welcome to Day two. In this lesson, we're gonna learn about the slice method. All right, What is the slice method? The slice method returns the selected elements in an array as a new array object. It slices out what you tell it to. So we have an array and we want to slice out the elements that we tell it to slice out. That's all. For example, here we haven't array. 0123456 Let's say we want to slice out a couple elements and we decided to slice out three and four. This creates a new array object with just the elements that we sliced out three and four. All right, sample, note the word array. This is an array object. So this is slices used on a raise. All right. The slice method has two parameters. Start an end. All right. The beginning. The start is where you want to start. The slice end is where you want to end the slice. Both are optional. Just like in the split method we saw before. Both of these are optional. All right, so the start, let's look at the start parameter the start parameter is an integer, so it's gonna be a number. This determines where to start the selection. The first item in the ray in the array has an index of zero, which is normal for JavaScript, the first index of the array of zero. And this is inclusive. So if we started zero, we include the zero index. We started eight. We include the eighth in next, So the end parameter is an integer. Also, this determines where to end the selection. This is not included in the new array object. This is not inclusive, meaning the new array object does not include the end argument. So the start is inclusive. The end is exclusive. So it's slices right before where we ended. All right, time to get to some examples. I think that was pretty straightforward. It's a fairly simple method. So let's look at some examples. So open up your Js console. Let's try this out so you can watch me in this part because I'm gonna give you some to do in a minute. Or you can work with me, whatever. But I'm gonna create a variable called Array, and I'm gonna create an array. So I'm gonna put, um, birds, trees, fish land, See on boats. Super original. Tell me to enter. All right, so we have an array. Uh, so let's try it out without putting any arguments. Let's just try this and see what happens. Array dot Slice no arguments and enter. Nothing happens. We didn't start the slice or in the size anywhere. So that doesn't do anything. Let's try another one. How about this? Array dot Sliced can't type ray dot slice. And let's try something like one three. So starting at one ending in three now before, If you will follow with me before we hit enter. Think about what's gonna happen. We want to start the slice it one. So that's gonna be birds. Zero trees is one. So we're gonna start into trees that's inclusive. So we're gonna have trees, and we're going to slice it at three. So 01233 is land, and that's exclusive. So we're slicing right before that. So we're just gonna get trees and fish in this new array. Remember, this is a new array object. All right. All right. Good. So time for you to get started. Let's try it out together, and I'm going to give you a chance to see if you can solve some of these. So let's create a new array. Let me refresh my page, and I'll give you a new rate of work with so variable array equals And let's say, uh, fire, water, ice, steam, sand and grass. All right, this is what we're gonna work with. I'm gonna hit Enter. All right, We haven't array. Now, let's try some things out. Try a ray dot slice zero for starting at zero. Ending it for before you hit. Enter. What do you think's gonna happen? Think about it and then try. All right, I'm gonna hit Enter, and we see that it included Started it fire, which is the zero index 01234 Sand is the fourth, so it slices right before that. So we should get fire, water, ice and steam. That's what we got. Sample enough. The slice method is very simple, but it's very important to it's a very useful thing. All right, here's one for you. Try this out. Array dot slice put nothing, comma three. So we're just gonna leave the first argument blank comma three. Let's see if that works. No error. That doesn't work. Let's try this array dot slice and just put the number three don't hit. Enter. What do you think's gonna happen here? Do you think that's gonna be a starting point or an ending point? Try it and see what happens. All right. So I'm gonna hit enter to see the answer, and it is a starting point. All right, So if you just put one argument, it's gonna assume that's the starting point, because you don't want to end anywhere. You just wanted the whole thing from this starting point. So array sliced three is going to start the 3rd 1 So fire zero water, one ice to steam. Three all the way to the end. Esteem. Sand grass. Good. Great job. Here's a tricky one. What are two ways of getting the last element of the array on Lee, which is grass Two different ways. What do you think? Try it out and see what? See what you can get there two ways to get it. All right, Let me show you the two ways. First of all, weaken, let's put a ray dot slice and if we count, we want to get just grass. We should be able to say Fire 012345 So we should simply just be able to put five. And here we go. That's grass. Good. But there's another way, and you probably already know it. If you don't hear it is array dot slice negative one negative one gives you the 1st 1 on the end. All right, grass. All right. So you can use negative one also. So how do we get the last two with a negative number? Think about that. If the first argument is the starting point, how do you get the last to try it out? That would be sand and grass. All right, let me show you. Or a dot slice. If negative one is the 1st 1 how about negative to being the 2nd 1? And since we're not putting an endings ending slice, it's just going to count the rest of them. So let's try it. Negative, too awesome. Sand and grass. And here's the final challenge for you. How do we get water so water, ice and steam with two negative numbers. As the arguments start, an end. All right, so start in end are gonna be too negative. Numbers. How do we get just water, Ice and steam? Try it out. Think through it and I'll give you the answer. All right. Hopefully you got that. If you didn't know Problem. It's a little tricky, but we just do this array dot slice and we need to negative numbers. So if grasses negative one, let's count over. So we want to get water, ice and steam. So negative one negative to negative three. Negative four. Negative five. So water is negative. Five, and we want to slice it at We want to get water, ice and steam. We want to slice it. It's steam. So negative five Negative four. Negative three. And remember, we gotta go. One more negative too, because that's exclusive. So we can put negative too. And hit, Enter boom water, ice and steam. So the slice method is pretty straightforward. I hope that was helpful. Keep playing with it. Stay here on Js Consul, keep playing around and just try different things and make sure you type it all out and you'll be super used to it by the time you get done. Cne Day three 4. Day 3 - slice, substring, substr: Hello, everyone. And welcome to day three. For day three, we're gonna be learning three methods. Slice sub string in sub stra or S u B str. Now you may be thinking Wait, we did slice already and three is too much to learn in one day, right? Nope. Let me explain the slice method that we learned in our last lesson was an array method, but it can also be used as a string method. The difference is that instead of slicing the array index is your slicing the string characters remember that it has two parameters start an end and that these are the numeric position, starting with zero. All right, So instead of slicing the array Index is your slicing the string characters, let me give you an example. So here we have a variable called string that holds this string. Now this is a string to be slicing. That's their string. Let's say we did string dot slice three and eight. So starting at three Indian eight, this would give us a new string of comma space th i. Now you may note here that the white space in the Kama are included, so let's let's look at this. So starting with the third position. So in a 00 is one W's two in comma is three. So starting at the comma, that's what we have here And ending an eight So three fours The white space 5678 is the s. So it's slices right before that. So we get it just like this comma space. Th I Pretty simple. I think you understand it. So slice can be used as an array or string. All right, the 2nd 1 Now this one is super easy. Just remember, this sub string is the exact same slice exactly the same, with the only difference being that it cannot accept negative values. So no, this method, in case you see it, otherwise just use slice. Okay. Sub string has one deficiency. You can't use negative values. Just go with slice. So sub string is easy as well. Now let's look it. I don't know how you pronounce this sub stra s u b str. Let's look at this one. That's another easy one. What is this? I'm just gonna call it substructure. Let's call it that. What is these sub stra method? The sub Stra method extracts part of a string beginning at the character of the specified position and returns. The specified number of characters sounds a lot like slice, but it's a little different. It has two parameters, not start end, but start length. All right, so substrate has two parameters start in length, the first parameter start. This is a required parameter. You have to use it. This is the starting position. Remember that the first character is zero. So start is just like slice. The sub stra first parameter is start require. The second parameter length is optional if you don't put anything, is going to do the entire string. All right, so the length is the number of characters to extract after the starting position. If empty, it displays all the characters after the starting position sample. I think we got it. So time to look at some examples. So, as always, let's go to Js console and let's do some work. All right, so at this point, you could just watch me. You can, um, participate if you want. I'm going to give you some challenges in a minute, but I'm just going to show you a few things. So let's say we have a variable cost string that says This is day three and let's try. Let's try this out string dot sub stra and let's put one and three So before I hit Enter, let's think about this. So starting at the one position which is going to be the T A zero h is one. So it's going to start with H and there's gonna count three spaces and you gotta count the H also. So the length is three. Make sure you count that starting point, so starts it H in county. Starting from age, we got h one I two s three So three spaces and hit enter h I s wonderful. So remember, if you start at a number in you count a certain amount, that number is the first count. All right, let let me show you that again. Ah, string sub stra and let's do something different. Let's do want zero and all right, So zero is the t So let's let's count, starting at the t So 12345 is the white space 678 is the white space and that's what we have this is simple enough. But just remember when you count the link to be sure to count that starting them starting character is Well, all right, Now let's try this out. Uh, string sub strah. And then let's just put one number in there. What do you think's gonna happen if we just put the number six? I think it's gonna be the starting or the ending point. Well, remember, the start is required, so I'm thinking is gonna be the start and just returned the rest of the letters in the string. And that's exactly what it ISS so starts at the S. So So starting at the six position, So t being 00123456 is the s and then the rest of the string. So simple enough. All right, time for you to try a few exercises. I have a few for you. So let's let's do a new variable variable string. And now it's my turn. Whoops. Turned to try it out. So go ahead and type that string in and let me give you a few exercises. Exercise one. Try to produce Onley a new string of out. See this word out at the very end of the sentence. Try to produce a new string with just that word out. All right, here's how we're gonna do it. So string substrate. And then we're going to start all the way at the Oh, so let's see how we're gonna do this. So, in being 00123456 Remember the countered apostrophe? 789 10 11 12 13 14 15 16 17 18 1920 2122 23 24 25 26 27. So we're going to start at 27 and we don't want to include the period. So that's gonna be 27. And we're gonna go this length starting at the 123 So we're gonna put 27 in three, and we should just get the word out. There we go. Hope you got that right. Exercise, too. Try to produce on Lee, the last tea of the entire string using a negative number. All right. Don't Don't forget that period there. See if you can figure that one out. All right? So if the period wasn't there'd be simple. We just use a negative one, but we want to get just the tea. So we need to do something like this String substrate. And then we're gonna do a negative to two started that T And we only want to take one character, so we don't want to include that period. So we're gonna put negative two and then just one and hit. Enter. And there we go. We got the tea, Hopefully got that right as well. All right, exercise three in the above string up here. Now it's my turn to try it out in the above string, start with the letter m of my and extract and extract all the characters up until the are in try. So start with the M right here and extract all the characters to the are. And why? So that much. See if you can extract that much of this string. All right, let's count it out. In being 00123456 apostrophe. 789 So we're gonna start at nine. Nine and we want to go to the are. So the nine is the M, so we're gonna start counting here. 123456789 10 11 12 13 So nine started the ninth index and go 13 for length. And see what we get My turn to TR stop up until they are. I didn't tell you to exclude or to include the Are I included it if you excluded it. Maybe you understood it that way. Either way, you got the point. Now the last exercise Start with started zero. So start right here at the beginning and extract all of the characters up until the s in the word it's This means stopping on and including the apostrophe. So this one up until s so you're gonna slice right before the s and just in with the apostrophe. So let me say it again. Started zero and go all the way up to the S in its but excluding the s. All right. All right. Let's look at how to do this. So starting at zero zero and up until the apostrophe in it, So zero Now we're gonna start counting. 1234567 So we're gonna go seven spaces and ended. It is now it apostrophe. So I think you got the point. Stick around and try it out. It's a great method to know it's a good way to extract characters from a string and use the ones you need, so hopefully that helps. CNE Day four. 5. Day 4 - reverse, join: Hey, guys. Welcome. Today, four. Today we're gonna learn to methods reverse. Enjoying. All right. The first method is the reverse method. This is a javascript array method. Note the word array. The reverse method just reverses the order of an array. It has no parameters. It's simply reverses. Let me show you some examples. So open up your jazz console and let me show you some examples of the reverse method. And we're going to do this. We're gonna do reverse. I'm gonna show you some examples we're gonna do join. I'm gonna show you a couple examples, and then we'll do some overall challenges. So let's try this out so you can just watch again before you can participate either way, So here is a variable called Array, and inside of it, I'm gonna put some letters. How about, uh, bar e t you? He and oh, I see. All right, So I'm gonna hit enter and I'm gonna simply reverse. So we haven't array here with an array of sub strings. All right, so we got a bunch of little strings in the array. Um, so we got index 012 blah, blah, blah. All we're gonna do is reverse this. So very simple. No arguments. You just hit array dot Reverse bam! And you have computer. All right. Pretty slick, huh? All right, so we just took it away array, and we reversed it. That's it, That's all. Reverse does well, Seymour the Mawr use of it here in a minute. But for now, let's jump over to their next method. All right, Your next method is the join method. The join method joins the elements of an array. So this is also an array we're talking about. It joins the elements of an array into a string and returns a string. All right, so it takes the elements of an array, joins them into a string in, just returns the string simple enough. It has one parameter separator. This parameters where you specify what you want. The elements to be separated by. This I have. This is option. I meant to say this is optional, not option in the default is the comma. So time for some examples, and then we'll jump to some challenges. So let's look at join back to the Js console and we'll see how this works. All right, so Let's do another variable called Array and we will put, um, let's use our array from a minute ago. I can just hit the up button. And actually where we need to do that, it's still defined. Let's make sure, all right, Yeah. So we still have the array reverse. Let's reverse it back to where we had it at the start. All right, there we go. So we have our work computer backwards. Now let's take this Enjoying it. Let's not put a separator. Let's just put um, array dot join and see what happens. Boom. So we have that array and it joins it, uh, into a string separated by commas. Remember, the comma is default. So we didn't put any separator as an argument, so it used the comma. So let's try this. Let's see Ray still exists because it creates a new string. Now let's try this array dot Join and then let's put a separator in here. How bout just a dash? Let's see what that looks like. All right. Same thing, But without the comma, we have a dash. You want spaces between the letters? How about this? Arrayed dot Join Put a space there. And now we have spaces between it. Wonderful. Really cool. Now you can experiment. You can use a pipe. You can use some letters. You can put some symbols. Here's a challenge for you. Try to get this. Let me refresh my page. Here is a good challenge for you. Try to get this far. That was hard to talk about. All right, See this here. Try to get this. All right. So let me just get this is gonna be an error. So here's your array hopes. Wherever it doesn't define anymore, see if we can bring it back up by hitting the up Kia. So here's our ray. Try to get this up here, see if you can get this. So we're gonna separated by something, and we want to make sure you put the space there. Try it out. All right. That one was a little bit tricky, but let me show you how to do it. If you didn't get it. How about this array dot Join. And then it looks like you're separators are gonna be this bracket space bracket. Let's try that out. Here we go. Yeah. So we just separated by bracket space back. All right, So here is your challenge for today. Let's try to combine a few things for a challenge. Remember the slice method. Remember, it takes two arguments. Separator and limit. Here's your challenge for today. Take this string. Oops. T n E l l E c xy This is the word excellent. Backwards. Take this string in, Reverse it into a new string. Excellent. Now you might be thinking, Hey, I could just reverse it, but you can't. You actually have to use the slice method, the reverse method and the joint method. So let me get you started here. Let's create a variable split string and have it equaling the word Excellent backwards, which is t n e l l E c x e. All right. So let's make this our starting point and see if you can take the string and reverse it to the new string. Excellent. And I'll show you the answer in a minute. But attempted first, of course. All right. Hopefully you got that. If you didn't know problems, we're gonna work through it now, so we have a variable split string with the word excellent backwards. Let's hit inner and The first thing we want to do is we want to split the characters of this string into array elements. All right, how do we do that? We do that with split, so let's try it up. First, let's create a variable for this. So how about Element Array? And let's say split spring dot split. So we're gonna use the split method. And remember, we want displayed it by every letter. So weaken just put is air argument two quotes. There's no space in between these, so it's going to split it every single letter and hit Enter. So let's see what that looks like. Element array. All right, we have the word excellent backwards not as a string anymore, but is better as an array of sub strings. All right, so every letters bloat broken up in a string. So we have this array backwards. What do you think we need to do next? We can take it and reverse it. So let's create a variable. Let's call it reversed. Array equals element array dot Reverse. This should reverse their array. Let's see what it looks like. All right. Excellent. We have the array now reversed of excellent So the last thing we need to do is we need to take these sub strings and join them together into one string. Now, how do we do that? Remember, the joint method joins the elements of an array into a string and returns a string. And remember, it has one parameter the separator. This parameter is where you specify what you want the elements to be separated by. So what do we want? The elements here to be separated by Nothing. Because we wanted to be one string. We don't want any spaces. So we're simply going to put reverse the ray dot Join and we don't want it to be separated by anything. So we're just gonna put pro quote nothing there. No commas, no pipes, nothing. And we hopes we've got to define it. So, variable. Let's call this, um, join. Array equals and let's hit this. So we're joining. All right, let's see what that looks like. And there we have it. That is their string. Excellent. So we use slice, we's reverse, we use join, and we got the string. Great job. Now here is a bonus challenge for you. All right. Are you ready for a bonus challenge. Try this out. So take this string. I'm gonna I'm gonna create a variable and just call it today. Take this string today Work great. Take this string and reverse it into a new string saying great work today. Now this one's a little different because you have a You have three words with a space in between them. So take a little time to think about that and try to work through it. If you can't get it, no problems. Come back and we'll walk through it together. All right? Hopefully you got that. So let me hit. Return here. Now what do we don't? What do we want to do? We want to split this into an array, of course. But what do we want to split it? Where do we want to split it at? So let's create a variable. And we should just call it the same thing Element array equals today. And remember, last time we split it by every letter this one, we want to split by every word so we can say today dot split and then we put quotes, space quote. So it's going to split it at the spaces, so it's going to split it by each word. So we had enter and let's see what that looks like. Element array. Okay, so you got an array of sub strings. The three words. Now what do we do? We reverse it. This part simple variable reversed the rain and you can name your variable whatever you want. Reverse the raying relevant element array dot reverse and hit return and let's see what that looks like. All right, so now we have an array with their three words The correct way Now reversed. The last thing we need to do is join this together, but we need to join it. So it still has these spaces there. So let's create a variable called Join Array. And we want to join this reverse the race. So let's do reversed array dot join. And what do we want our separator to be? Of course, A space. So we're gonna put quote space quote and this should put us back together. Let's see, there it is great work today. Hopefully that was exciting. The join in the reverse method are used a lot to take some time to get comfortable with it . And I'll see you Day five 6. Day 5 - shift, unshift, pop, push: Hey, guys. And welcome to Day five. Today we're gonna learn four methods shift unsure ift pop and push. Sounds like a lot, but they are very related. So we're gonna jump over to a raise and cover a few fundamental array methods that you will use a lot. Okay, You got to get used to these four methods. Now, you may think you already know these, but rest assured, there are a couple of things that you have to grass before you can claim this, I'll explain. All right. Thes meth. These methods, as we mentioned or pop push, shift and on shift here, is a simple diagram explaining the gist of it. So here we have a variable birds that holds an array of birds. So there's five birds in disarray We see at the front of the array. We have a shift in an unsure if methods, so the shift in UN shift have to do with the front of the array. The shift is removing an element from the array. Unsheathed is putting in an element onto the front of an array. Over here at the end, we have pop and push. Pop is removing an element from the end of the array pushes putting an element onto the end of an array. So I like to remember this because if you think about it, if something shifts, if you shift something down, then everything moves down. So I like to say if I shift something off off of the array off of the front, the rest of the elements are going to move down also. So that's how I remember Shift being in the front if you know that, you know, one shifts, they're also popping. Push both being peas. You can remember that the peas or at the end, you can also remember we're gonna pop off the end of the array. So there's a lot of things you can do to remember this, but this is the basic gist of it in a diagram. All right, so shift and on shift, we're gonna talk about these two. First, that shift method removes the first array element in shifts all of the other elements to a lower index. So you're removing zero. You're removing that first array element in all the other ones. Shift down one simple. All right, but there are a few things to note and let me explain with an example. So let's go out of here and open up their Js console that we've been using this whole time Js console dot com and I'm gonna create an array called a Ray. And I'm gonna put in it some numbers about one to three, for All right, I'm gonna put one through six in this a rain hit. Enter. Now. Check this out. What I want to do if I want to remove the first element with one, I just simply put array dot shift, and this will remove the first element of the array. So let me hit, return and look what happens. It returns the first element one. So it tells me right here. This is the element I removed. So remember the shift method returns the element removed. So if I check my array now, it's going to be missing the one and everything else slid down, shifted down. All right, so think about this. What if we want to add that one back on there or what? We want to put like another element, like 100 or 500 or three or something? What if we want to add. Let's just stick with one. What if we want to add the one back onto the front of the array? Simply just put array dot unshowy ift. And what do we want? Unsure IFT. We want to unsure if one so this will put the one back onto the front of the array. Now see what else happens when I hit. Enter it returns the amount of elements in the array. I'll return to that. So let's look at air right now, and one is back on there. So we we shifted the first element off with Shift, and we unsifted it by putting it back on. Very simple. Let's talk about this number real quick. That is a really cool feature to have in your developer tool kit. All right, if you if, if you haven't array and there's tons of elements and you're like how many elements air in there, you can get it so quick by just putting array dot unsifted in putting Nothing is your parameter, so it's not going to put anything on. There is just gonna return the amount in the array, So I hit Return six. Awesome tool tohave array or variable dot unshowy ift no parameter, and that will return you the amount of elements and an array. Just think how that could be used. All right, all right. So let's go back to our power point here. We start this up again and we're gonna move on to the other two methods. A shift in unsifted easy. Let's move on to pop and push. So shifted on shift is the front of the array. Pop and push is the end of the range. Think about holding the array in your hands and popping the end off. Remember that, and we'll follow that. Both peas concerned the end of the rainy, popping bush. But if you took time to understand, shift in un shift, then you will find these too easy. The pot method returns in a ray method that has popped off the end of the range. So if you know a shift in a shift, it's the same thing for pop and push. So let me show you that. So let's go back to our Js console and let's do this. Let's keep the same array. Actually, I'm going to copy this and refresh my page so I can start from the top and I'm gonna put in the same array again. You can leave it if you want. So let's try this array dot pop, This is gonna should pop the six right out of the arrange so ray dot pop and it returns the array element. Just like shift did so, ray dot pop. And let me check my array. Now it's gone. So I have 12345 The six is out of there. So how do what would I do if I want to put the six back on or if I want to add something else lengthy and I simply put a ray dot push This pushes it back on to the end and I'm gonna say, six hit enter and it should return the amount of elements in the array. Awesome. So let's look at a ray. Here we go. We have one through six again and weaken. Use the same thing to get the A number of elements an array so array dot push with no parameter. And it just tells you hey, six elements in the rain and the push method is super important because a lot of times you run loops in JavaScript in each loop, you're gonna push an item on two. The end of an array. So remember that one, especially of all four of these, But you will be using all four. So that's all for today. This these air Four Very simple methods. And, um, I hope they were helpful. And I will see you in day six. 7. Day 6 - charAt, indexOf, lastIndexOf: Okay, everybody and welcome today, six. Today we're going to switch it back. Two strings. We were in a raise. We're gonna switch it back two strings and do a little searching. So today we have three methods were looking at the char at Method, the index of Method in the last index off. So let's look at the chart at Method. The char at Method returns the character at a specified index of a string. It has one parameter index. So where parameter is an index position and it returns the letter in that position So we can say char at 15. And it's gonna return the character at the 15th index because HR at three it's gonna return the character at the index three. All right, So just remember this. What position is such in such character at Char At Pretty easy way to remember it. What position is such and such character at? Let's use the char at method. So let's take a quick look at that. So let's go to the Js console and let me put a string in here for us to play with. So here is I'm gonna say variable position equals. Let's say I want to search for positions within this string and here is how straightforward this method is. So I can say position dot HR at what character is at index 15 and it's going to return the character at index 15 which is an h ah position shar at index three and it's gonna tell me , let's count it out and see I zero So 012 three So it should be in a Yeah, they So all we're doing here is we're saying, What character is that? This index that we specify is a parameter. All right, I think you got it. Now let's move on. Alright, Right after that, we are going to look at the index of Method. Now check this out. Where char at gives us the value of the position we passes. An argument index of gives us the position of a value. So in one instance were getting the character at and in the other. We're getting the index off, so the methods tell you what they do. One of them were getting the character at in the other. We're getting the index off. As you can tell, it takes while it takes two arguments. The 1st 1 you already know the 1st 1 is the search value. The string that were searching for So index off. And we can say I'm searching for the letter. A. You can say I'm searching for a space. You could say I'm searching for, um, boats or any word you could say I'm searching for the computer or searching for the computer is nice. You can search for any string with this first value. The second value, however, is optional. And this is the starting index. So this is the index from where we're going to start the search. So you can say I want to search for this value, but I want to start at this point in the string in after all, Right, so index off to two parameters. Search value and starting index. So let's just take an example. Take some time to look at this. I think you'll get so I'm gonna clear the console here and I'm going to create another string. Let's say variable sleep equals. I am going to go to sleep after this, which I am hit. Enter. All right, so let's try the index of Method Celeste. Try sleep dot index of and let's say the word G. Whoops. It's a string. What is the index of G five? So this G right here is an index five. Let's try a word out So sleep dot index of Let's try the word going. What do you think? We're gonna get five again? If you put in a word or a phrase or something, it's going to give you the index of the beginning of that. So the G is the first letter of going, so it's going to give us that, and it's not going to give us the second G. It's searches for that character in returns, the first instance of it from the left. So let's try out the second argument because I think you understand what we have going on. Now let's try out the second argument So sleep dot index of and let's say the word to T O. Starting at Index five just randomly hit return and we're going to get 11. So let's see. What's it? Index five eyes it. 0012345 So the G so it's going to start right here at the G in going. The first occurrence up to after that is here, and that is in the index 11. So it doesn't count it from their starting position is still the index of the string. But it only counts the characters after air starting value. So we get 11 because the first occurrence of two after index five comes it index position 11. But wait, Why the first occurrence of to what if we want to get the last occurrence of two after five . So if you see in her sentence, we have this too. And that too we have the word to two times to get the last occurrence we have to use you. Guess last index off. Now let's take a look at that real quick because this one is a little more tricky. And I'll tell you why in a minute. All right, last index of the last index of method returns the position off the last occurrence of a specified value on a string. So if you wanted to get the last two in that sentence, we would use last index of now better. I show you this one because something's gonna trip you up because it trips me up all the time. So let's go back to the Js console and let's keep this same variable appear sleep and let's try it out. So legatus sleep dot last index of and let's put two and hit Enter 17. Now let's count it out. Starting it either. Zero index. So 0123456789 10 11 12 13 14 15 16 17. So it's giving us the last occurrence of two. That is neat, huh? We don't want to get the foot. We want to get the 1st 1 that we use. Index up. We want to get the last one we use Last index up. I'll check this out. This is where things get tricky. Here's a challenge for you. Try to get the last occurrence of the letter G after index position to so starting at index position to get the last occurrence of the letter G. All right, now you're probably wondering why you got a negative one. So you probably put sleep dot last index of and G starting at index to and you hit enter and there's a negative one. When the world happened, that is right, You know, that's what you would think to do. But here's the thing. Let me explain. The last index of method actually counts backwards, but returns to us, the index starting at the beginning. So it still gives us the index starting from the beginning, but it actually counts backwards. So in the example here, sleep dot lasting index of G starting an index to it began at the second index. So 012 So the second indexes A. If you start counting from the second index, it's only gonna count the space because, remember is counting left. It's gonna count the space in the eye. In that case, there is no g. So you got a negative one because there's no g found. So you have to remember when using last index of when you want to use a starting index, it's counting to the left. What you would want to do is you would want to say something like sleep dot last index of G and just go with that and it will tell you 14 so 14 is gonna be here, so you could just do that. Don't specify starting index, or you could start from some letter at the end of the string, let's say like, 28. So you could say, um, sleep last index of G 28. And that's going to start counting from the whatever the 28th index of at the end left. So it's still going to find the right thing, so we still should get 14. So I don't know if you use last index up. Maybe don't use the starting value or practice it and know how the starting value works well for you. So let me give you another challenge, and this is something you can continue on your own. All right, here's something you can check out on your own. Here's a chart by NDN that you should be able to follow along with now. And this is your challenge for the day. If you struggle with this in any way, feel free to go back over the above until you're able to work it out. So can you comprehend this chart? Now? If you can look through this and say, Hey, I understand it now, then move on. If not, go back and go through it again. So can you comprehend this chart? Paul's your video and look at it and see if it all makes sense to you. All right, here's a side note, and this is something that's really helpful. This is just a extra tip for the lesson. If the string that you're looking for does not exist, so in our string I am going to go to sleep after this. If we looked for, like McDonald's, it would show a negative one, because that doesn't exist in the string. So this is a great way to check if something in a string exists. Okay, so if you want to check, if you have a string, you and you want to check. If some character exists, then you can look for that character. And if it returns a negative one, it's not. There doesn't exist. In addition, the same method index off can be used in the same way with a raise. This is a great method for searching out of Ray's to see a values exist by checking to see if it's equal to negative one. So you want to know Hey, is Billy Bob, a user in in air system, and the users are kept in an array you can say index off Billy Bob. And if it comes back, negative one that, no, he's not in the system. So that is very helpful using index off to see if something exists or not. I think that's a cool tip, and I think it's something else you can add to your toolbox, all right, and I think that's enough for today. See you on Day seven. 8. Day 7 - String, toString, toFixed, Number, parseInt, parseFloat: Hello, everyone. And welcome to day seven. Now, before we get into some of the more complex stuff, we need to have a quick look at some number methods. And we'll do that today and in the next lesson. These are very important, and these are ones you will use often. All right, so today we'll be looking at a handful. All right, we got the capital s string. We got the two string to fixed capital in number, Parse, float and parse int. You may be saying, what? Why so many? Well, because they're pretty easy, and I think you can handle it, So let's roll. So we're gonna break it all up into two camps to make it more understandable. There two camps here. There's an converting numbers, two strings, and then there's converting strings to numbers. So first off, let's look at converting numbers. Two strings. So there are times where you need to convert a number to a string, and there's gonna be a lot of times you need to do that. Actually, um, when you are working on projects, sometimes they don't accept numbers, they only accept strings, and you need to put something in there. So when you pass that it passes as a string. So you need these functions and they're really easy. So let's take a look. So the first thing we're gonna look at is too string and capital s string. So to string is a method Capital s string is actually a function, but I wanted to include it in here anyway, So to string and string, both convert a number to a string. That's all they do that convert a number to a string. So let's look at an example of both of these. So let's go to where Js console and let's create Ah, variable And just call it number number two string and set it to 500. This is a number. We can confirm that with type of number two string and it tells us Hey, this is a number. So we have a number here stored in a variable. So the first thing we're gonna try is the to string method. So let's create a variable called new string and let's converted. So number two string dot to string. It is that simple return and now we'll see what our new string says it is now the string 500 not the number. And we can check that by saying type of new string and it tells us that the string. So that's simple. We take a number dot to string and it converts it to a string. Now let's try the other one. The capital s string. This one's a little different because it is a function, but it's a simple as this. So Number two string. All right, so we have our number 500. All we do is say string and inside of the parentheses we put air what we want to convert. So that is number two string and just hit Enter And there we go. We converted the number 500 to the string 500 so to string in string are simple. They convert numbers two strings. So let's go back and look at this next one, which has a little bit of a nuance to it. So our third method of numbers two strings is the two fixed method. What is the two fixed method? The two fixed method does the same as to string, but it returns the string with a set number of decimals that you would pass as an argument . The most widely used is the money format, which is two decimal places. Let's try it out. So open back up your Js console and hit refresh to get a fresh page. And let's try this out. Variable money equals three type of money. This is gonna tell us that it's a number, so we have the variable money that equals the number three. So let's say, Hey, we need that three to be in money format with two decimal places. It's a simple is this? And let's create a variable for this, um, let's say money string and it's a simple Is this money dot to fixed now? How many decimal places do we want? We want to. That's the money format. So we just passed two as the argument. That's all it is hit return. And now we see that Air three is now 3.0 a string. So we converted three to a string in added two decimal places. Now, of course, we can do, um, money dot to fixed and put four decimal places. If we want hit return and there we have four zeros. Here's a challenge for you. Here's a challenge for you to check out variable money and let's make it set to 3.22 So first off, what if we put money dot two? Fixed four. What's gonna happen here? Well, it's gonna say 3.2200 So it's just gonna add the zeros to the four places. What if we pass zero as the argument, try it out and see what happens. So if we say money dot two fixed and put zero, we see that it gives us three. So it takes the two decimal places away and gives us three. It seems like it rounded it, but I'm not totally sure you may not totally be sure. So let's try variable money to and let's say something that should be rounded up 3.75 And let's say money to that index on that index to fixed. And let's put the zero again and see if it rounds it up. Yes, it rounds it up so you can use to fixed with a parameter of zero or an argument of zero to round up around down. So that's pretty neat. And put that in your toolbox remember that So two fixed with zero will round for you. So just in summary, If I enter to, I'm telling it to place two decimal spaces. If I enter four, I'm telling four decimal spaces. 66 test. You got the point. All right, so now let's look at converting strings to numbers. All right? We have three methods for this number. Parse float in parts. And now I'm gonna go and tell you these aren't methods. Their functions also, but they're built in functions. So there used the same way with just a little different formats. So anyway, let's look at these three. So here is the number capital in function, all right. And this is by far the simplest and does the opposite of capital s string. So you just enter your desired string as the argument. So, for example, if we have the string of 10 and we needed to convert it to a number, we simply put capital and number. And inside the parentheses we passed the string is the argument hit Enter and it converts it to a number. That's all. Number does. Straightforward. I think you got it. I'll show you an example in a minute, but let's move on to the second function. The second function is parse, Int and parse Aunt Parses. A string in returns, a whole number. This is a great weight around a string into a whole number, with an exception that will see. So let's look at some examples here to go to the Js console. Let's first look at number. Let's say we have a variable number in that equals a string of, um, let's say 45. And to convert this string to a number, we simply just put number and inside the parentheses. We're gonna put the argument, and that's gonna be Air Variable, which is 45 and we're just gonna hit enter and you see that it converts the string 45 to a number 45. So that's pretty easy. And of course, you can put an actual value in there, too. So number you can say, like as an example, the string of 10 and hit return and it returns the number. So I think you got that one. Let's talk about Parsons. So as you recall, parse and parses a string and returns a whole number, this is a great weight around a string into a whole number. And remember that it is a function so well put it like this. First, let's create a variable called decimal and let's have it equal 3.2 to the string, 3.22 So with Parsons, we want to change the string of 3.22 to a whole number number. So let's say and remember, this is a function so well, actually say parse and and put the argument in the parentheses, so that's gonna be decimal, so it should return the whole number. So the string of 3.2 tooth should return the number three return. Great. It returns the number three. So this is a way to convert a string into a whole number. But there is an exception. And let me show you, if I say Parson and passing a string of 3.75 what do you think this is gonna give us? You think this is going to give us four? Let's hit entrance E. No, it still gives us three. Why is it rounding down? Well, when it converts, it rounds down. That's what Parson does And check this out. This is important to use a times in software applications. For example, if your gain gave out trophies for each level you pass and you have passed four and 3/4 level so four and 3/4 of level, that's still just four levels. Even at 4.99 it's not quite five levels, and thus it shouldn't award you five trophies. So they're times that you don't want to have something happen until it reaches the full number. So if you have madam, only a four. I'm playing this game and I'm four point 93% done with this level. I'm still not on level five. So this is a way to keep you keep things rounded down until you actually get to the next number. If that makes any sense, hopefully that's a good example for you. So par sent converts a string to a number, but it rounds it into a whole number. All right, I think you got that. Now let's look at the last one. The last one is parse float. And yes, this is a function. Ah, parse float parses a string in returns a number So you will use this one, not parse end. If you want to convert a string to a number and keep your decimal places so parse ant is going to turn into a whole number, Parts float is gonna converted from a string to a number. But keep the decimal places. So let me show you an example. If you type in parts float string of 3.45 then it will return the number 3.45 There's no rounding going on here, all right, so let's just look at that real quick for completeness sake. So parse float. If I have a string of 3.99 and I'm saying handing to convert that to a number, but I don't want to round, I still need the 3.99 I use parts float here I hit Return and it returns the number 3.99 So let's do a quick recap, because that may have been a handful for you in one day, but it's really not. Let me break it down for you and you'll walk away from this one understanding. So let's review. So we looked at three number two string conversions. That's to string in string. They both convert a number to a string. And there's two Fixed, which converts a number to a string with the parameter to set a number of decimal places. All right, these are the number two string methods, and then we have the conversion from string to number. In. These three were functions, but they're built in functions. You don't have to go writing one in that is number that converts a string to a number. There's Parson that parses a string in returns, a whole number that is rounded down. And then there's parts float that parses a string and returns a number that keeps its decimal places if it has them. All right, so hopefully that was helpful, that six of them and most of them were pretty easy. There were a few exceptions here and there. So you may want to go back and just kind of looked the room again. Play with things. See how you can use this in your every day coding, and I will see you in Day eight 9. Day 8 - Math.round, Math.ceil, Math.floor, Math.min, Math.max: Hey, guys. And welcome to Day eight. Today we're gonna be doing some math. We're gonna finish up their numbers portion of the course by looking at Capital M math. What is this math you speak about? Well, check this out. Math is a built in JavaScript object that allows you to perform mathematical tasks on numbers. So math, the capital M is a built an object with the Java script, and it allows you perform these tasks. It has these methods that you can call on this object and it will do these tasks for you. So that is math dot round, ceil floor, Max and men. In fact, you can probably tell what they do just by reading them. So let's start at the top with math dot round. I wonder what this does. The math dot round method returns the value of a number rounded, rounded to the nearest integer. So let's take a quick look at that. Open up the Js console and let's look at that. So I have a variable called number in that equals 12.8. I can simply say math capital m dot round and Aiken round this number. Where's it going around it to is gonna round it to 13 Of course. So I can say, Put my variable in there and hit return and it's gonna return 13. So all that does is just round a number, and you can also, of course, enter the numbers the argument. So math dot round, um 3.2 and it's gonna give us three math dot round Ah, 7.99 Let's put a bunch of numbers here, and it's going around that. There we go. Eight. I think you get the point. Let's move on. So next up are the math dot seal in the math dot floor methods Simple. Is this for these two? Just remember this. The ceiling is up in the floors down math seal, ceiling in math floor down, so math seal returns the value. Round it up to its nearest integer, and Matt Floor returns the value rounded down to its nearest integer. That's it. So let's take a look at that. So let's say math dot seal and let's say 4.1. Do you think it's going around it? The ceiling is up, so 4.1 is gonna take us to five. So this isn't like rounding like 4.1 is going to go 44 point. Anything is gonna round up to five. So math dot seal is going around everything up and, of course, math dot floor. Let's put a high number. How about 9.9 math dot floor? The floor is down. It should round is down to nine, not 10. Yep, nine. So Matt Seal is going around us up no matter what. And math floors going around us down no matter what. All right, let's keep rolling. So our last two methods are math dot man in math dot max. The men and Max methods do just what they suggest. They return either the lowest number of the numbers passed to it. Men or the largest number of the numbers passed to it, Max. So let's look at an example. So let me refresh this and let's drive us out math dot men. I'm gonna put 4 to 9. This is going to give us the lowest number, so this will return to and math dot men. And let's say, um, the same thing for 29 What's is going to give us the lips, not men. Math dot max of the same three numbers will give us the highest, which is, of course, nine. So that'll give us nine. So let's try another. Let's create an array. Let's step it up here a little bit. So variable array and let's put in the array three to 5.4 10 3.2, 11 21 0 Let's put all these in this array and hit Enter. Let's try it out. Math dot men of Array, Air Array hit return and it gave us in a n, not a number. What's going on with that? Well, let's take a look at this. Let's look at the parameters of this method. So let's say math dot men. Let's go in and see the documentation. So let's look at the syntax here. See these three dots here in the syntax? The three dots. So with E S 2015 you can use this these three dots to pass an array to the max in men. It's called a spread operator, and this actually causes the array values to be expanded or spread into the functions arguments. So try it out. Let's let me give you an example. Let's go back to the Js console Aiken. Type this instead. Math dot men and I could put those three dots dot, dot dot and then my array and hit Enter. Look at that zero. The smallest one of the array zero. So I'm using that spread operator. So watch this math dot Max will put three dots in my variable or my array variable. What he thinks the going to give us the max What he thinks is going to give us as the Max. I think 20 should give us 20 return. There it is. 20. So use that spread operator when searching for the max in the men in an array and you will do well, So I think that was pretty straightforward all of these. Here we have the round. Then we have the floor in the ceiling seal. And then we have the maxim, the man, the maxim. The men give us the lowest in the highest in a group of numbers or in an array by using the spread operator. So I hope that was kind of neat for you. Now we're going to move on to the last four methods which are little more difficult but are super powerful if you know how to use them. So CNE Day nine. 10. Day 9 - forEach: Hello, everyone. And welcome to day nine. All right, In these last four lessons, we're going to step it up a notch and look at four very powerful methods. Today, we're gonna be looking at the four each method. Now, while it is similar the Ford each method is not a replacement for the four loop. There are pros and cons to each, and time will teach you when to use one over the other. That being said the for each loop is fun. It's less code, and it's much cleaner. Let's take a look at it. So what is the four each method will the four Each method executes the provided function once for each array element. So it's got a loop through an array in run a function on each element in that array the function that we provide for it. So you may say, What does that mean? Well, let me show you. I'm gonna show you by example. So let's open up the Js console and I'll give you a four step rundown of how to use the four each method so it's created variable. We'll call it numbers and having a ray with, Let's say, 543210 So therefore, steps here. Let's look at step one. So what I want to do here is I want to just loop through this array and just output the element that I'm on in the array. So it should output 543210 That's all I'm gonna do. It's a simple example, but it helps you learn the syntax of this. So it's four steps that I'm gonna give you. So Step one. We just called the method like we've been doing. So numbers is there variable dot for each parentheses don't hit. Enter yet. We're gonna build this out. So that's step one. Step two, we need to insert a callback function. So this is gonna be the function that we're calling on each element. So inside these parentheses, we're gonna put function parentheses, open bracket, closed bracket, just like any function. And if you had shift enter, you can add some lines here without running the code. So that's just like any function. So function parentheses. Open bracket, close bracket inside of the four each parentheses. So that's step to the callback function. Step three, we need to pass our element as the it aerator. And this could be any name you like. Sometimes I just use element in other times I try to use the singular form of the variable in this case will do the ladder and just use number. So here we need to pass. This is a parameter. This is their it aerator. So I'm gonna put in number and what this is is I have a variable numbers with an array number here represents each element as you loop through. So the number represents each element of this arrange. This could be chicken. This could be why this could be be whatever you want. A lot of people, Like I said, we'll put the singular of the variable or just use the word element. You can use whatever you want. I'm gonna use number. So that's step three. We pass in our it aerator, and Step four is we make our function do something. So all we're gonna do here is just console dot log the number. So this should just give us a list of each number. So it's gonna look through first and say, five looked through second say for loop through third and say three. So that's it. Enter and that's exactly what it does. So that was a simple example. But you get the syntax. Now, let me give you a challenge. Something to try to get you used to, the four each method. So let's clear this out in Creator variable again. So variable numbers equals. And make sure you type this out because this is for you. 543 210 All right, so we have a variable numbers with an array of numbers, and I'm gonna create another one called new numbers and let that equal and empty array. Now, here is my challenge to you. We learned the push method a couple days ago, or however long since you've learned that we used about the push method we learned about the push method. I want you to using the four each method to loop through this numbers array and for each element, push it into the new numbers, Blanca rain. So you're going to use fort each and for each loop, you're gonna push that element into this new numbers array. Try that out and I'll walk you through in a minute. If you don't get. All right, let's work through this. So let's use their four step process again. So step one, call the method. So numbers died for each step one. Step two, enter your callback function. So here, I'm gonna put function open. Bracket, close bracket. Step three. Insert your it aerator, which is gonna represent your elements. And because I'm using numbers again, I'm just gonna put number in their singular and step for Make your function, do something. So what we're doing is we're pushing that element into a new arrange, so we could just simply put new numbers dot push And then as the argument, we're gonna put number. So what we're doing is new numbers dot push. So we're pushing into the new numbers array the number. So as we look through it each time, that number will be pushed into the new numbers array. Let's hit, enter and then check out air new numbers array. And there we have it. All right. So we pushed all of our elements in their simple example, but I think it proves the point. So that's the example using a callback function. But you can also use a pre defined function like If you're working on a project and you have a function that does something over here called this, you can just pass that function as the argument instead of a callback function, let me show you an example. So say you have a function your project called, Um, some function that has a parameter of X in this function basically just multiplies by three . So X equals X Times three and then we want to console that log the X each time. So you have a function somewhere called some function that just takes an argument and multiplies it by three. That's all it does. Is it enter? If you have a function already pre defined, I can come up here and say numbers dot for each. So, for each element of this array, run this function some function. Oops, look at that. That's the real clean. So so calling your function somewhere else is a lot cleaner than a callback function, but there are reasons to use callback functions to so right here. It's gonna call this function for each element of the numbers of Ray, and it should multiply. I'm all by three and then console dot Log them out for us to see. So if I hit return there it is. So five times three is 15 4 times three is 12 3 times three is nine worked Great. Okay, So using a callback function and using a pre defined function, that's how you're gonna mainly use the for each loop. If you got that much down, you're good to go. You can actually cut the lecture off, but I want to give you a little bit of oven advanced topic here because there are two MAWR parameters that you can use. Let's look at this real quick. All right? So I'm calling this the advanced for each topic. So, as I said, you've already learned how you use it. The majority of time. However, there are two mawr arguments. So let's look back at the 1st 2 steps of therefore each method. So first we just called the four each. On the end of it, numbers dot for each second we inserted air callback function. Now, here are the three parameters you could use. So first there is the element parameter. We've already looked at this. This is the current array element in our example above it was number. Remember, we used number that's required because you gotta have it aerator. You have to represent your elements, so that's required. We've already used that. But then there's another one called Index, and all this does is gives you the array index of the current element, and that is optional. Then there's 1/3 1 that I don't know why anybody would use. If you have a use for it, let me know. I couldn't figure it out. But anyway, there is. It's the array parameter, and this returns the original array object if needed. And that's also optional. So let's take a look at these. I'm gonna give you one example of this. Go back to my con Js console, clear this out and let me show you. So let me create my array again. So I'm gonna use numbers again in the same thing. 543210 And let's go through a four step process. So numbers dot for each enter a callback function. All right, Step three. We're gonna put all three parameters in here this time, so I'm going to say element instead of number just because I'm gonna put Element Index array and then for my function. I'm just gonna console that log. All three of these council dot log And so I'm going to say Element in my element index, index and array, and all I'm doing is just showing you the output of these. All right, so if I had returned, I should see it looked through. It says Element five. Is it Index zero. And here's the rain Element four. Is it Index one. Here's the rain element three and so forth. So all all the doll index does is give you the index all array. Does it return the array? I don't know what it's for, but anyway, that's how you use the other two. So let me give you a challenge based on that, and we'll in today's lesson, because it's been a lot. So I'm going to give you an array here of fruits so variable fruits equals and go ahead and type this out because it's your challenge. Kiwi apple, banana pair, grapes, lime, orange and lemon. All right, so type this out so you have a variable called fruits with a bunch of fruits and an array. Here's the challenge for you using the four each method loop through this and output these so output. So it says Kiwi isn't index zero. And then it says apple is an index one and so forth. So for every element you want to say, element is an index blank. And so you'll have ah list here of all of the elements in the index that they're in. Try toe loop through this and print those out, and I'll show you how to do it here in a minute. All right, So hopefully you were able to print out that list, let me show you how I would do it using Air Force step process. So step one fruits dot for each Step two a callback function. Step three, we're gonna put in air parameters. In this case, I'm gonna put element in Index because we're not using the array and Step four. I'm gonna console dot log air information, So console that log element Plus is an index plus index. All right, so all I'm doing is printing out the element and then saying isn't index and in the index value. So if I hit return, there we go. Kiwis and index zero apples and index, one bananas and index to Hopefully you got that? If not, no problem. I think you get the point. We've done a lot of examples here. And the fort. Each method is awesome. Get used to it and practice with it. And I'll see you on Day 10. Where were we will look at the filter method. 11. Day 10 - filter: Hello, everyone. And welcome to Day 10. As of right now, you have learned 26 methods. Congratulations. Today we're gonna look at another powerful method called filter. What is the filter method? Well, the filter method creates a new array from the original array elements that have passed a certain condition leaving out the ones that fail. Simply put, it filters through an array, choosing the ones that pass the test, which is provided by air function. You can see the immediate practical use of this one, right? So the filter method also takes the same parameters as the four each method. So that's helpful. But we'll start our lesson with the most common parameter, which is element. So in our last lesson we used, I think number. So it doesn't matter what you call it, but we're gonna call it element in this lesson. But the definition is still the same element is the value of the current element. So we already know about that one. Let me show you an example of how this works. So let's open up your buddy Js console and let's create a variable. So here's a variable called age and let's make an array full of ages with 35 14 50 to 2111 80 18 and 17. All right now, just like we did with the four each method, we're gonna break this one down, step by step. So first we're going to create a new variable that will check for that will check this array for ages 18 and over. So let's create a variable called adult. So we're gonna create a filter that will filter out all of the ages that are under 18 and just leave us with the adults. So, like the 40 each method, there are four steps four of the same steps with this method as well. So remember, Step One is to just add on air method. So age dot filter That's step one dont hit into Remember, we're gonna build on this step to remember is to enter air callback function, So function parentheses Open curly brace close curly race Step three we pass in air array element and this will be the value of the current element of the array as it filters through each. So that was their number in the last lesson here, we're gonna put element and this represents each element of the array as we loop through it . Finally, let's put air condition. So what we want to do is we want to return all of the elements that are 18 and over. We just want the adults. So we simply put return element greater than or equal to 18. So there we have it. So we're gonna filter out all of these ages that are not greater than or equal to 18. We're gonna return a new array with just the adult elements. Let's hit, enter and check their adult variable. And there we go. 35 is in the array. 14 has taken out. Filtered out 52 is there 21 is there? 11 is filtered out. 80 is there, 18 is there and 17 has been filtered out. An air array has been filtered for the ages 18 and up. Great job. So here's another example, and I want you to do this one. What if we wanted to get all the ages between 18 and sixties to see this array here? We just want the ages between and not including, but between 18 and 60. And here's the qualification this time don't use the callback function. Instead, create a separate function and then call that function name. Try that out. Filter the Saray this age array for ages between 18. And 60 and use a separate function. And I'll show you how to do it in just a minute. All right, Great. Hopefully you got that. So let's create the function first. So let's just say function, and I'm gonna call it check age in here. I'm gonna put Element and, uh, just my normal function there, and I want to return the element greater than remember, we're not gonna do unequal to because we don't want 18 or 60. We want stuff in between that. So greater than 18 and less than 60. So return element greater than 18 and less than 60. All right, let me hit. Enter. Oh, whoops. My bad. I forgot to put element in there twice, So let's do that again. My apologies, elements, and I want to return element that is greater than 18. And I gotta put element again. Element is less than 60. So the element that is greater than 18 and less than 60 it's going to return. So here, that's just my function. It enter. Their function is defined. Second, let's filter through air array with their function as the argument. So let's say variable adult P equals age dot filter. So here's their method, and we don't have to do the function call back. We could just pass the function we've already created. So that is check age. That's all we have to do now. When I hit enter, I should be able to check adult, and it should only have ages between 18 and 60. There we go. So we got 35. We don't have 14 because that's below 18. We have 52 and we have 21. We don't have 11. We don't have 80. That's above 60. We don't have 18 because we didn't equal 18. We did greater than 18 and we don't have 17. Because, of course, that's less than 18 as well. So that worked. So we filtered these for a specific age range. Great job. But of course, as always, there's Mawr and that comes in the way of parameters, just like we saw with the four each. So let me open this up. So just like their worm or parameters for the four each method. The same is true for the filter method, and those parameters happen to be the same. So we already know about the element that's required the element parameter. But there's to Maurin you're familiar with, Um, there's index, which is the array index of the current element optional. And then there's the array. The original array object optional. So let's play around with that. Let's go back to our Js Consul and try those out. So let's say we want to get an array of index positions for all of the elements that are 18 and up. So we want to get an array of index positions for all the elements that are 18 enough. So instead of returning all the elements that are 18 or higher, we're gonna filter this array and return the index positions. So let me create this array again. Variable age equals 35 14 50 to 2111 80 18 and 17. All right, so first, let's start with air variable an ad on her method like so So let's say age dot filter next past that callback function function. All right. Third, let's pass air element parameter, and our index parameter is we will need the value of each so element index fourth, let's add on air condition in console dot logged the index. Yeah, you can return it. But for the sake of our tutorial were just log in to the console. So So let's say if element whoops is greater than 18 then console that log index. So if the element is greater than 18 shows the index and I'm not assigning this to a variable, I'm just showing how the indexes used here. That's why we're console that logging this So this should give us the index of all the elements that are greater than 18. Look at that. 0 to 3 and five. Wonderful. All right, so here's the final challenge for you. Try this out. Let's create a variable called Day of the Month and have an array with days of the month. So let's say the third, the 15th 22nd the second, the eight, the 30th and the 23rd all right, hit return. Now here's my challenge to you. I want you to filter through this, returning all of the days of the month that come after the 15th and return it in this format. So the 1st 1 that is after the 15th of 20 seconds I want in this format 22 has an index of two. And then you would say of the next one that comes after the 15th would be like 30th has an index of five in a list of element has an index of index, so you can do it with the callback function. Or you can do it with a separate function however you want to. But see if you can filter out all the days of the month to come after the 15th and the console dot Log it so it says Element has an index of index. Try it out Now work through it with you in just a minute. All right? So hopefully you got that. That was a lot like some of the past challenges we've done. So I think you probably got it, But let me show you anyway. So I'm going to do it with a separate function. I'm gonna say function called. Let's call it second half with two parameters element and index, and I'm going to say, um, if element is greater than 15. If element is greater than 15 than console that log element hopes Element Plus has an index of I'm just contaminating here has an index of index. And see, I put those spaces there to make the sentence need. I'm gonna close that, and that's gonna be my function. So I could just return my function set next. I just call my filter. So day of the month. So that's my array dot filter, and I'm gonna filter it based on my function. So I'm just gonna put my function name Second half, I'm gonna return. There we go. 22 as an index of 2 30 had is as an index of 5 23 as an index of six. I think you probably got that. And I hope you understand filter. A lot better announced. Very powerful. You can take an array and filter out certain things based on the requirements that you set . It returns it into a new reign with elements that you've filtered out. So we're done 10 days tomorrow we're gonna look at the beloved map method. That's gonna be a lot of fun. And I'll see you then 12. Day 11 - map: Hey, guys, welcome to day number 11. You may be getting worn out by this point, but just hang in there. Once you get through today, you have one more day left in. Tomorrow's lesson is by far the coolest. Um, as a side note, I just put in a new light bulb and things were really Orange County need, huh? So let's look at today's method, which is map. The map method is so cool, and you will use it a bunch. So today's the day we look at that method that if you come to understand well, will become a powerful tool in your JavaScript toolbox. It is called the map Method. Now, what is the map method? The map method creates a new array with the result of calling a function for every array element. So it creates a new array, and the results are going to be the results of calling a function for every array element. Now, wait a minute. That sounds like another method that we did. That sounds sort of like the for each method, right? Well, there is a subtle yet very important difference here. The four each method does not actually return anything but undefined. What it does is it mutates each array element. And then it's done, discarding the return value. An example, maybe something like iterating over an array element and saving the mutated values to a database and done. And by mutated, I mean, whatever function you call on each element. On the other hand, the map method illiterates over an array. It transforms each element of the array, and it returns a new array with the transformed values. This new ray is the same size and does not discard any element like the filter method does . All right, So the difference between the four each and the map is that the four each doesn't really return anything. It just go. It just loops over in array and mutates things. And then it's done. The map method loops over an array in mutates things into a new array with the transformed values. So I'm gonna discuss that, uh, go over that again. If that went over your head, let's give an example first of what the map method does. So let's open up Js Consul, and let's create an array. So how about variable numbers equals Let's do this. 012345 And I put any curly brace. All right, so, numbers, we have a variable called numbers with an array of six numbers here. Zero through five hit. Enter. Now, what parameters do you think the map method uses? Take a quick guests. Well, you got it the same three. As for each and filter, that is element index in array. Remember, the element is the current element being processed in the array. The index is the array index of the current element in the array. Of course, is the original array object. So let's try something easy. Like multiplying each element by two. All right, so let let's do this. So we're gonna do the four step method. You should be used to this four step method by now. So the 1st 1 is just adding the method on the end of their variable. So numbers dot map Step two is placing air callback function in this these parentheses, so function open. Curly brace, close, curly race and third, remember, we pass in air array element as usual. This could be any name you like. You will often see people use like element we've used. We've used numbers. Some people just use numb. I'm going to say Element, let's use element this time and forth. So remember this element parameter is going to represent the elements of this array as we loop over each one. And finally, let's add our condition and remember that this returns a new array, so be sure to return your condition. So we're going to say Return element Times two and that should be it. Let's hit, return and see what happens. Boom. We have a new array here. All right, this is a new array. This is not numbers. I can say numbers, and we still have the same thing. This is a new radiant returned, and everything is multiplied by two. So zero time 001 times two is 22 times two is 43 times to a six bottle. So we iterated over this array and mutated these elements into a new array. Great job. A few things to note again to make sure that you understand, map number one air variable returned a new array. Thus the use of return. If we were to save her method in a new variable this variable would be a completely new array with their doubled amounts. I think that makes sense. Second, the four. Each method, on the other hand, cannot be returned. This is why we had to console dot longer answers, because once the array elements air mutated, it's done. You can see immediately where the use of map would be a much better tool if you had to do any sort of debugging down the road. So here's a challenge for you. I'm gonna create a new array variable numbers, and I'm gonna put some numbers in here. So nine, 16 25 400 let's say 900. Here's what I want you to do. I want you to use the map method. And instead of creating a callback function, pass in the math dot square root object method as the parameter dust, getting the square root of each element and created in a new ray called square root array. So if you're not familiar with math dot square root, you can say, um 25 and this should get the square root of 25 which is five. So instead of doing a callback function, I want you to put this math dot square root in your parameter, so it's gonna map through this array, and it's going to get the square root of each element. So try that out and save it in a variable called square root array. Give that a shot and I work through it with you in a minute. All right, let's go through this one together. Hopefully, you got it, but it's pretty simple. If you didn't get it, you're gonna smack yourself after you see this is very easy. All right, so numbers is there. Variable dot matt. We'll start with that. And then I told you instead of doing the callback function, just enter in math dot square root and we want to save it in a variable called Where Root Array and we should hit Enter. So that's all it is to a numbers dot map, and for each element, we're going to get the square root. So let me hit, enter and we get undefined. Why did we get undefined? Well, that's because we stored it in a variable, so let's see what the variable gives square root array enter and I have a new array with the square roots, So square root of nine is three square root of 16 is four and on and on. So if I type numbers, I see that the array has not changed that it created a brand new arrange and that is stored in square rotary. All right, I think you're getting the point. So let's try 1/3 example, and in this case, we're going to get the index parameter involved. All right, so let's do something simple that's created variable. Let's create a collection of people so equals I'm gonna put some brackets here, open that up and let's add in three people. So I'm going to say, um, first name, I must say, uh, Jimmy last name Brown. Close that off, Put a comma Whoops, comma. And I'm just gonna copy and paste to more people. Pace Based for the second person, I'm going to call her Cindy. First name and Malcolm. Last name. First name of the third person. I'm going to say Timothy, first name and stumps last name in just in return. So I have a collection of people here with first name last name. So what we're gonna do is we're gonna Matt use map toe loop through these people in just list out the first last name. So if we had a ton of people and we just wanted to get the first and last name of each one , we could use map and loop through that. That's what we're gonna do. Let's create our function for this separate. So let's do function in Let's pass in air, current Element and the index, all right, and we'll call this function list names so element and index as their parameters inside of it. I'm going to create a variable called full names in that equals element dot first name because these objects and I want the name, I want the value and element dot last name and then we're going to simply return full names . Come down here in that so I have my function set. So how do we run map? It's very easy. Their first step is always the variable dot map, and they were gonna pass in the function. The list names function hit, return all right, and we get another. We get an array of a raise. So if we open that up, you see we have three arrays because we did that here. And so we open up the 1st 1 We have Jimmy Brown, we open up the 2nd 1 we have Cindy Malcolm because we put the comma. It created two different indexes. So this is not a good, um example. So let's dress it up a little bit, and I'm going to give this challenge to you. So take this and see if you can join hint, See if you can join them together in one line in a new array called names with the index position listed before it. So it's gonna look like this. This is what I want you to do. So I want you to have an array with this in it. Zero Jimmy round. That would be in the zero index. And then I want you to put, um, one. What's one? And that's going to say Cindy Malcolm And to is Timothy Stumps. All right, so this is one array, So I want you to use map and the joint method, See if you can join them together in one line. These this array of a raise, see if you can join them together in one line in a new array called names, with the index position listed before it. So it's going to say in a ray zero in position zero, we have zero, which is the index position. Colon, the person's name comma in the first index. We have one in so forth. See if you can do that. Hope that makes sense. See if you could do that. And if not, I'll walk you through it in a minute. All right, So let me walk you through this race. This year, I'm going to define the function separately again because I just kind of like to do that. So function. Let's call this list names like we did before this passenger element and her index. We're gonna need them both open and closed. Brand curly braces create a variable called full names and equals. And let's just start out with what we had last time element that first name comma element dot last name. So let's start out with that. And then, of course, return full names. All right, but we want to join them in one line. All right. We don't want it like we had previously. We want to join them in one line, so Let's add on air, join method. Remember how to do that. We just go to the end of this and put dot join and it has the argument of air separator. What's gonna be a separator to go to space? So we added her join method. Now let's add her index value very nicely to the front here. So right here, I'm just gonna put index then Plus, we gotta put our little Colin there. So let's concoct innate there, Colon and just like that. So let's see what happens. Let's take this function and return it. All right, So our functions set and finally, air Matt Method with their function is the argument in assigned to our new variable. So people dot map, we gotta assign it to a variable called names, Of course. So people dot map and then air argument is the function list names. See what happens. Boom names. Now look at this. I haven't array with three items in it. There is in index position 10 I mean, index position zero Jimmy Brown one Cindy Malcolm to Timothy Stumps. So we joined them together. Great job. If you didn't get that right, that's kind of tricky, but I think you understand the map method. Now, let me say it one more time. Listen very closely. If you don't remember all the examples of the less and just be sure to remember this the difference between the map in the four each. Remember, they're very similar. They kind of do the same things. The difference is is that the map actually returned something a new array while the four each method returns. Nothing undefined. This is the key. Once you have that, just remember that the map it a rates over an array, calling a function for each element in returning the transformed elements into a new array of the same size. So that is the map method. It is wonderful to know. Stay right here, keep practicing. And I will see you in our last lesson, Lesson 12 which is the one of my favorites and took me a long time to get used to. We're gonna look at that in the next lesson. And then once we're done, I have a cheat sheet to give you so see a day 12 13. Day 12 - reduce: Hey, everyone. And welcome to day 12. Here you are. Congratulations for making it this far. And my present to you is this awesome method here on day 12. This is one of the best. If you learn this and put it in your toolbox, it will prove so useful for you in your code and career. So the method for today is called reduce. We're also going to look at reduce, right, But that will only take a second once you understand, reduce. So here it is the last lesson. After today you will know 30 javascript methods and you'll receive my high quality cheat sheet with all of these methods to hang up by your workspace for reference. But first, let's work through this method. It is a good one. So it's called reduce. What is the reduce method? It's this The reduced method executes a function for each value of the array. Sounds familiar. But look at this from left to right and reduces the array into a single value. That's the difference. So it iterating over this array, and it takes each array element and reduces it to a single value. To understand this, we're gonna walk through the format step by step here. So first. So let's look look at this step by step. So first, let's build out the function and discuss what it does. Let's say we have an array called Array example. Let's attach our method to it. So this is their four step method. Remember? So Step one Array example dot reduce. That's what we would do. Step two. We would enter a callback function so we would put our function inside of the reduced parentheses. This is very familiar to you. Now check this. This is where we differ here. Third, let's talk about parameters, as this is what trips everyone up. The callback function has four parameters. Four. Number one, the accumulator. This is the thing we need to talk about. The accumulator accumulates all of the callbacks returned values. This is required. This is the value that's going to change. As we iterated through the array, you'll understand that more in a minute. Second is the element. You know what the element is. That's the value of the current element that's also required, and then third index. You know this. That's the index of the current element optional and finally, the array. The original rate object. Good news is that, you know 23 and four already there the Samos filter and for each and map. But we need to talk about that accumulator. But what is this accumulator? What is this? Well, think about this. If we're calling a function on each element and these elements will be reduced into one single value, there needs to be a specified value where the accumulation happens. Ah, value that totals up the changes into a single value. This is the accumulator. You will often see this called Total or a C C. I'm going to say act, Let's use AK and are examples for the accumulator. So let's tally it up to the final formula, and it's a ray example dot reduce inside of reduced. We have a callback function, and as their parameters, we have AC for the accumulator Element index, an array. So example time. That's enough of that. Let's look at some examples so on to Air Js Council. So let's look at an easy example. Let's create a variable called numbers and have an array that has just some numbers in it. 0123456 Return that, and we're gonna do air four steps. You should be used to this by now. So we have numbers dot dot reduce. So whatever variable is air array is with the method added on the end, that's step one. Step two is at a callback function, so let's put our function in there. Step three add air parameters now for this third step will enter air Accumulator because it's required and our current element because it's required as arguments. So here we're gonna put act for accumulator and element. The accumulator is here. The element is gonna be these elements of the rain Finally, and what we're gonna do is we're actually just going to take the accumulator and add the element to it every time. So right here we can put return ac plus element and see what we get. 21. So here's what's being done broken down in that example, this is what's going on. So the accumulator zero. If that's not set, it's always gonna be the first element of the array. So that zero air accumulator zero element is zero. So when we add those together, we get zero That's the first call. Now we jump to the second call. The accumulator is still zero and we have an element of one. So one plus zero is gonna be one That's their accumulator. Now, the third call we have one, is there accumulator air element is too So two plus one is three that's gonna return a three which is now air accumulator. So where accumulator on the fourth call starts with three Element is three, three plus three is gonna be six. That's gonna be a return value. That's air New accumulator. You see what's happening? Every return value in these loops is gonna add up in the accumulator. That's the point of the accumulator. Finally, So you can Paul's and you can look through this. This shows you all off all seven calls here and how we get to the value of 21. All right, now hold on a minute. That wasn't enough. There is one more parameter and that's called initial value. So then, to total it up to tally it up, we have this array example dot reduce, We have a callback function and we have air parameters AC Element Index, an array and then after that function, we have a comma in initial value. What is this initial value? Well, simply put, the initial value is the value by which the accumulator will start on. If there's no initial value provided the accumulator starts as the first value of the value of the first array element. I already mentioned that. So if you don't provide this, it is optional. If you don't provided it, the accumulator value starts as the first value of the array. If there is an initial value, this will be the initial value of the accumulator from the start. So let's try an example using the initial value. And here's that reduce function with the initial value of eight. So here's an example right here so numbers dot reduce step one step two callback function. Step three, we're gonna pass in some parameters here. We're gonna put AC an element because those are required. And let's do the same thing that we did a minute ago. Let's do return AC plus element, but this time we're gonna put a comma an initial value of eight. So we're the accumulator is going to start on eight. So let's hit. Enter and see what happens. 29. So these are the same loops in the chart that I showed you earlier. But instead of starting the accumulator at zero, we started on eight. So if you open that chart up again and cross out that zero and put in eight there and work your way through it, you'll end up with 29. So basically, that just puts us eight ahead, because all we're doing is adding up the values. So anyway, this is how you give the accumulator an initial value a start value. All right, so let's look at a final example to assure that we've understood the basics of reduce. Let's look at some data. So I'm gonna, uh, enter a collection here. Let's do variable population equals some brackets in here. I'm gonna put some data. So let's do this and say state, California, make that a capital C state California comma pop the stands for population 397 eight 0000 Karma right here is gonna be a common to What I'm gonna do is I'm just gonna copy and paste this so pace this year and paste that there and let me do one more pace that there. Let's do some populations here. So I live in Virginia. The population of 841 2000. The next state we're going to give is Florida population of 206100 There is there. The final state is randomly main with a population of 1331000 All right. And I wish I could format this better. This is one thing about Js, Consul, you can't put this in a nice, pretty format. So what we're gonna do is we're gonna use the reduce method to get the total population of these four states. So if somebody said Hey, I got these four states, why don't you give me the total population of them? You can say, Hey, I can use the reduce method because I can loop through these and reduce it to one single value. So how about you give it a shot? I'm just gonna leave you blind here and try it out. Give it your best shot. Start with my four step method, so population dot Reduce and go from there. Try to see if you get the total value. All right, I didn't tell you this, but there is a big trick here. You really had to catch that one. Did you get the answer now? Just read the softer page. 1331000206100008412000 Did you get that? If you did, then that's wrong. And I'll tell you why I got that too. I thought that was right. But it's wrong and this is a great thing. It's always good being wrong because you learn from your mistakes. You see, if you didn't set an initial value than you actually started off with the population of California So your accumulator started off with 39780000 So you didn't start from zero. You started all he started out with this accumulator so that accumulators now gonna add itself here in this and this and you're gonna get to higher number. So you need to start the initial value of zero. That's very important. The accumulator, the initial values of very important thing when using this method. So try it again with zero as the initial value and then I'll work through it with you. All right? Hopefully you got another number than that, and we'll see what that is in a minute. So here's what we're gonna do. I'm gonna hit return, too. Save that. So it's simple. Is this look, Population Step one is population reduced. That's how we started, then step to function. Callback function. Step three. What are we gonna put in here as the parameters? We're gonna put AC an element because those are required. And then what are we returning? Return element dot pop. So the these air elements we got to do element dot pop plus a CC and see if we start out with this number, the first thing is going to do is add this number to itself because it starts with the 1st 1 which is California. So of course, we have to set the default value. So comma Zero or not default the initial value. So this is all you have to do is type this in, and if you hit return, you should get 70133000 All right, that's 70 million. 133,000 people. So great work in tackling and initially difficult but extremely powerful method. One last thing before I let you go. Now that you know, the reduce meant that you can easily add to your arsenal reduce right, what is reduced, right? Well reduced right is the exact same as reduced, but it reduces the array elements from right to left instead of left to right. There'll be times where you might need that. I don't really know why at the moment, but reduce right. Just starts from the right in reduces things to the left. That's all it does. So reduced is awesome. You should really mess with this one and really get used to the power of the reduce method . Great job. You made it through 30 methods in 12 days hanging there. And in the next lesson, I'm going to give you the link for that, Cici. 14. Congrats! Here's your Cheatsheet!: Hey, guys. And congratulations for finishing these 12 days. You have learned 30 javascript methods. Now, for the best part, if you stop right now, you walk away a couple weeks, you're gonna forget a lot of this stuff. So what I've done is I've created a high quality cheat sheet based on how you learn this material. So if you see on the screen here, I have a cheat sheet for you. I want you to print it out. I want you to hang it right by your desk. Laminated. Whatever you need to do, it is a invaluable resource. I use it daily. Okay, so here's what I've done. I've taken all the methods. So all of the methods we've learned, I've put them in a column. I have a second column, and this is for the type of methods. So we have a four array we have s for strings and end for numbers. All right. Next up, I have the parameters. Now check this out. These air the parameters for each method and up here in the top, right. You'll see that what is in the grey is optional. What is in the black is required So when you come down here, you're going to see I have all the parameters set aside for you with the information whether they are required or optional, depending on what color they are. Finally, I have a column with the definition. So right here. If you print this out, this gives you the method, the method type, the Met, the parameters and the definition of the method. I think this is great. They're 30 JavaScript methods here. And here's how you get it. Congratulations for finishing the course. Here's how you get it. You go to my website www dot Travis dot media. Yes, I have hair. Now I don't have any there. Uh, and you just type in slash Js methods right here. The top you're going to see? Congratulations. Here is your cheat sheet. So you have a high quality cheat sheet, PNG, which you can download the image or the high quality cheat sheet. Pdf, download that here. So just click on that and the cheat sheet is yours. And again, Congratulations. Thank you for taking my course and taking time to take 12 days out of your year to learn this many methods. Best of luck on your javascript journey and you're coding journey. I wish you the best