Introduction

Hey. Hey, good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome back, folks. Another Thursday. Let's go. Let's get us some hey what's going on everybody welcome in welcome in welcome in good night tonight. Tonight's a good night we got a lot of some spiciness with the rays a little bit a little bit more of these these fancy methods a little bit just a little bit of review a little bit of the fancy methods and then we're going deeper with our objects we're going to look at not only using literal notation, but also using constructors, adding more spice to our objects, getting us ready for next week when we start using APIs and using objects to build really cool stuff. But tonight we're going to build some really cool stuff too. We're going to see functions come together. We're going to see how we can have functions doing one task and then using them in correct ways and fun ways. So lots of fun stuff, some good review, some good practice with arrays, some good stuff with objects.

Glad you all are here. You know what I like to do? I like to start off the beginning, of course, with our questions. If you got some questions, maybe I got some answers. Let's gamble. We'll get some gambling in tonight, don't worry. We got some, we got some, some YOLOs to be had. Got some YOLOs to be had for sure. We're gonna be doing a rock, paper, scissors game together. And then we're gonna play some rock, paper, scissors. We're gonna see if people really put up these channel points or not. That's what's a YOLO. A YOLO is when you put it all on the line. You throw all the channel points into the wind and you hope for the dub. Either double or you don't.

We saw somebody win almost 40, or was it 50,000 channel points last stream. Whoo, you only live once exactly Alrighty the question of the day, however Question of the day Would you rather be rescued by batman? Or spider-man, but batman or spider-man in chat for me batman or spider-man, please We'll also I think I lost adk one time oh no Oh batman coming in hot Actually, it's pretty split in a lot of Spider-Mans and now a few Batmans. This one's hard. I feel like being rescued by Spider-Man be way more fun. Like you're swinging through the air, like you're having a lot of fun, but I might be able to convince Batman and give me some of the cheddar, you know, like I feel like Batman being your friend can lead to more opportunity than Spider-Man being your friend. I don't know what that makes me if I'm already trying to gold dig on my superhero rescues, But I feel like feel like more fun with what spider-man, but I'm like a little something extra with Batman. You never know Because you imagine you're like falling through the air can actually can can we wait for Batman to get here, please? Spider-man, hold on. Hold on. This Batman is Batman coming. Let's look around real quick. All right. All right, you got me All righty folks, you know what we like to do, we always like to give folks an extra second or two to get in here. If you're new, welcome.

We're running a 30 week software engineering bootcamp where we go from zero to employed. If you need the materials for tonight, we're going to have lots of practice, fingers on keyboard. You can always do exclamation point discord in chat, use our discord to get the materials. You have to agree to the rules and then there is a follow along materials channel that you can use to get all the materials For what we're doing tonight Already folks. You got some extra questions. I got some I got some answers for you. I let folks get in here Don't forget to get your hydrations in today What's your favorite X-Men Nightcrawler? Easy. Alrighty, get in here. What's the purpose of notation that uses the three dots? That's a spread operator. it enables you to kind of have the full array explode in that position. So instead of having to like put everything in there, it can kind of spread open and be in there. We'll see that later on. It's a good, good question though.

Yeah. Spread operator if you want to look up what that is. All right. I got a question. I archived some projects on Glitch to be neat. Are they still available for you to see in the homework submissions or I need to re-upload submit? You don't have to re-upload or submit. Don't worry if you submitted them with some other other links. We got them already. You're good That spread operator got me in code wars. Yeah, it comes up quite a quite a bit It comes up quite a bit in code wars. It's especially if you're looking at other people's solutions you're gonna see that spread operator a lot in the Code Wars. So that's the beauty, right? When you're doing your Code Wars, either you solve it or you look at the solution, always look at how other people did it and you're gonna pick up so many like tips and tricks. And so for a while, whenever I'm learning a new language and I'm doing Code Wars for the first time, I stay Googling stuff.

There's so many little quirks of each language that you only get when you're doing challenges every day. And so that's why Code Wars is also so important. and you just pick up on all these little things that we'll never have time to cover live together. But if you're doing your code wars every day, you're learning something new about the language every day. Leon, one of my friends showed me his technical interview and I understood most of the words in the technical interview. He got the offer. I thought it was cool to understand when I knew nothing three months ago. Hey Matt, that's awesome. Good to hear that. All righty, folks, let's get into it. Let's see what we got to get into today. So we are talking about functions and loops, and we're gonna review some arrays. We got some fun stuff to do with arrays, and I think for the first time, we're gonna really see functions that serve one unique purpose being used to build a larger app. So we're gonna see some fun stuff with functions. We're gonna see some good array methods just to get some more practice with it.

I know a lot of folks are doing the array methods in their code wars. So we're gonna see some fun ones, like reduce some of them that were in the reading that we hadn't had a chance to get over yet. Then we're gonna go deeper into objects and setting ourselves up really well to move into APIs. Leon, it seems like I can't really get the grasp on JS. I tried everything you've told us, repetition, repetition. I always feel like I understand quite a bit, but every time I face the problem either in code wars or the task for homework My mind goes blank. What else should I do to help me understand more? Well, I mean when your mind goes blank That's not necessarily a bad thing I think that's that happens to most folks when they start seeing these problems for the first few times That idea of like you're looking at a problem can trigger a lot of stress It can trigger a lot of emotions of like fear and doubt And so that's why I say when you're first approaching code wars, don't beat yourself up. Just look at the solution, right? Until you start doing these challenges more regularly, right? Your brain might just switch off. And so you got to get comfortable with the problems first. You got to get comfortable with like the way they phrase stuff or how they Um, or how they, how they like, like the terminology that's being used. And so when you're first doing these problems, probably for the first week or two, you're probably just like looking at it going, I understand some of these words and then just looking at the solution, it's not worth it to like beat yourself up over not understanding how these like very weird questions are being framed. The thing that you have to do though, the thing that you can never ever do is look at the question, look at the solution and not commit it to memory.

It has to be in your brain. You have to be able to look at that problem again and know exactly how you're going to solve it. And so when you see that problem, you immediately, if you don't know how to solve it, look at the solution, spend, spend and spend that amount of time you would have spent solving on analyzing, typing, retyping until you don't have to look at the solution anymore. Add that question to your Anki and then every day be reviewing that question and the solution because I guarantee you There are gonna be parts of that question that show up in other questions later on And if you're looking at a bunch of code wars, and it's still not it's still not clicking, right? It's still not clicking. It just means that you haven't seen enough of those patterns yet eventually you build up this this this muscle this repertoire of of problems that you've seen. And when you look at a coding problem, you'll go, oh, that's the pattern from this thing. And so that takes a while. Some folks that'll take a week, that sometimes it'll take a month. If you're doing code wars every single day though, within two to three weeks, that starts to be like easy. Especially if you stick to level eight fundamentals, you're only doing eight queues and you're doing the same types of problems in a row. Don't be the person that does an array problem then a string problem, then an object problem jumping around because you won't see the patterns that way. You have to do all the array problems. They have to do all the object problems. They have to do all the string problems.

Don't jump around because then you won't notice the patterns. So almost always when my students are saying like, Leon, I've done code wars for a week. I'm still having trouble. It's they haven't committed the past solutions to memory and they're probably still jumping. If you're doing all that, just give yourself a little bit more time. It takes a little while. Oh, yeah. Yeah, you can actually search for the specific problems and then that way you're doing only arrays for a while or only strings for a while. Yeah. Cool. Alrighty, let's get into it, folks. We're gonna do some quick review. We're gonna have a good kind of practice problems to get our fingers on the keyboards and we're gonna keep going. So if you haven't checked in yet, please go ahead and check in. exclamation point, check in.

If you haven't followed along in the follow along materials or followed along on Twitter, go ahead and check in for me. Give that a like, a retweet, so more folks can find us. Alrighty. Submitting work. I wanna see your task work. So at the end of the reading that I've asked you to do, there were some tasks. I want to see how far you got in this task what you're able to do So, please go ahead and make sure you submit it your work for the tasks that you've done Thank you And It pays to open the newsletter folks So if you open the newsletter and you filled out the secret form We got a we got a raffle that we have to do right now. So I ain't getting got no more What I do is right as stream starts I grabbed everybody's twitch names from the newsletter from from that form and I put it in a random name picker I ain't getting got no more it no more free raffles here You know I'm saying so if you open the newsletter and you click the secret raffle and you filled in your info We're about to do that raffle now. It pays to open the newsletter folks. It really pays next week Next Thursday And newsletters and we pop it and that's all I got to say How do you sign up for the newsletter? You can do exclamation point newsletter Exclamation point newsletter and and that'll get you signed up Cool so the newsletter goes out before class 30 minutes before every single class Kind of talks about what the class is going to be and I always put little secrets in there I always put like it's a little bit of extra tidbit. Sometimes I do raffles. Sometimes I just do words of encouragement. So Newsletter, don't miss it. All right, for the folks that threw in their names, we had about over 500 people that clicked the link before class started.

And so I'm gonna randomly pick your name now. Ready, here we go. All right, Toto by Africa1313, go ahead and send me a whisper and we're gonna get some merch coming your way next week. So next week we launched the merch and Toto, you are getting a T-shirt coming your way. So congratulations, folks. It pays to open the newsletter. Alrighty, health first. We talked about this last class. Make sure you're doing the things that you need to do. We're hitting our stride now, right? We're hitting our stride now, meaning that we're doing a lot more. We're fingers are gonna be on the keyboard a lot more. You're gonna be building a lot more. You're doing code wars every day. Like your fingers are going to start to hurt.

Please make sure you're taking care of yourself. Make sure you're getting your stretches in when we take our breaks, make sure you're actually taking your breaks. Make sure you're hydrating good sleep, right? If you need to take a day, take a day. If you need to miss a class, miss a class. It's okay. We'll be here. We got the ketchup crew. Your health comes first. And I feel like I always have to say this. I have to say this to every cohort I teach because. Every single cohort I teach. I have folks that go to the emergency room cause they don't take this serious. Right. We don't, they don't take this part serious.

Your body is going through a lot of physical challenges as much as the mental challenges of learning to code Right. So make sure you're taking care of yourself because here's where it starts This is where the the the rubber starts to hit the road folks It's where you're starting to develop that wear and tear and so please Before it before the pain sets in take care of yourself Coding challenges you should be doing a code wars a day a code wars a day If you haven't been doing your code wars a day, it's okay. Now's the time to catch up, right? Now's the time to catch up. Make sure you're doing one a day. Level eight cues, fundamentals. Next week, next Thursday, we learn about Git and GitHub. After next Thursday, you're gonna be pushing your code every day to GitHub. Every single day, you're gonna do a coding challenge and then you're gonna push it to GitHub. And the reason why we do it and why this is so important is one, you get that daily practice. Every single day, you get to do something practical. Every single day you get to solve a challenge. By the time you're ready to interview, you're a lean, mean interviewing machine. But also once you start pushing every day, any recruiter, hiring partner, someone that looks at your GitHub, they're gonna see, oh, this person's really about this life. They're pushing to GitHub every single day.

So please get your code wars in, level eights, fundamentals, only stick with eights. Make sure you're doing the same types of problems over and over again. and next week after we have our class on Thursday, you're gonna start pushing your challenges every day. When you're going up against another person for a job and they're trying to compare two candidates, the thing they're trying to figure out is do I wanna work with this person for the next two years and can they really code? And so they're gonna look at your GitHub and if they see all these commits, all of these things that you're putting on there, that you're doing every single day, that's gonna help tip the odds in your favor. We're going to start turning things up, folks. That's why the health comes first. We're going to start seeing the intensity turn up just a little bit in terms of us getting our fingers on the keyboard more, doing more practice problems, going deeper with our lecture. We're going to slow down a lot of the repetition at the beginning, do a little bit more meat at the end of each class. And there are some folks that want to push, right? So when you're doing a bootcamp of this size, there are some folks that are going to be a little behind. There are going to be some folks that are right there with you, and there are going to be some folks that want to push. So for the folks that want to push, you're going to start to see me recommend some extra stuff to do. Not every class, but maybe every other class, right? So if you're in the position where you're feeling, you know what?

I want to push a little bit faster. I want to do a little bit more. I'm going to start giving you that work in case you want it. Cool. Now, when you see that push work is not something you have to do. It's for folks that have the privilege of time, right? And they have the means to do it, right? So don't worry that if you're not doing the push work, it's just for folks that really do want to push. So we're going to have a stratification of folks across the across the pond here and we want to make sure if folks want to push they can push it. So you'll notice in the follow along today there was a little section a little bit extra work there's something you want to push yourself to do. I can hear this GIF so can I. All right we mentioned it on Tuesday but next week is the best week ever. We got something every single day of the week. Next week we got we got we have our our office hours on Sunday, but then we're going to have something Monday, Tuesday, Wednesday, Thursday and Friday. So stay tuned.

We're going to be announcing some fun stuff that we're going to be doing all throughout the week. It will be the best week ever and culminating part of our best week ever is our sponsored stream on the 31st. So next Thursday we have our Git and GitHub class, a fundamental class. We got to know how to use Git. We got to know how to get all of our work up on GitHub. And so Microsoft is coming through to sponsor that class. We got tons of swag to give out. We got laptops to give out. Make sure you're here on Thursday. It's going to be a lot of fun. Now, part of your homework was an introduction to GitHub by Microsoft, so Microsoft actually has a really cool introduction to GitHub. That's part of your homework. When you go and click on that link, you're going to see like an email submit. If you fill out that email submission, you get entered into an extra raffle for a laptop. So if you want to get entered into that raffle for an extra laptop, go ahead and give the email.

You don't have to, but if you want to be entered into that raffle, uh, submit your email and you'll be entered into that raffle. And then you're going to see two things in that link. The intro to get hub is your homework. I need you to go through that class before next Thursday. If you don't go through that class before next Thursday, you're going to be behind. And I don't want that to happen. So please click that link. Uh, if you want to be entered in the extra raffle, fill in your email. If you don't just do the intro to get hub and that way we're prepared for. Thursday will be a really fun class, but it's also a really important class. All right. Yeah, you can just put a hundred devs for the company or whatever. Yeah. Already folks. Let's get into our review and then we have a pretty cool.

Well, I think it's a pretty cool coding challenge to do together already Programming program program is just a set of instructions. We write to tell a computer what to do and therefore the act of Programming is simply writing those instructions and a language that the computer can understand the language that we use that helps the computer understand what the heck we're talking about is JavaScript P.a. Thank you for the hydration. Cheers to you We learned about the big four, one of which was variables, our bucket that we can store data in. We can set up the space in memory with our declaration. We can assign that space in memory of value and we can do both at the same time. So here you can see that let age equal 25. We're doing the declaration and the assignment at the same time. Beautiful. Beautiful. Sorry, my iPad wasn't connected. One second. Beautiful, all righty. We learned about our conditional syntax where we can check to see if a condition is true. If it is true, we do what's inside the curly braces.

If not, we can move on to the else if to see if that's true. If that's not true, we automatically run the else. The else does not need a condition and you can have as many else ifs as you want This is quick review for us if you if you haven't been here before We spent whole classes on this stuff So we're going to go a little bit fast as we just kind of get in our spaced repetition All righty, you can also have multiple conditions Where you're looking for both things to be true where if your name equals leon and your status equals ballin Get a wink. That's for you. We can also see if the day is Saturday or the day is Sunday. So we can do, or we're just checking to see if just one of these conditions is true. As long as one is true, then you can do what is inside the curly braces. Alrighty, functions. We learned about functions. Our functions are simple sets of instructions and we're gonna see these in action today. We're gonna see how these functions can be reusable and how they can perform an action for us that we can reuse over and over again. We know that our function comes down to two pieces. We have our function declaration and our function call. When we call our function, we pass in our arguments. We call mom to argue, our arguments fall into our parameters.

Wherever we see our parameters, it's whatever we passed into the function. So here is an actual function called yell. We passed in hello as an argument. It falls into our parameter word. Wherever we see word, it's actually going to alert hello. We're gonna see these functions and actions in just a few seconds here, folks. And we're gonna see some interesting things about the alert later on today. All right, we talked about loops as part of the big four. Our variables, our functions, our conditionals, and the loops for the last of the big four. then we add it on our arrays, we add it on our objects, but our loops are just a way of doing something multiple times. We enable us to iterate through an action over and over again. We've seen for, we've seen while, we've seen for each. We're even seeing some other array methods that still do looping like map and filter and some other ones that still loop through all of our content. Alrighty, the original for loop we saw, we set up our counter, we say when the loop ends and how much we go up by each iteration. And here we would just be console logging that counter each time the loop ran.

We saw some other loops, like we said, while and for each. And now let's get into some review. So if you go ahead and open up the materials from today, We're gonna continue with our Power Ranger-themed review, and we have a Turbo review. So there's a lot here, folks. In this Turbo review, we got some variables questions, some function questions, some conditional questions, some looping questions, and I want you to jump into this. I really want you to shift into Turbo exactly, and see if you can get through these. And then we're gonna go over them together, but I'm gonna put a healthy 10 minutes on the board here. Healthy 10 minutes on the board here. Go ahead, open up your code and have at it. I'm gonna play some music for you. Remember, you can always turn off the sound while you're working if you need some peace and quiet. Otherwise, I will see you in 10. You got this, dig deep. This is the Turbo Review, Turbo Review. Apple juice bang equals is just not equal in value.

bang, equal equals is not value and type, just like double versus triple equals. Seven minutes, you can use whatever, doesn't matter, either one is fine. Yep, well if we get to react after we learn full stack. Can you talk about how a variable can take an argument and the variable is declared to a function. So variables in JavaScript can hold anything, including functions. Can you put a foreach inside of a map? I guess technically you could. You're gonna run into some efficiency issues. I'm on class 13 I that far behind no I mean we also have the ketchup crew so feel free to kind of catch up at your own pace and then join us live Is it bad practice to put loops inside of other loops? Depends on the problem and what you're trying to do. Eventually we'll cover our data structures and algorithms and we'll be able to figure out the efficiency of the code that we're writing. That's not something you should worry about right now. Stinker you can. Yep irony should. Tech all the homework is in the follow along materials channel.

You can just search in that channel for the class that you're trying to work on and all the materials are there. MBA turn up. Fred, yep, you can also do exclamation point semicolon if you want to learn more about it here in chat. I'm behind for classes. Should I watch this first or watch your live class right now? I would catch up with the other classes and join us live for office hours though. Gar, for GitHub, you're gonna make, also be committing your homework. We're also doing lots of projects as we kind of continue. We wind up doing more projects as time goes on, like even like less class, more projects. 1 p.m. Eastern time on Sunday or office hours. All right, folks, we're halfway through. Dig deep. You got this. It's in the follow along materials channel.

Share our note, join our discord, exclamation point discord, and join the catch up crew. Make sure it's secure. can. So Sorry if it's hard we're gonna go over it together Oh dad, that sounds fun Cold probably og green, right? Mine that's awesome. Hey, well, hopefully hopefully folks were there and this is review for them You need to tell them that, hey, you're not, you're not currently looking for opportunities, but you will in a couple months and we would love to reach back out then. Jada no, cause I don't know how to, I wouldn't, I wouldn't have to figure out how to vent them. Yeah, I mean, this Rock Paper Scissors comes up in code wars quite frequently or are very similar aspects of it across a lot of problems. Does this be doable? There's pieces that you should be able to get for this. Maybe not everything but it's involved. We have to do some googling It's all right though if you feel behind we're gonna go over it together Liz make them a shopify site site then Bazzi on our discord. You have to agree to the rules. And then once you do, there's a follow along materials channel And okay, yeah, we're gonna do a class on online present stuff like that later on We got to learn how to use github before we can talk about optimizing our github Are we allowed to Google help for this assignment? Always.

You're always allowed to Google. Even on the job, you're supposed to Google. So I wouldn't make you not Google if that's what you're supposed to do on the job, right? The code wars RPS coming in clutch. Yeah, this shows up quite a few times And I Google on interview some interviews yeah hands on the interviewer All right, folks, come on back. Let's look at this together. See if we can get this one underneath our belts here. Come on in. Come on in. All right. How far you got? Let's try and do it together. All right. Let's chill the music. All righty.

So close. That's all right. That's all right. Let's go over it together. Declare a variable and assign it your favorite drink as a string. Make sure there's no white space on either side of the string and print the value to the console. What did you all come up with to make sure there's no white space on either side of the string? What'd you come up with? Ooh, trim, yes. So trim is a method that if you haven't come across it in your code wars yet or the reading yet, you probably would have Googled it and came across with trim. All right, so we'll use trim. So let's go to declare a variable um, let save drink equal This one's always so hard Baja blast right, but Can't leave it but i'm gonna have to do uh diet Diet let's do capitalized diet Vanilla coke from Friendlies, there you go. If you know, you know. But the like the legit syrup, you know like the legit vanilla syrup, do they have it friendlies? You know, you know, it's all right.

All right, so I intentionally put some space on the beginning and the end of the string. And so what I wanna be able to do is I wanna be able to, when I print it to the console, not have those spaces. So I'm going to reassign favorite drink. And I'm going to set it equal to favorite drink, but I'm going to do trim beautiful. And so just looking at trim, what do we know trim is? By looking at trim, what do we know this is? What is it? Yeah, it's a method. Alright, we're gonna keep that in our mind. It's gonna be. It's gonna be a method later on. Let's keep that in our brain for now, and then it says printed to the console. So let's go ahead and do our console dot log. Let's go and put in fave drink. Let's save it up Let's make sure we open this one in the in the browser All righty, we got our Power Rangers turbo There we go, cool I gotta gotta get you got to get the hand exercises in there.

All right, let's look at our inspector Let's look at our console here. And we should see Diet Coke from friendlies. And we can see that there's no space. It starts right at the beginning. So the trim worked, it got rid of the space for striking. All right, look at this next one here. Declare a variable, assign it to a string of multiple words. Check to see if one of the words is apple. All right, there's lots of ways that we can like Check for words in a string. What are some what are some things that you came up with to see if a word is in a string? Oh, I see some folks that did what I did includes would definitely be one Searches one. I think it's a little less less known or I mean, it's definitely out there But I think what people haven't seen it as much. Yeah includes could work search could work There's some ways that you could split it. There's some other like fancier things to do. I am just gonna use the search method.

So let's go ahead and try that. Let's go ahead and assign it a string. It has to be a string of multiple words. I'm not gonna say an array of multiple words, it's a string of multiple words. So let's go ahead and say let str equal, and we're gonna put in some words in here. Bob, duck, apple. Let's keep it lowercase because that's what it's looking for. Apple and dog. There we go. Bob, duck, apple, dog. Beautiful. All right. So there's a string of multiple words. All right. So the string was the key there.

Bob, duck, apple, dog. And we want to see if Apple's in there. So there's something we can do. I'm going to console log it just so we can see it. We can console log str, which is It's just short for string search. And we can look, we can put the thing that we're searching for inside of that search. So I'm just gonna put the word apple in here. So let's save this and let's see what we get. All right, we got the number nine. We got the number nine. So that means that the search worked. It found, it did find the word apple. What do you think the nine means? Where did it, where did it get the nine from? Yeah, let's count, let's count it.

Let's count, let's go back, let's take a look. All right, zero, zero, one, two, three, four, five, six, seven, eight, nine. So A is in the ninth position in that string. So it's kind of like the index of the string, right? Started counting with zero at the B, and so A was at the ninth index in the string. So that's cool. So if you do the search and it finds a match, it returns the character, yeah, there you go, like the character index of where that word started. Now the cool thing is if you, let's say if we put in, let's misspell, let's put in something that's not in there. Let's put, let's put in phone, right? All right, and let's go ahead and save this. Let's go ahead and refresh. All right, we see what happens when it's not in there. We get a what? We get a negative one, right? We get negative one.

So negative one is like saying, hey, we looked in that string and we didn't find it. So now we know if it's in there, we're gonna get a number. If it's not in there, we're gonna get negative one. All right, cool. There are always different ways to solve this. Part of my job is to show you a bunch of different stuff. So there are other ways to do this, absolutely. But if everyone knows the easy way, then I'm gonna show you some other ways too. That's kind of the point, right? We gotta have some fun, we gotta see all the different ways to do it. You're gonna see other ways in your code wars to go about this stuff, but I'm gonna try and show one that maybe you haven't seen. All right, so we got the search of the string. We're able to find that there wasn't a phone, and we got negative one. So how could we check to see if, if Apple was in the string or not? Like how could, how could we, what could we do?

What could we do to just to figure out, like to say like yes or no? Like what if we wanted to like console log yes or no? Yeah, we could just do a conditional, right? We could just do a conditional. So let's go ahead and change this from a console log see like an if, and if it's in there, let's say as long as it doesn't equal what? As long as it doesn't equal what? Yeah, we can say as long as it doesn't equal negative one, we can go ahead and console log Regex, yes. Else, we could console log, no. Right? Has it covered Regex? No, and I probably won't. When you're doing your code wars and your code challenges, really push yourself not to use Regex. Regex is a quick way to solve a lot of this stuff. don't use it when you're doing code wars. Yeah, it definitely is something you can pick up when you're going into interview season, but when you are like actually trying to solve problems, you're way better off learning the different methods and the other ways of solving stuff than you are like really investing in learning regex.

When it comes time for interview season, sure, pick up the basics, but when you're going through code wars, don't use it. Yeah. Cool, alright, so we had. Y'all can look it up. Everybody's like what is rejects? It's regular expressions. It's ways of kind of like using some shorthand notation to do stuff specifically with strings and string manipulation. So it's really easy to like check to see if stuff's in a string, add stuff, remove stuff. And so when you do your code wars, it comes up a lot. And some of my students kind of over invest in it and it never pays off dividends. You'll be in an interview and you'll solve a reject and it'll be like, great, can you actually code it though? So add it to your repertoire at the end, not something you should worry about now. All right, we're not searching for phone though, we're searching for Apple, cool. So let's see if this works, let's save this. Boom, we got a yes.

we know that Apple was in this string and this conditional works. So search for the string Apple as long as it doesn't equal negative one. Why do I say negative one? As long as it doesn't equal negative one. Why am I saying not equal to negative one? Yeah, if this search did not find Apple, it would return negative one. So as long as it doesn't equal negative one, I know that it did indeed find Apple, right? I know that it did indeed find Apple. So as long as it's not negative one, I know that if it returned any other number that it did find Apple. So I can go ahead and say yes. If it was negative one, I can go ahead and console log no. Beautiful. All right, create a function that returns rock, paper, or scissors randomly. What can we use here? What can we use here to figure out if something is random?

How can we get a random number? Yeah, math.random, we've seen this before. So I'm gonna use math.random here to help me figure out how to return rock, paper, or scissors randomly. So let's create a function. I'm gonna call this rock, paper, scissors. Beautiful. And the very first thing I want this function to do is to give me that random number. So I'm gonna say let random equal, I'm gonna do math dot random. Now, what math dot random does is it returns a number between zero and one. So it's gonna give me like a decimal between zero and one. For some folks that kind of hurts our brains a little bit. So instead of saying is between zero and one, imagine it was gonna return a number between zero and 100, right? It's just gonna randomly give me a number between zero and 100, right? It's really between zero and one, but let's just use this as a better example. So if it's gonna return a number between zero and 100, and I want something to occur a third of the time, because I want it to either be rock, paper, or scissors.

If I want something to occur a third of the time, I can check to see if that number that was returned is less than what? Yeah, make sure that it's less than 33. If it was less than 33, I should go ahead and return rock. If it was less than 66, I'll return paper. And if it wasn't less than 33 and it wasn't less than 66, then the only thing it could have been is a number between 67 and that 99, which means I should return scissors, right? So that's the only thing I'm doing. I'm just using this math.random to give me a random number. And once I have that random number, I'm just gonna have a conditional, right? I'm gonna have a conditional that says, all right, was it less than this? Do this. Was it less than this? Do this. And if it wasn't less than those two things, then the only other possibility would be for it to be the other one. So let's go ahead and do that. Go ahead and do a conditional.

And I'm just gonna say if, and we're gonna say if random is less than what? We know that math dot random returns between zero and one it really does do zero and one So, uh, what do we what are we looking for here? Yeah less than point three three Cool, if it's less than point three three, let's go ahead and return rock else if What are we going to check for if random is less than one? What are we going to check for this time if it wasn't less than 0.33 what's the next thing we check Point six six nice and if it's if it's less than point six six, we'll go ahead and return Paper Cool and we'll do an else and so if it was Not less than rock a third of the time and not less than paper the other third of the time What's the only other thing that it should be? Scissors, exactly. Now remember, it doesn't return one. Like one's not a possibility. It's between zero and one, yeah. Cool. Alrighty, so now we should randomly return rock, paper, or scissors. So let's go ahead and just call this one. So let's go ahead and save it. Let's go to our console here. Let's go ahead and do rock, paper, scissors. We'll run it.

We get rock. Let's run it again. Paper. Let's run it again. Scissors. That was perfect. Couldn't have asked for a better one there. Cool. So you can see as we keep calling this function, it keeps giving us a random value between rock, paper, and scissors. Nice. All right, let's go ahead and look at the next piece here. And what I like about this, this is a singular function that does one job, right? It does just returning of rock, paper, scissors. So it's a function that uses some stuff that we've seen before to do one thing, return rock, paper, scissors. Let's look at this next thing.

Create a function that takes in a choice. So meaning like we can play the game, Like we, we, we will give a choice of rock, paper, scissors, and determine if you've won the game of rock, paper, scissors against a bot using the above function, so what I'm going to do is I'm going to be able to create a function that takes in my choice and then see how my choice compares to the botch choice. and to see if I win, to see if I lose, or see if I tie. Cool. So let's go ahead and create a function here. And my function is just gonna be, I'm just checking to see, guess I'm checking to see who won. So I'll see, I'll create a function here. I'm gonna call it check, check win. I'm just gonna check to see who wins. All right, and I'm gonna take in a choice. I'm gonna call my parameter choice. Nice. And let's go ahead and what we're gonna do is, we have our choice that's coming in, but we also need the bot's choice. So like what the bot chose. How can I get what the bot chose?

What could I do to get what the bot chose? Yes, I could simply just call the function that we wrote above. So let's do that. Let's say let bot choice equal rock, paper, scissors. I'm just gonna call it, right? Because what's gonna happen is when I run this, when I make this function call, this function call is gonna run this function, right? and whatever comes out of it, it's either gonna be returning rock to this position, or it's gonna be returning paper to this position, or it's gonna be returning scissors to this position. And so bot choice won't actually be this function call, it'll be whatever gets returned from the function call. So once bot choice runs, it's as though I had plopped in, if it's what it came out to be, rock there. And now wherever I use bot choice, it's going to be rock. Cool. So now we have the choice that I'm passing in as the player. I'm actually going to call this player choice just to make it a little bit clearer, player choice. Cool, player choice and bot choice. And now to see who win, I got to do some conditional logic.

What I need to do now is just check all the possible combinations, right? All the possible combinations of how I could have won. So let's go in and say player choice. If player choice equals rock and bot choice equals what? How could I win? If I chose rock, what was bot choice have to be for me to have won? Yeah, it would have had to be scissors, right? So let's go ahead and put in scissors. So if player choice is rock and bot choice is scissors, then I know that I won. And just to keep this kind of like together, I'm gonna wrap these in parentheses here. Cool, so now I have like this one condition for how I could have won. If I wanna check for a different condition, what bit of logic do I need? So I have one condition where I would have won. What type of logic do I need to check for a different condition? Yeah, I need or.

So I'm going to say or. So if it wasn't that winning condition, check this winning condition. So let's say player choice was paper. All right, let's say player choice was paper and bot choice was what? What would bot choice have had to have been for me to have won if I chose paper. Yeah, it would have had to be rock. Cool. Let's do another or here. What if I chose, what if player choice equals scissors, right? All right, and bot choice equals what? What would a bot choice have had to have been if I chose scissors for me to have win? Paper, beautiful. All right, so are there any other conditions for me to win? I have a rock condition, I have a paper condition, I have a scissors condition. No, there's no other win conditions.

Let's go ahead and do the tie condition. So what would constitute a tie? Player choice equals what? What would it have to be to be a tie? Yeah, it'd have to be called a bot choice. Cool. So if I win, I should do something in here. So let's just console log. You win. If player choice equals bot choice, I should say you tied, and if I didn't win, and if I didn't tie, what's the only other thing it could be? You lose, exactly. Cool, so I now have the ability to call my previous function which will give me rock, paper, scissors. Then I am able to compare my choice to the botch choice to see if I won, compare it to see if I tied, and if I didn't tie or win, the only thing I could do is lose. So let's go ahead and let's go ahead and run this. I am going to go ahead and play player choice and I'm gonna pass in rock.

Let's see if this works or not. Uncaught reference error, player choice is not defined. And look it says line 42. Line 42 player choice is not defined. Let's go take a look at it. 42 player choice is not defined. What did I do? What's wrong with this? It's not the function name. The function name is check win. The function name is check win. I was too busy looking at the parameter and I used a parameter. So the function name is check win. So let's call it check win. Beautiful.

Let's save that. Let's go ahead and run it. You lose. Let's go ahead and run it again. I'm just gonna refresh the page. You lose. you lose you you tied man i'm losing hard you tied you lose you tied you lose you lose you tied you tied you win damn we can't win yo my code's hating my code's a hater man i can't win at all Oh, damn, that's hilarious. That's how life goes some days. That's how life just goes some days. All right, let's take a look at our code here. We got our rock, paper, scissors, make sure it actually is random. Less than 0.3, less than 0.6, that looks good to me. Our win logic looks good. All right, let's do a YOLO. Let's do a YOLO.

I'm gonna go ahead and create a prediction here. Start prediction. Win or lose. Win, lose. All right, I'm gonna start a prediction here. Go ahead, call win or lose. If there's a tie, we just run it again. So if there's a tie, we run it again. So win or lose, if there's a tie, we run it again. I think this one was just 30 seconds. I didn't click the minute. Got like 10 seconds left to get in. All right, let's see what we got. All right, let's refresh the page. Three, two, one.

You tied, all right. All right, let's run it again. Let's refresh the page. You tied, we gotta run it again. Keep you in suspense. You lose. I feel like more people want to lose just because of the way that it was rigged up. Now see this is the fun part was was it rigged? I don't know you got to check the code It's you got to check the code. You're better at code you win more channel points All right. Let's go ahead and Do the prediction here prediction outcome? Choose outcome It was lose Complete the prediction Complete prediction. There you go. Hope you enjoy your channel points Who, uh, who YOLO'd the most, let's see, let's give me the, see details. Oh, pasta.

I think put up, put up, put a big chunk. I think 49 K went one way, a different, Hey, thank you for the sub. That's wild. Juggling, send me a whisper for somebody in science and software, sorry, software and game dev who you want to do the raid for. You were the 17th most indifferent, that's wild. All right, yeah, juggling biohazards did the guide the raids. So you get to pick some of your whisper as we get closer to the end of stream. All right, let's finish this up and then we can take our break. Actually, it's working. So we're working here. Let's take our break and then we'll do the loop. Let's take our break and then we'll do the loop. Cool. So five minutes on the clock. If you're new around here, we like to be healthy.

We like to take our breaks. And so we're gonna put five minutes on the clock. If you're able get up move around hydrate and then we'll be back be back in in five Different hey, thank you for the 10 gifts. That's us. That's wild. Thank you so much. Thank you for being here. Hope you're doing well All right five minutes on the clock different thank you Put some music on i'm gonna run some ads see y'all in five It's good to hear it in different. it. Yeah, Toto, it doesn't matter if you're in Germany, send me a whisper, you're good, I'll I'll ship it to you. I ship anywhere in the world. All right, folks, come on back, come on back. What? Indifferent, well, I'm away too. Get out of here.

Indifferent, hey, thank you for the 20 gifted subs. That is wild. Eternal, make sure you send me a mod mail About the resume review And mj builds a thank you for the hydration cheers to you And carsey, sorry, I saw I missed the two minute timer carsey the next time we do we'll add two minutes to it Sorry, I missed that All right folks come on back Different. Hey, thank you for the gift of stars. I appreciate that. Yeah, we got to do the, the Pokemon card too. We have time at the end of this class. We'll do it. If not, we'll do it during the best week ever. Well, can we get another cheap hydrate day? Yeah, we can do one soon. All right, folks, let's go back and finish this last bit. This last bit is the kind of, how can we do this multiple times with the loop. So let's go ahead and read the instructions here. Create a function that takes an array of choices, play that game X times, where X is the number of choices in the array, print the results of each game to the console.

I think this is pretty easy. For this one, I think we just have to use the loops that we've seen so far and just run the call that function multiple times. So let's go ahead and do this. Let's create a function and call this play game X times. Beautiful. And then we're going to pass in a number or just, we're going to say num just for numbers. So a number of times and let's go ahead and we can just do, or sorry. No, we need to pass in an array, an array of choices. Pass in takes in an array of choices. So this is there are parameters going to be an array. So what I'm going to do here is I'm going to go ahead and do array. Then we can just do for each. Actually don't like how it set that all up. I'm going to type it out for each. Cool.

And then in for each, I am just going to call the check win. So I know there's a choice coming in and I'm gonna call check win with that choice If that's all we have to do here, let me set it up Let me try it out and then I'll walk through how I think it's gonna work Play games X times. Let me pass in an array and a pass in rock. Then I'm gonna pass in paper And then I'm gonna pass in scissors Well So let's go ahead and save this. I'm gonna comment out this one, so we should see three win, loss, or ties inside of the console. So let's go see if this works. Let's refresh. And we got a lose, tie, lose. Damn! I can't get no love from the code that I wrote. Yo, my code hating today, damn. All right, let's run it, let's run it, let's run it one more time. Let's see. Come on. You can't be that bad.

Come on. All right, you win, you lose, you win. That's what I'm talking about. That's what I'm talking about. Some wins, some loses, some wins, you know, you got to get the wins in there. All right, let's take a look at what the heck is going on in here. So I am calling my play games X time function. Here's the function. The function takes in an array. And so this array is being plopped into the parameter of R. It's being plopped into the parameter of R, right? And so wherever I see R, it's our array that we just passed in, right? So you can kind of think of it as though this right here, I can just yoink it. This right here is now sitting right here, right? We passed in wherever we see R, it's the array that we just passed in, right?

So the rock the paper and scissors are sitting there now The cool thing is the 4-h is gonna run how many times how many times is this 4-h goblin going to run? Yo, funny, what's up, how you doing? Yeah that 4-h comes gonna run three times because there's three elements in the array and Each time it runs choice is gonna be that element from the array. So the very first time this runs, choice is what, chat? What is choice the very first time this runs? Yeah, it's gonna be rock. Rock is gonna be choice the very first time this runs. So what we're gonna do is we're gonna pass in rock into the check win function. And if we look where the check win function is, it's as though we passed in rock here. And so wherever I see player choice, it's going to be rock. So here's player choice of rock. And the other cool thing is, when we ran the check win function, we also asked this rock, paper, scissors function to run. So that ran as well. We got to come up here. We got to come up here to see what won From the rock-paper-scissors function.

So the really cool thing about this is not only we're using the rock-paper-scissors function We're also using the player choice function. We're also using our loop Spider lady a thank you for the bits All right. So let's take let's run this back again. Let's look at it All right So we we're running the for each once for each item in our array the very first time choice is gonna be rock we're gonna pass rock into the check win function. So let's go up and take a look at the check win function. We know that player choice is going to be rock. And so anywhere I see player choice, it's now rock, rock, rock, rock, right? And so before this check win function can see if I won or lost, it also has to figure out what the bot threw. So we come up here to see what the bot threw, and it's gonna either return rock, paper, or scissors. So in the check win, we wind up comparing rock to whatever came from the rock, paper, scissors function. And then we do our either you win, you lose, sorry, you win, you tied, or you lose, and that's it. And then we run this three times. So we should see three results. the first time we passed in rock, the second time we passed in paper, and the third time we passed in scissors. And so this check win function is going to run three times, which means how many times does this rock, paper, scissors function run?

Three. Someone said, Leon, what's a real world scenario where you use this many functions. This is how a lot of your programs are going to come together. This, this, this is. This is programming folks. This is it right here. This, this, this is, this is, this is the bread and butter. This is what we do all day long, because if we look at what's happening here, it's the core of what we said functions do functions are really good at doing one and then we can reuse them as many times as we want. So if we go back and look at this code, I think this code is really important. And I know the first time you see this, it can be mind blowing. It just seems like a lot, especially if like the array stuff's still not clicking. You got to come back to this. You got to understand all this code tonight. If there's one thing you come back and review, please make sure it's this turbo review because it just really is that important. Because if we look, we have one function that is determining a bot choice, rock, paper, scissors, right?

Then we have a whole other function that's checking to see if we won. And then we have a whole other function that's like running the game. This is how our programs are gonna be broken up into like individual reusable pieces. Because let's say I wanted to play a different game What if I wanted to play rock-paper-scissors lizard Spock? Right. I wanted to play a different game. I want to play rock-paper-lizard Spock Do I have to change? the playing of the game function No, I don't have to change the playing of the game function I might have to change check win a little bit, and I might have to change rock, paper, scissors a little bit, right? But I don't actually have to change the playing of the game. And so very quickly, we can start to see how this could be reusable to even play other games. What if I wanted to play coin flip? What if I wanted to play a coin flip game? Well, instead of it being a best out of three, it'd be a 50 -50, a heads or a tails. So I could change this to 50-50 instead of 30-30-30 or 33-33-33, right? And then my check win could just be a slightly different change and the playing of the game could stay the same.

So eventually we wind up breaking a lot of these larger projects into smaller repeatable instructions that are our functions. And that's programming folks. because the program is sitting down and thinking through, all right, how can I break this really large task into digestible steps? And how can I write these digestible steps in a way where they can be reused? And so that's the beauty of like programming. And so this is, I really liked this example because it's the first time you see all these different functions coming together. Cool. Alrighty, let's keep pushing, let's keep pushing. I hit the got hit the pose Writing this code a hundred times tomorrow. Hell. Yeah cyber. Hell. Yeah, that's what I want to see rip my weekend Already a raise chat. What are a raise please? What are a raise?

They're toasters nice My biggest enemy, it feels like that sometimes. Sometimes there's some code that I'm just like, me and you are not friends. There are just some concepts in programming that just hurt my brain and me and them are just not friends. So I feel it, if toasters are your worst enemy, that's okay. It gets a little bit easier with time. Alrighty, toasters. What the heck do I mean by toasters, right? All I mean is a data structure that can hold other stuff a data structure that can hold other data structures One thing that can hold multiple elements And so that's why I like a toaster because a toaster is one thing But it can hold the bread the toaster strudel the bagel the hot Pockets, right and we like to think of Bill Gates toaster because as our slots fill up we always get room for one more There are two ways to create arrays, this construct a way. We're going to finally see constructors tonight and then this will make a little bit more sense. But the way we've been creating arrays is using literal notation, meaning that we're using the actual square brackets. Now, when we declare arrays, we can plot values in and remember an array can hold any other value that we've seen before. It can hold strings, Booleans, numbers, other arrays. Anything is fair game inside the arrays. And the tricky thing about arrays is we start our indexing at zero, meaning that the elements start their slots. The toaster starts its slot at the zero slot and moves forward.

So the tricky part is if you're trying to get New York City out of this array, you would have to use its index of zero, not one. And the cool thing is we can use these indexes to get stuff out of an array. We can also use these indexes to put stuff into an array. And we saw something that could be really tricky is that you can have an array that gets set to another array. So you can overwrite a whole array using another array. And we also learned that arrays have properties like length and length will tell you how many elements are inside of your array. And then we learned that we could iterate through arrays, meaning that we can move through and pull the values out of the array, which makes them really powerful. Not only can arrays hold all this data, but we can pull data out and loop through it. So we saw a traditional for loop that we can move, that you use to move through our content, but we also saw a method that's built in and works with arrays called foreach. We just saw it a few seconds ago. Foreach will run once for every single element in the array, and the goblin that runs, it grabs the element, the index and the array every single time it runs. It's up to you, however, to have the buckets to throw that content into. If you don't have the buckets, you can't use it inside of your function. Cool. We also saw some methods that we can use with arrays.

And if you did the homework, you saw even more methods that you could use, right? even more methods that you could use to get the, to do stuff to our array. So we saw the ability to take something off the front of the array using shift. We saw the ability to take something off the end of the array with pop. And when you use shift and pop, do you actually mess with the original array? When you do shift and pop, do you actually mess with the original array? Yeah, you do. When you use shift and pop, you are literally changing that array. It's literally pulling it off the array, either from the front or the back. Beautiful. And then when we do unshift, we can put something on the front of the array. And when we do push, we can put something on the end of the array. So we can shift off the front, pop off the back, unshift on the front, and push on the back. And so when we looked at it, We had unshifted Dylon, and we had pushed Dylon onto the end of this best wrappers 2020. But then we also had map.

And map will run once for each element in the array. But the beautiful thing about map is that it gives us something different in the end. What does map give us for something in the end? What does map do for us in the end? It gives us a new what? it gives us a new array. And so you can see for this map, it didn't really matter what we were doing. We were taking in Dylon, we were taking in Polo G, we were taking in Dylon, it just didn't matter. The only thing this map spits other than the hot fire was Dylon. So it didn't matter. This map was gonna run three times and it's gonna return Dylon three times. And so best wrappers of all time, which is the new array, Would have had dylan dylan dylan and then to finish it up. We unshifted dylan onto the front We pushed dylan onto the end and if we were to console log the best wrappers of all time We have dylan dylan dylan dylan and of course by one beautiful Already, let's look at this space review Alright so we have space review and close these two inside of space review, we have a JS file and an index file. And this space review, I really only want you to do the first one. Let's just do the first one today.

We're gonna do just the first one. We're gonna save these other three for office hours. So if you want to do more array practice, come to office hours, you want to do some object practice, come to office hours, we're just going to do this first one. Create an array of numbers, sum all the numbers, and alert the sum. So I was going to put three minutes on the clock for this one, but we had, we had, who did it? We had Karzy, Karzyz, that added two minutes to the timer. So we're going to do five minutes on this timer to do the first problem. Five minutes on the clock. Go as deep as you can with this one. You can do it the old school way. You can create just a for loop and loop through and add all the values. We've done that already together in class. You could try using the reduce method. So this is a space review. And we're just gonna try and do the first one.

If you finish the first one and you like burn through it, try the other three. But we're going to go over those other three during office hours. So go ahead. Four minutes left on the clock. You got this dig deep. You got this. I A lot of dunzo's you do all the extra ones get out of here Google is your friend, Google is all our friends for sure. Definitely what some of these challenges. We're doing space review. Just the first one. What up, D'ambo? Arasi, yeah, you would have to code that in the original. dark. I was pulling up my, I normally have the activity feed like below on my left-hand monitor, but I like to have it on up top of my right-hand monitor and I didn't have it up. So I needed to pull it back up so that I could see, um, the like rewards and stuff that were coming in.

Yeah. So that's what I was like trying to like get it to work. I also keep my notes over here. So often I have to look at my notes to remember what the heck I'm doing. No worries. Learner. Well, he smokes. I did it. Hey, congrats. Are we talking about client alternatives today? We're going to do that on Tuesday and I'm going to push the deadline back a little bit. So the deadline is going to get pushed back a little bit, but that'll be part of best week ever reduce has been the most difficult for me to understand, but I just did it. Hey, let's go turn up. He's going to add two minutes to the deadline. Nice.

There were a lot of array methods in the reading, which do you think are the most important ones to know? I think all the ones that were in the reading are like stuff you have to know. They come up in a lot of problems. Never cheating to Google it. There's no such thing as cheating in learning how to code. All right, folks, come on back. Let's look at this together. All righty, come on, let's look at this together. Thank you to Casey for the extra few minutes on this one. All righty. create an array of numbers and sum all the numbers, alert the sum. We could do something like a for loop. We actually did this problem with a for loop before, but I wanna use the reduce method cause you all had to do the reduce, cause you all had to learn the reduce method and I think it gets a lot of folks in trouble when they first see it. So, let's go ahead and create an array of numbers, chat can you give me some numbers please? 42, 19, 77, 33.

All right, 33, I'm gonna do one more. Let's see, 57. All right, beautiful. So now we have an array of numbers. I wanna sum all the numbers. And so I'm gonna go ahead and create a sum. And I'm gonna set it equal to using a reduce method. So I'm gonna do nums.reduce. And the cool thing about reduce is it's a method that's gonna run once for every single element in our array, just like map will do it or for each will do it, reduce is gonna run once for each element in our array. and we're gonna pass in this arrow function here. And this arrow function is gonna run once for each element in the array, but reduce grabs a few specific things. Kind of like how at foreach, you have to grab the element and the index. Well, every single time reduce runs, you kind of get two values that are important. There's technically more than two, but there are two that are important. The first value is called an accumulator.

and the second value is whatever the current value is. So I like to say ACC for accumulator and C for the current value. And then what we're gonna do is we're gonna simply add our current value to the accumulation. So accumulator plus current value. And so what I'm actually saying here is every single time that this runs, I want to add something to an accumulation. And so the very first time this runs, I want the accumulator to start at a value. And so I want to have control over what my accumulator starts at. So you'll often see something like this, comma zero. And so with the comma zero, it's going to show my accumulation is gonna start at zero. And this is gonna be helpful. It's gonna be helpful for a lot of different things like type, type, like we're typing stuff. But for now, let's just say, oh, we're gonna start our accumulator at zero. All right. So the very first time that this runs, my accumulation, I'm gonna give myself some room here. The very first time that this runs, my accumulation is at zero and my current value would be what?

What would the current value be? the very first time this runs. Yeah, the current value would be 42. So my accumulator is zero and my current value is 42. What I'm gonna wind up doing is zero plus 42. That means that my accumulation, like we can just keep track of it over here, is 42. Then this runs again. and my accumulator this time is 42 and I'm going to add the current value which is 19. Oh, Bly didn't sign up for this. Didn't sign up for this. So that would be 19 plus 42 which is 61. So our accumulator is now 61. Beautiful. Bust out the calculators for All right, we're at 61. All right, the next time that this runs, the accumulator is 61 and the current value is 77.

So if we add 77 to 61, the accumulator is now 138. It's 138. All right, then we do this again. And now the accumulator is 138 plus 33. Right? So now the accumulator is going to be at 171. Beautiful. Now the next time that this runs, the next time that this runs, we're at 171, and we're gonna add the last current value, which is 57. So that means that our accumulator ends up being 228, 228, our accumulator winds up being 228, which means that sum winds up being 228. 228 so it's as though we cancel out this line and we're at 228 you want to know what's really freaking sad though hold on I'll show you what's really sad one second Is that I've been working through this book, the secrets of mental math, like I've been going through this hardcore, like I've been doing it, I've been going through it, but But there's there's something called stream brain and I've asked other folks about this. Stream brain is really true. Like when I'm streaming, I am way less efficient. I promise you, I swear I am way less efficient than I am like in real life. Like sometimes my typing doesn't work right. Like my fingers are hitting weird keys like can't do basic math.

So it's just like when you're on stream that it's like a different thing. I don't know. It's not like, and it's not like stage for it. Like I'm over that by now. Right? I'm over that by now, but it's just like some like basic tasks. Like I wonder if I could like juggle. I can really get at juggling. I wonder if I could juggle on stream. Right? It's because you're being watched. Yeah, I don't know. There's something weird about it. Yeah. All right.

So that's how reduce works. Reduce is going to run once for each element in the brain. Right? Reduce is gonna run once for each element in the array. And we can do whatever we want with that current element to an accumulator. So let's say instead of adding to an accumulator, we could subtract it from an accumulation. Or we could divide it from an accumulation or we could even multiply it to an accumulator And if we knew that we were gonna be multiplying to an accumulator, what should we change about this reduce? Yeah, we should probably start the accumulation at one just that we're doing like multiplying by zero each time now Now, this idea of like starting at zero or starting at one is like not a full truth. It's just helping us avoid some things that are actually really problematic when using reduce. What if we had like 42 in here and we tried to do the accumulation? Let's save this real quick. And we didn't console log the sum. Also we have to alert the sum. Let's go ahead and alert sum. And let's save this.

And I'm gonna get rid of the zero for right now. So let's just go ahead and save this. And I'm gonna run this in my browser. And you can see we got all of like this concatenation that was happening, right? And so we had all this concatenation that was happening. Oh, look at that, that's beautiful. Oh, that black range is lit. Ah, hold up. You know, I'm not gonna front. Pink Ranger always has the best poses. Every single time, Pink Ranger has the best poses. All right, so we have like that weird concatenation going on. I'm gonna put it back to zero and I wanna show you something. With the zero, let's refresh. It's still doing the concatenation, right?

So when I say like typing and stuff like that, it's, it's not like changing types for us, right? That's something we have to understand is that it's not like changing types for us. It's just helping us to say what we want the first type to be. Like, do I want it to be like a number, but I want it to be a string. And so in this case, we're saying, Hey, start the accumulation off as a number and not a string. which is if you're doing some code wars, this is gonna be something that's gonna pop up. So just keep that in your brain, that sometimes you're gonna want the accumulator to start off as a number, and you're gonna need this comma zero. And if you don't, you're gonna run into some tricky issues. All right. How could we fix this so that this would work? What could we do to make this work? Oh Folk man's been doing some code wars Yeah, I'm seeing some I'm seeing some folks pulling out the you get we got so we got some code war answers We got some code war answers in the chat. Hold on. Let's see this What We got we got code wars brain right now, I see y'all that's what we've seen in the past is that we've seen this right We've seen that we like, Hey, give us the number out of the current value. So if it's string 42, we would get number 42.

And of course this, this would, this would work. Right. But there's some, there's some like, uh, there's some code wars type answers that you're going to start seeing where this does the same thing in JavaScript. Just the plus sign will do the same thing. And then you can even like get rid of the, the zero by doing like that, which does the conversion on the accumulator and the current value. So it gets wild out here, folks. That's all I'm gonna say. So be careful on these code war streets. I'm gonna change this back for the poor souls that are running back this code. All right. Chris said, hey, what's up Chris? Code wars can get wild, it really can. All right, so reduce, I know reduce when you first see it is really kind of confusing, but I hope after seeing me like step through it, it makes a little bit more sense. All reduce is doing is setting up a bucket for accumulation, right? It's just setting up a bucket.

And then each time it runs, the current value grabs the value out of the array. And you can do whatever you want with that current value in relation to what you're storing in the bucket. The very first time this would run, we have zero in the bucket. And so we'd grab the current value, which is 42, and we throw it in the bucket. Now the bucket is holding 42. Then we grab 19 and we throw it in the bucket. So now it's 42 plus 19. And so that's all you're doing with reduce. And definitely eventually reduce gets more, you can do more complicated things with it, but it reduces down to a singular, in this instance, reduce reduces down into a singular what? What does reduce reduce down into? Kind of like how you have like a reduction when you're cooking. What did our reduce reduce down into? Yeah, reduce down into a singular number, right? And that number was stored in sum. So in our case, this reduced all the way down to, what was it, 228?

And then we alerted that sum, which was 228. So that's all reduce is doing. It's just reducing it down into one thing, right? And then we're alerting that thing. Cool. All right, let's... Leon with the cookie tears. Hey, I'll tell you what. So, uh, I was an associate at Harvard for a while. I used to teach a lot at Harvard. I always taught like, um, like front end web development and stuff specifically at the business school. And Harvard has like some of these like really cool classes. And one of the classes was a cooking class, but it wasn't like you like go and learn how to cook. They would just pull in all these like really dope people that are like in the food world. And so there's this really amazing fermented foods guy that works at Noma that they brought in.

I was so like, so like I would just go like to all these Friday cooking community things, like these Friday cooking classes. So I know all the terms, I got hella terms for cooking. Stuff that like I didn't know was like a legit thing to do. Yeah, that's my flexesaurus, I'll throw it out there. But yeah, so I got the cooking terms, I got you. All right, we're gonna save these three for office hours. So, if you want to get a little headstart on office hours, there you go. Let's jump back into the slides. Please talk about how that's like, that's how you do a photo. We need a mod photo. blah, if you're here, we need a mod photo. We need like, all of us in different poses. That would be amazing. I'm gonna ask y'all to take a photo. We're gonna Photoshop it up.

It's the best week ever, folks. Leon Power Rangers cosplay on stream, I'll do it. I'll do it. We got to think of like a goal. Yeah, I think of like a, oh, can we do a hold on? We can do this. One second. How do I set it up? We take our next break. I'll set it up. I'll set up. I'll set up a goal. And if we hit a certain number of channel points, I'll, I'll come to class in my power Rangers costume. There we go. For best week ever.

I'll see if I can get one in time. Is juggling gonna be part of it? Hey, see what you pay for, right? All right, chat, what are objects? What are objects? Everything, that is true, objects are everything. Specifically, they're a collection of variables and functions, right? that's all an object is. An object is just a collection of variables and functions. If you use the variable before and use the function before, you can understand objects. However, when we are tying our variables and our functions to our objects, right, we call them slightly different terms. What do we call a variable attached to an object? What do we call that? Yeah. Called a property, exactly.

And what do we call a function attached to an object? A method, nice. So we've already seen this, like objects, yes, they're a little weird. There's a little bit of more syntax we have to learn, some dot notation, some curly braces here and there, but we should already feel comfortable because we've already been using variables and functions in the past. So let's keep pushing. I like to think of a physical object when I first thinking about objects. And so the physical object that I like to think of is a stopwatch. What are some properties of this stopwatch? Don't give me the value. Give me the properties that this stopwatch could have. It could have a color property, a brand, a shape, a size, a thickness, yeah, a minutes property, a seconds property. So those are all properties. The values would be like black or round or AccuSplit. But the properties themselves are the actual attributes that make up the stopwatch. Water resistance equals true, exactly.

What would be some of the methods tied to this object? What are some of the methods tied to this object? Yeah, start, stop, beep, reset. These are all things that the object can do, functions, right, when we have functions tied to an object, we call them methods. Nice. All right, we talked about properties, talked about methods, and we've seen this. We've seen this last class, but let's take a peek at it again. When we are creating an object and we just use the curly braces, what type of notation do we call that? We have created an object, how? Using what type of notation? Yeah, literal notation. And today we're gonna see the constructor way of creating an object as well. So here we've literally created an object, then we can also create an object using a constructor, which we'll get to in a little bit later today. Now, once I've created my object, I can use what type of notation to add properties and methods? What type of notation can I use to add properties and methods to my object?

Yeah, dot notation. So here I have set stopwatch Current time equal to 12 So I've added a property of current time to my stopwatch and I've given it the value of 12 Here I have set the tell time Method using dot notation on my stopwatch. I've given I've given my stopwatch object a tell time method Now, how do I know that tell time? Right? Tell time is a method. How do I know it's a method? It's tied to a function. Exactly. Whenever you see it tied to a function, that's a method. Cause the function is tied to the object. Beautiful. And then down here, we have the object stopwatch and we are doing what with the tell time method? What are we doing down here with the tell time method? What are we doing with the tell time method there? We're calling it, exactly.

We're telling it to run. The only tricky bit here is that we are passing in stopwatch.currentTime, which at this moment is 12. It's 12. So it's as though we had passed in the number 12 into this tell time method. It's an argument, exactly. And so wherever we hash 12 into time, wherever we see time, it's as though I had actually put in 12. So if this ran, we would see printed to the console, the current time is 12. Now, when some people first see this and they see this string down here, they kind of get confused, but you don't have to be confused because you've been doing this over and over and over since the first day of JavaScript. You have all done using this method, calling a method, passing in a value into a method. You've used it pretty much every single class that we have ever done. Let's look at some of the code we literally just wrote. Look at this console log, it's the exact same thing. Hold on, let's take a look. We have an object, a method, and we're passing in an argument. It's the exact same thing.

If we look, log is a what? If you only look at log, what do you know it is? It's a method, and the method's tied to what object? Using dot notation, what is this method tied to? Console, console has to be an object. Look, console, we're using dot notation log. So that means we've been using console log this whole time, and the whole time we've been using objects, we've been calling methods, and we've been passing in arguments the whole time, folks. It's always been objects. It's been objects the whole time. Console's been an object this whole time. You've been using methods this whole time. So when you look at this, don't get tripped up. Don't get confused. You've been doing this since class one. You've been using methods tied to objects.

Same thing with our console log. It's a method tied to the object of console. You got, got, got. You got, got. So this is where I'm saying like, if you're like the, when I learned this, my mind was obliterated. Exactly. My mind was blown. I just, I just, like it just exploded on me, right? The whole time we've been using objects, we've been using methods, and we're going to see more and more of them. We're going to see them as we get further into today and we learn about prototypes today. We're going to see this taken to another level. I promise you your brain was going to maybe explode a little bit. You kept this from me. I promise I make your brain explode. But this is this is this is part one of it.

We're going to take a little bit further once we learn prototypes to see how objects are really doing all the work for us. Alright. What I would like for us to do is we're at the top of the hour, so let's take a break when we come back from the break. We're going to do our objects practice the lost galaxy practice, and then we're going to move on to constructors and some other ways to create objects, and then we're going to learn about prototypal inheritance and all the power. it brings to JavaScript. But before we do that, we're going to take a break. If you're able, please get up, move around, hydrate, take care of your hands, folks. Let your eyes focus on something that's not the screen. Take your five minutes. And when we come back. We'll get into this objects, practice SM zero to two zero zero to one one K. Thank you for the hydration. Cheers to you. All right, folks, have at it. You You're all right folks come on back come on back Simba camp maybe for the best week ever.

We have Simba cam come back. I don't know and we got some things planned I don't know All right All righty, let's go ahead and keep pushing here. When you will be going over the portfolios and projects, probably not this upcoming with the week after. Yeah, probably the week after. All righty, let's keep pushing. Objects. so far we've made objects one at a time, right? So far we've made objects one at a time. What if we wanted to make a lot of objects? Right? We're going to make a lot of objects. What if we, let's say we want to make a car, right? A car is an object. What if we wanted to make a lot of cars? What would we need?

What would we need? Yeah, we need a factory. If we want to make a lot of cars, we need a factory. And that factory has to be put together in a particular way that would help us spit out a lot of cars. Well, when it comes to objects, we have a means of creating a factory that spits out objects and so if we ever wanted to be able to create a bunch of objects we would need to build one of these factories. Now the first type of factory we're gonna learn about is something called a constructor. With ES6 like the newer versions of JavaScript we got some syntactical sugar that sits on on top of constructors that bring classes to JavaScript. Even though we have classes in JavaScript, underneath the hood is still constructors in something we call prototypal inheritance. And so today we're gonna see these constructors, a way that we can build something that spits out a bunch of objects. And then later on, we'll add some of the syntactical sugar to help us create classes. And so we start to kind of think about why might we need these things? We saw today that we can eventually start combining our functions to do different tasks. We had a function that could randomly pick rock, paper, scissors. We had a function that could check if we won. We had a function that could play a game.

What if we could package all of that stuff into one object? We could then maybe spit out a bunch of objects where we're just changing little pieces at a time. So we could have a factory that would spit out games and all we would need to do is change some of the things we pass in. We change something, we get a coin flip game. If we change something, we get rock, paper, scissors. If we change something, we get rock, paper, lizards, Spock. If we change enough things, we wind up with like, I don't know, let's say checkers. If we change enough things, we get chess. But if we're thinking about games, there's a lot of stuff that's similar across all the games. We're going to have winners, losers. We're gonna have the ability for a player to do something, for the bot to do something. And so that's what we're building up to. We started to see how we can combine all these functions together. Eventually we're going to want to be able to have collections of properties and methods that we can use and reuse and pass in different bits and bobs to get what we want. So let's start pretty, let's not start there.

Let's start with this idea of maybe we want to create cars. So we're going to need to create a car factory. Here's what my car factory looks like. Don't let the syntax overwhelm you at first. Here is our car factory. And what this car factory is going to do is enable us to spit out cars. Okay, it's gonna enable us to spit out cars. So this is a constructor. It's just a what if we're looking at it, it's just a what It's just a function It's just a Function and there are gonna be some kind of like quirks to it. We're gonna notice that the function has a capital letter That capital letter does nothing. It doesn't do anything, right? It doesn't actually do anything. It just helps us know that this function is a constructor. It's gonna be a function that spits out objects, right? It's gonna spit out objects, right?

And so, somebody's saying, why not a class? Because we're not there yet. Remember, we said classes are just syntactical sugar on top of constructors. And so we want to know what a constructor is before we get the classes, right? So when we're looking at it, it's just a function. There's nothing wild here. There's nothing, there's nothing, there's nothing kind of that makes this special. We give it a capital letter, just so that we know as humans that this is a function that's going to spit out objects for us. All righty, now, if we look, we're taking in a bunch of values. We have a bunch of parameters set up, and then down here, we're gonna call our constructor function. We're gonna call our constructor function, and we're gonna notice that there's one really unique keyword here, and that's the new keyword. This is where some of the power is coming from. This is what's gonna help us to create these objects. And so, we have our first use of the constructor to create an object. And we're gonna pass in Honda, Civic, Silver, and 4.

So, anywhere we see Honda, anywhere we see Honda, or anywhere we see car make, it's going to be Honda. Anywhere we see car model, it's going to be Civic. Anywhere we see car color, it's going to be Silver. And anywhere we see number of doors, it's going to be four. All right, and so what we wind up doing is we wind up setting all of the properties that are gonna be on the object that comes out of this constructor. So what we're gonna see is that any car that comes out of this constructor is going to have a make property, a model property, a color property, a doors property, a honk method, and a lock method. Every single car that comes out of this constructor is gonna have all of those properties and all of those methods. And so we don't have to, We don't have to rewrite this code every single time you wanna make an object. When we did our, when we did our, when we did our creating of our object, right? When we did our creating of the object, we didn't have this constructor, right? We had to do it all by hand every single time. So what I want to do is I want to create an object by hand one more time Before we jump to doing it with a constructor. So let's go back and open up objects lost galaxy and in our objects lost galaxy I want you to create a mouse object that has four properties and three methods, but I don't want you to use a constructor. I want you to do it old school by hand. Create a mouse object, give it a four properties and three methods.

Cool. This, we're gonna put, let's put three minutes on the clock here. Three minutes on the clock here. You got it, dig deep. Mouse object, four properties, three methods, do it old school by hand. You You can do the animal or the the the actual physical object that's up to you We're gonna go back to the constructor and cover this we haven't gotten there yet I combine the object in the animal Why stopwatch not camo case because it's one word yeah stopwatch is one word Got some dunzo's coming in All right All right, let's go. Come through, let's do this together. Got a lot of done's, proud of y'all. Well done, well done. Let's do this together. I'm gonna go with a computer mouse instead of a animal mouse. And I'm gonna use my MX Ergo as the mouse that I will be talking about today. All right, this is the mouse that has saved my thumbs and my hands. So I'm gonna use this MX ergo as my mouse. All right, so I'm gonna go ahead and use literal notation to create the object.

Let mouse equal, and I'm gonna use my curly braces. So now I have my mouse. Now I'm gonna set some properties on the mouse. What are some properties of this mouse? What do we think this mouse, what are some properties of this mouse? Brand, yeah, so let's do mouse.brand. We'll set that equal to Logitech. Mouse.color, so let's go ahead and do color equals black. Let's go ahead and do model, so mouse.model. I set that to MX ergo and we need one more. Wireless, okay, so let's do mouse.wireless and we'll set that equal to what? A boolean of true, nice. Doesn't always have to be strings, could be any kind of like anything you would normally put in a variable you can put in here. So I got a brand of Logitech, color black, model of MX ergo and is it wireless set to true beautiful all right let's do some methods what are some methods of my mouse yeah we got we got some clicks we got a right click we got a left click all right so let's go and do mouse dot left click equals we're going to set it equal to a function because it's a method. And we're going to go ahead and say, you click the left mouse button.

We're just going to console.log, left click. Cool. Let's go ahead and do mouse.right click. I'm going to set that equal to a function. Beautiful. And we'll go ahead and do our console.log and we'll do right click. Cool. And then what's one other one? Scroll. Okay, let's do mouse.scroll. And we'll set that equal to a function and console.log jump, jump, jump. You know, you know, you know, you know. So in, in Counter-Strike, we bind our scroll wheel to our jump. Yeah, so that's how you jump fast in CS Go. All right, so here I've built out a mouse object.

I gave it a brand, a color, a model, a wireless, a left click, a right click, and a scroll. However, wait a minute, hold up. I got this mouse, but I also have this mouse. Shit, I want to create a new object that is this mouse. What do I have to do? What do I have to do? Oh, shit. All right, well, maybe I can make it a little bit faster on myself by just copying everything. And then I'm just going to come down here and we got to do it all over again. I'm just gonna paste it. At least what I'll do here is I'll use some dev magic. And I'll say like mouse two, right? Mouse two. It's still Logitech. It's still black, but it's not MX Ergo.

It is the Pro Wireless. All right, it's the Pro Wireless. It still has left click, it still has right click, and the function still does the same. Oh. I got another mouse. Shit. I got another mouse. What do I gotta do? Oh. Again. Let's do some dev magic. Yeah. Yeah. Yeah. Yeah.

Yeah. Yeah. Yeah. All right. Mouse three. This time it's Apple. This time it's Silver. It's a magic track pad. Two yo, it's magic Trackpad to get out of here. I ain't got the first ones. It's the second one, you know, I'm saying But it still has left-click. It still has right-click But scroll is like probably very different Slide Two fingers Up That's how you scroll right by two fingers. It's a little different. I ain't jumping with this trackpad So, what would we call this code? This code is very wet, all right?

It's not dry at all. I'm having the copy and paste, I have 50 lines of code. 50 lines of code that should really, I should really have only had to set this up once and then pass my values in. I should have only had to set this up once and then pass my values in. And so that's exactly what a constructor does for us. And constructor enables us to set something up once and then pass the values in. So I don't have to sit here and set up a make, a model, a color, a doors, a honk, a lock for every single object I want to create. So I could, I could sit here and copy and paste and add a bunch of stuff and do it all by hand, or I could use a constructor that spits out the objects for me. And that's all it is. It's just, it's just a function that's going to spit out the objects for you. So there has to be an easier way. And that is constructors. It's a template, exactly. it's a blueprint to create this car, it is a template to create this car and so down here I am using the template to create a car object and what I'm doing here some folks get kind of confused with this what I'm actually doing is I'm just setting the properties on that object So any object that comes out of this function is gonna have a make property, a model property, a color property, a doors property, a honk property, just like I did over here with brand, color, model, wireless. But instead of having to type the name of the actual object each time, I just replaced it with this, right?

I just replaced it with this. And then whatever object is coming out of my constructor has those values. That's all it means for now. Eventually this will hold more weight for us, but all we're doing is just saying, hey, whatever object comes out of this function has this property and this property and this property and this property and this property. And instead of hard coding the name of the object, we just use this so that it gets added to each of those objects. So let's take a look at this. So let's copy this constructor and I'm gonna open up my inspect tool here. I'm gonna go to console and I'm gonna plop in my constructor, hit enter, and now my constructor is in memory. So now I can take this line here and I can create a car. Boom. And then you know what? I wanna create another car. And instead of having to copy and paste all of this stuff, like I did for my mouse, all I have to do is call that same constructor with some new info. And so now I write the constructor once, and then I can make as many cars as I want, right? I can make as many cars as I want without having to constantly, constantly retype everything.

And if we look, if we look at it, we can ask for Honda Civic, we can ask for Honda Civic. And if we look at what it gives us back, it gives us an object that has a color of silver, a doors of four, the honk, the lock, the make, the model. It's all there on the object that got spit out when we made Honda Civic. If we ask for Tesla Roadster, we get all the stuff that got spit out when we used it. We have the color of red, the doors of two, the honk, the lock, the make, the model, it's all there. So if we were to actually kind of do it line by line, we're going to create a new object using this make car constructor. This is the factory we are going to use. And we are gonna pass in Honda. We're gonna pass in Civic. We're gonna pass in silver and we're gonna pass in four. So wherever I see car make, it's now Honda. That means my Honda Civic object is going to have a make property of Honda, just like my mouse had a brand of Logitech. Then that means that my object is gonna have a model property that is civic. It means that my object is gonna have a color property that is silver. And it means that my object is gonna have a doors property of four.

It also means that my object is going to have a honk method of beep beep fucker, and it's gonna have a lock method of locked this number of doors. And so the cool thing is that this is referring to the object itself. It's referring to the object itself. So right now, the object that's coming out of this factory, what is its doors property set to? So, the car that's coming out of this factory, what's its door set to? It's set to four, we passed in four. So this would alert locked four doors. We can look, the doors property has been set to four, that's what we passed in. So we are going to alert four doors. And so this enables us to be able to spit any type of cars out of this factory without having to do more work. So basically parameters and arguments, they are parameters and arguments. The constructors aren't anything fancy. They're just functions. And we do it again. Here we're gonna pass in Tesla.

We're gonna pass in Roadster. We're gonna pass in Red. And we're gonna pass in two. Whoever I see, as I'm creating this object, it's gonna have a make property of Tesla. It's going to have a model property of Roadster. It's going to have a color property of red. It's going to have a doors property of two. It's going to have a honk method of beep beep fucker. and it's going to have a lock method of I locked and it's going to look at itself two doors. And so the beautiful thing here is that we can continually use this factory. We can use this constructor function that keeps spitting out more and more cars, but we don't ever have to wind up copying and pasting and doing it all by hand. We do the hard work once and then for each object we create, how many more lines of code is it? For each new car I want to create, each new object I want to create, how many lines of code is it? It's one. That's dry as fuck.

Let's go. Let's go. Let's go. This is huge. We can now create as many objects as we want and we don't have to use more lines of code. We just use one line of code. Dude, come on, let's go. All right, now, if we look in the inspector and we go to our console and we ask for the Honda Civic that we made already, we can see something very specific about Honda Civic. We can see the factory it came from. We can see that Honda Civic is an object that came from what constructor? What constructor did this Honda Civic object come from? Make car, exactly. So we can see the factory that this car came out of. All right, so any object can look at itself and it can see where it was made, right? It can look at itself and see its parent.

It can see its parent. It can see, all right, I'm Honda Civic, but I came from the make car factory. Now, let's say we made a bunch of Teslas, right? All right, we made a bunch of Teslas, but we forgot, we forgot, we made a bunch of Teslas. Let's say we made millions of Teslas, but we forgot to give them, like to make the radio work. Right, sorry, let's say Bluetooth. We forgot to turn on Bluetooth, right? We made millions of Teslas, this didn't happen, this is just an example. Let's say we made millions of Teslas, but we forgot to turn on Bluetooth. Back in the day, what did we have to do with cars? If the cars all left the factory and they didn't have something, what did we have to do with those cars? We had to recall all those cars. All those cars had to go back to the factory or back to the repair shop. We literally had to recall all those cars is to come back and get Bluetooth. The cool thing about Teslas though, the cool thing about Teslas is that they can update through Wi-Fi, right?

They can update across the cellular connection that each car has. So if we made millions of Teslas that did not have Bluetooth, we could do an over the air update and they would all get Bluetooth. Let's keep that idea in mind here. We made a bunch of Tesla's and the Tesla's when we made them did not have Bluetooth so if we look at the Tesla we passed in Tesla Roadster red too if we ask for the Tesla over here We can see that it has color doors honk lock make model But it doesn't have Bluetooth if I was to ask for Tesla Roadster model, it would give me Roadster. If I was to ask for Tesla Roadster Bluetooth, I get undefined. It does not have Bluetooth. So what Tesla can do is they can say any car that was made from the factory now has Bluetooth. they flick a switch and any car that was made from the factory now has Bluetooth so what Tesla is gonna do what our Tesla Roadster is going to do the Tesla Roadster is gonna look at itself right it's gonna look at itself and it's gonna say you know what I don't have Bluetooth let me check with my factory and it's gonna check its factory and if the factory has Bluetooth, then guess what? The Tesla Roadster now has Bluetooth and we can do this. We can do this. I'm gonna go ahead and do make car prototype Bluetooth equals true. Here we go. Make car prototype Bluetooth equals true. There we go. So now if I ask Tesla Roadster, if I look at Tesla Roadster, does Tesla Roadster have a Bluetooth property at all?

Look, look, look, look, don't guess, don't guess. Look, does Tesla Roadster have a Bluetooth property at all on itself, on itself? No, there's no Bluetooth there. The Tesla Roadster itself does not have Bluetooth. However, look what happens when I do this. It has Bluetooth, what? We just saw the Roadster itself does not have Bluetooth, yet when I did teslaroadster.bluetooth, I got true. so what happened is that the Tesla looked at itself it looked at itself and it said hey you do I have Bluetooth and the Tesla looked at itself and said you know what I don't have Bluetooth but what I should go check is my factory and it checked the make car factory and it said hey make car do you have Bluetooth and the factory is like, yup. And so since the factory had Bluetooth, Tesla got that over the air update and now it has Bluetooth. So Tesla didn't have it, but it went up to the factory to get it. And now it has it. This is how inheritance works in JavaScript. This is called prototypal inheritance. What we're going to do is whenever we're trying to see if a object has a property or method is that it will check itself first. It will always check itself first.

It's always gonna check itself to see, do I have that property? Do I have that method? And if it doesn't, it's gonna look at its factory or wherever it was made. Hey factory, do you have that property or method? and if it has it, it'll use it. I like to think about this as like, let's say I don't have a car. I can go up my inheritance chain to see if someone has a car. So if I don't have a car, I can go to moms and say, hey moms, do you have a car? And if my mom says no, I can go to grandma and say, hey grandma, hey grandma, do you have a car? And since grandma has a car, guess what? I got a car. Grandma's got a car, I got a car, right? So if I looked at myself, I didn't, but I went up my inheritance chain. I went up to ma, hey ma, do you have it? No.

Grandma, do you have it? Yes. So since grandma has it, I can use it. Like I got a car. Same thing's happening with our objects. The object is checking itself. Then it's checking its constructor. And then it can keep going up this prototype chain all the way until we get to the global object prototype. Remember how I said every single thing is an object? Well, it really is. And everything inherits from this great, great, great, great grandparent of an element, right? This great, great, great grandparent of an object we inherit things from. And so we see this over and over and over again. We've seen this so many times. It's quite interesting.

We can do something like this. We could do something like this, is where we could say let num equal two. And then I could alert num.toString. What would happen here? If I ran this code, ignore this stuff up here, ignore that. I ran this code, what the heck would happen? Yeah, we would wind up seeing alerted string two. Why would a number have a string method? Doesn't make any sense. Why would a number have the ability to make it a string? What if numbers didn't actually have the ability to turn itself into a string? What if this whole time we have been going up the prototype chain, the inheritance chain, to find toString on the global object prototype? So the number checks itself. The number didn't have toString. The number checks its factory.

Hey numbers, do we have this toString? if it doesn't have it, it keeps going up the inheritance chain until it finds the global object prototype. Let's Google this. Let's see if we can do this. Global object prototype. All right, object, object prototype, let's start here. All right, if we look at the object prototype, this is the global object prototype. If we look, we can see all these methods that are built into it, right? That are built into it. And if we look, wouldn't you know? Wouldn't you know there's a two string on it? So, even if our number did not have two string, even if it's factory did not have it two string, it can go all the way up to the global object prototype. And since on the global object prototype is this ability to turn things into a string, the numbers have it because every single thing in JavaScript is an object and they all inherit from the global object prototype. So all this time we've been using methods and properties and some of the time the thing we were using the properties and methods on had no idea what the heck we were talking about But it went up the prototype chain until it got to the global object prototype and then it had access to it We've gotten got we go get but at this point might have gotten got just a little bit a little bit Cool So if we were to look at this We can even see this on the Tesla We can even see this on the Tesla. If I do this right here, Tesla Roadster doors, how many doors are on the Tesla Roadster?

If we go here, if we ask for teslaroadster.doors, we get two back. So two is a number. Does Tesla Roadster have a two-string method? I can see a honk and a lock, but I don't see a two-string. Yet, if I was to do this, if I was to go ahead and do Tesla Roadster doors.toString, we get that string two back. We just saw that Tesla Roadster does not have a toString method. So it went and checked what? Tesla Roadster didn't have toString, so where's the first place it looked? Where's the first place it looked? It's factory, right? It went to mom, went to the factory, it went to mom, it went to the factory. And it said, Hey factory, do you know anything about this? Like two string and the factory is like, I've never heard of it. And it's like, ah, shit. I got to go ask grandma, yo grandma, you ever heard of this, uh, this two string thing and grandma was like, of course, of course I've heard it too straight.

I've been using it for years. And then grandma shows us how to use two string, right? Shows us how to do two string, and we can turn our number of doors into a string number of doors. It's prototypal inheritance. It's this idea that even if we don't have, even if our objects do not have that method or property, we can check the constructor, and then we can check any of the prototypes that we're coming from. And what we'll realize is that there are actually a bunch of prototypes. There is an array prototype, there's a string prototype. So if we look up, I'm just gonna Google it. Array prototype, should probably throw MDN on that. Nah, they got us, look at that, right? If we look at array and we look at the array prototype, look at all this stuff that's on the array prototype. All the stuff we've been using, filter, for each, push, includes, map, push, pop, reduce. They're all here. These are how the methods are tied to the arrays. And then if this function, sorry, if this array prototype doesn't have it, it can go up to the object prototype.

It's all chained together, folks. It's all coming together. It's all coming together. Even the array has all of these methods on it. But if that, it doesn't exist on the array, it goes up to the object. And we saw that the object has all those other methods on it. Let's look at number. Can we see, can we see number? Let's see. Let's do string prototype. You see all these methods on string prototype. We saw search earlier, right? Split, search, repeat, replace. So all these things are just sitting on the string prototype. Beautiful.

So I know it's a lot to take in, But hopefully, hopefully your mind got blown just a little bit the first time. It's like, once I started seeing these like gears start to turn, right. It, it made my mind kind of broke a little bit. We've been bamboozled. Yeah. So this idea that everything is an object, a lot of the methods and the properties that we've been doing are just things on this prototype chains that we're like inheriting to use. And so as we start to learn more about objects, we'll play more with all the stuff we learned tonight. We'll kind of see the properties and the methods and all the stuff that we can use. And even if the object that we create doesn't have it, we can inherit it from other places. Cool. All right, where are we at? We're close to the ends here. Cool, getting close to the end here. We do have, let's see, we do have a let's code which is to make a StreetFighter object, right? It's to make a StreetFighter object.

And so if we look at this real quick, let's see, StreetFighter. We have, I'm going to do this. Yeah, we got enough time. We're going to do this. I'm going to put five minutes on the clock. I want you to utilize the constructor we just learned about. The constructor we just learned about. You can literally copy and paste, right? I want you to use the constructor we've built to make a Street Fighter constructor. Basically, I want you to build a video game constructor. If you've never played Street Fighter, I want you to build a constructor that spits out a video game character that could fight okay, let's go ahead and Set up a five-minute timer. We'll do four minutes four minutes four minutes Four minutes to build me a constructor or a strife Street Fighter Instructor, there we go. Four minutes on the clock. How about you got this dig deep when I go over it together and then we'll read Sorry. Somebody said, for the Apple mouse, would a different scroll function be on the prototype?

And no, I think if we were building an actual mouse constructor, we would have a scroll type and it would either be like wheel or track pad. Uh, Mac, the global object can change to, to impact all of JavaScript. Yep. That can happen. Control alt funk. Hey, thank you for the gift of subs. Thank you for being here. Minutes, so if she got this dig deep Got this folks, minute left. Prototype is just a fallback source of properties and methods. That's all it is, just a fallback source of properties and methods. If the object doesn't have it itself, it checks its prototype, often from the constructor that it was made from. So if the object doesn't have Bluetooth, it checks its prototype to see if it has Bluetooth and it can go up the prototype chain until it finds what it's looking for. Why two different words in the constructor, this.make equals car make? Because when I make this make equal make, people get confused and don't understand that the right-hand side is a parameter and the left-hand side is the property being set on the object. So if I was doing this for like my personal time, I would do them the same thing, but I like to make sure people can see that one's a property and one is like the actual method.

Yeah. Iron, we're gonna have to get a little bit deeper into how JavaScript runs in the browser to answer that question. All right, folks, come through. Let's do this together. All right, we got this. We can do this. All right, we're gonna make a constructor for a street fighter character. So I'm going to make a constructor here. So I'm going to need a function and I'm going to say, make, I'm just going to say SF character. Right? And then since I know this is going to be a constructor, what do I have to change about this? Cause I know it's going to be constructor. What should I change? Capital M, exactly. Now, does adding that capital M do anything?

Nah, it doesn't do anything. It just lets us and other developers know that, hey, this is going to be a constructor function. That's all it is, just so that we know. You're all in on a little secret now. Come here, let me tell you. So when you, get in here a little closer. When you see a function and it starts That's gonna be a constructor function. Now you're in on it. You understand? Cool, we're good. A little secret between us. All righty. Now, we want to be able to take in some things that are four properties and three methods. So what can a fighting game character do? I'm gonna say punch, kick, Block, and I definitely want to do like a special move, like a special move.

I like taunt, let's do taunt. Taunt, and then special move. Cool. Beautiful. So we got like four properties I think I'm gonna pass in, and then I'm gonna have like four, I'm gonna have the three methods. Yeah, all right, so let's go ahead and do the properties. this.punch equals punch. Now, I was just talking about this where a lot of times you're gonna wind up having the property on the method be the same name as the parameter. What you have to realize is that the right hand side, the right hand side is actually the parameter and this is just the property that's going on the object. So this.punch means that the object is going to have a punch property. And I just need this to be the same as this so that I can grab the value coming in. So that's why you're gonna see a lot of the times that the property and the parameter are the same. All right, so let's do this.kick equals kick. This.taunt equals taunt. And this.specialMove equals specialMove.

Beautiful. So now we have all the properties being set. We can pass in the punch, the kick, the taunt, the special move. Let's go ahead and create some methods. So this dot, what are some methods that we should do? No, I'm going to change this to something else and change this to jump now, change it to saying, I'm going to, I'm going to call this like saying like, or catchphrase catchphrase. There we go. Catchphrase. I'm going to change this to catchphrase. Beautiful equals catchphrase. Beautiful. All right. We have a greeting. We have throw. We have special sound.

We got some other stuff coming through. I like it. All right, let's do our, let's create a taunt. The reason I changed it, because I want it taunt to be its own thing. So I'm going to do a function. And I'm going to say, let's go ahead and do console log. I actually want to do text so I can use the keywords here. I'm going to say, you can't handle my, and then I'm gonna use special move. So I'm gonna go ahead and use my template literal here, my bling syntax here, and I'm gonna do, say, this.specialMove. So my talk could be, you can't handle my special move. And then I'm gonna have like a this.winning, and I'm gonna create a function, and I'm gonna say a console.log here, And I'm going to say, ha ha. And then I'm going to say my catchphrase. There we go. So when I win, I'm going to say, ha ha. And then my catchphrase.

And then we need one other one. This dot, what should we use? What's one more? Give me one more. Dash, okay, dash. I'm just gonna, I'm gonna console log. Whoop, whoop, missed me. Whoop, missed me, that's the dash. Whoop, missed me. All right, so now I have a constructor. Whatever comes out of this constructor should have a punch property, a kick property, a catchphrase property, a special move, a taunt, a winning, and a dash. All right, let's go ahead and try this. Let's do like, let's use like an actual character first. It's going to do like Ryu, and we'll set Ryu to new make SF character. We didn't like pass in like name or anything name probably would have been a good property, but we're going to do like I'm going to say like high punch high kick and catchphrase Does Ryu have a catchphrase?

Oh, no. We'll just, we'll, we'll use scorpions and get over here. We know that's not theirs, but we'll, we'll just say that that's Ryu's for now. Uh, and then the last one is special move, which is, uh, this is the U, right? Hadoken, hadoken, there we go, cool. So now we have Ryu, and Ryu should be a character that has a high punch, a high kick, a catchphrase of get over here, and then a special move of hadoken. All right, so let's go ahead and run this. So I'm gonna save it here. I'm gonna open this in the browser. Bring it on. Oh, this is Worldwatch here. This was a good bring it on. Actually, I'm gonna retract that. It was an okay bring it on. All right, so if we ask for Ryu, we can see that we get a make street fighter character, which is good.

We actually, it worked. So our constructor worked first try. And so we can see that it has a catch phrase, a dash method, a kick of high, a punch of high, a special move of Hadouken. It has a taunt and a winning method. So let's go ahead and try using Ryu. And let's try doing taunt. And I got to use my parentheses because it is a method. Boom. You can't handle my Hadouken because it pulled out that special move from Ryu. That worked. Um, let's go ahead and try not taunt, but what was our other one? It was winning. So let's try winning. Beautiful. Aha.

Get over here. So now it's using the get over here. Beautiful. And let's do the last one, which was the. Actually, let's just ask what was on there. So let's see Ryu. We can see that we had a taunt, a winning, and a dash. Let's do the last one, which was the dash. Ryu.dash. Beautiful, whoop, missed me. Beautiful. All right, so we got a bunch of properties and methods all being tied to the constructor. Something I would like for you to do is try making some additional characters on your own. We'll go over all of this during office hours. So office hours, we're going to do some more of the array methods that we skipped.

We're going to redo building the constructor and we're going to build a couple more street fighters with the constructor. And then we're going to go over prototypes again. So we're going to go over the prototypes. We're going to see how prototypal inheritance actually builds. And then once we can get through this, like once we get through this on Sunday, we're good. We can start doing APIs and a lot of other fun stuff. So thank you for putting in the effort, putting in the work, for being here, for making your brain meld just a little bit. I hope you learned a lot. We have some homework that I wanna talk about right before we do the raid. And we have juggling biohazards. They used all their channel points to guide the raid. So let's let's make it. Let's make it count for them your homework You have some videos to watch and you have some intro to github to do from Microsoft Please make sure you use the link when you do the intro to github it's really important that you have that done by Thursday so that we can spend all day Thursday doing git and github and Having a lot of fun. So I'm really excited for the best week ever. We're gonna kick it off on Sunday I will see you all on Sunday for review.

Let's do our raid. We're going to respawn press up This was juggling biohazards. They spend all their channel points to make this happen. Let's go ahead and raid that channel It looks like they're doing some some unity game development, alright folks, I'll see you over there Have a good rest of your night doing up the raid Hope you had fun. Hope you learned some stuff Alright folks, see you over there and hopefully see you Sunday. Peace.

End of Transcript