Introduction

Yo. What's going on, everybody? Good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome back. Welcome back. Good to see everybody. Hold on, my mic almost fell off. We didn't scare everybody away, that's good. Super review, we had some troopers. Glad to see that you're all still here. You're all doing well.

Hopefully you got some rest and recovery in XD. Hey, thank you for the gift of subs. I'm still tired. Oh boy, oh boy. Hey, welcome in everybody. Welcome in. So as always, I'd like to start off with some questions. Some questions, some questions. So the question of the day is, would you rather have to wash your hair with dish soap or your dishes with shampoo? So hair or dishes in chat for me, hair or dishes. What? I thought this would be a land side. Everyone's saying hair. I thought this would have been easy dishes. That's I think this is the most surprising one to me so far.

Wow. I've done both. I've been there. I've tried it because the the the the the dish don't it's so sudsy. How could it not? How could it not do something cool? All right. All right, now it's getting a little mixed. We're getting some dishes. We're getting some hair. All right. It kind of flipped a little bit when I said it. All right. All right. I like it.

Okay. We're 50-50 now, which is still surprising to me. I thought this would be a landslide. All righty. As always, we want to give some folks a few seconds to get in here. Tonight, folks, is all about Arrays. If you're new around these parts, we're doing a free 30-week software engineering bootcamp. We've gone through HTML, through the CSSs, through the beginnings of JavaScript, and now we're starting to get to some fun stuff. Tonight's all about Arrays. You might've got, if you did the homework, the very last kind of like, the last little hint was Arrays in the Codecademy work. So hopefully you've seen it a little bit tonight. We're going to really digest them, break them apart, try and get to the nitty gritty of what they are and how they work. Hopefully with some fun examples and then some good good code to work through together. And then your homework for this week is again another large block of reading. All right, everybody didn't leave, we're good.

Another large block of reading. We are doing more JS way, just one chapter of the eloquent JavaScript. I know, I know, I know, but we got to get used to it. We got to get our reading in. We got to get those muscles going so that when we're on the job and all there is is dusty documentation, we're ready for it. Cool. All right, let me go ahead and go to little Leon here. Let's bring up the slides. All about a raise today. And let's start off with some questions. While we give folks an extra second to get in here, you got some questions, maybe I got some answers. Is it all right if I'm trying to do active recall with the readings but still not retaining 90% of the info, I do make Anki's? Well, that's where it's gonna come in. You're not expected in the end of the reading to have it all locked away in your brain and it all makes sense. That's impossible.

There's no way that that actually happens. And so the active recall unlocks just a small percentage bump over reading, right? Then it is the active, it is the active recall gives you a little bit of bump, but then it's the spaced repetition which really makes it sink in, makes it stick. So if you are actively recalling, you're getting that first big bump, But the real meat and potatoes is the is the spaced repetition if you're not doing the spaced repetition That's where you're gonna lose a lot of that that learning juice and then remember the reading for us is kind of like the first Pass we review everything that's important in class So I always want you to give it the good old 100 devs try but if things aren't locking in That's what you come to class for I see a lot of people saying, are we early? Uh, I actually forgot to put that into discord, but in the U S we have daylight savings time. And so we are an hour actually, we're, I guess we were, we're an hour early today, right? So if folks weren't here on Sunday, they don't know that we are an hour early. Uh, Oh, hope they follow us on Twitter. See, that's why you should follow on Twitter folks. You you always get the you get the real scoop on Twitter But I did put it on Twitter. It was on discord. You did get the email Hopefully you're following on one of those three and you see in a snap to it and come join us. But yeah, I'm sorry I always forget about the daylight saving types. Like we got a global community I got to be a little bit more on top of that. I'll add that to my Google Calendar so we don't forget You got got we did you got got now it's gonna be an interesting game to see how How much her attended swings today of folks that are being affected by daily savings time.

I'm so sorry. I completely forgot. Oh Yeah, and the bill just passed now. It's permanent in the u.s. The daily saving time is now permanent So we can look forward to this happening again next cohort. Yay Oh boy, sorry our international friends. All right, so let's get into it. Let's talk about our agenda today. We're gonna take a quick peek at functions and loops again, get some practicing with our functions and loops. We're actually gonna see a new kind of loop today called a for each loop. We'll get into detail what that is a little bit and we're gonna learn about a new data structure called arrays We're gonna learn how to use them what they are how they work. We're gonna learn how to iterate through them And then if we have time we're going to learn about a few methods or Extra kind of functions that come along with arrays that we can use to make our lives a lot easier So that's the goal for today Then we come back on Thursday, we'll review our arrays again, and then hint at objects. So the homework that is starting today, which will be due next Tuesday, has a lot of reading. The quicker you can get through that reading, the better off Thursday will be, and definitely Tuesday will be. So this reading's very important.

It's gonna help you solidify stuff about arrays, and help you solidify things around objects, which are two really meaty topics We're going to be spending a lot of time on If you haven't already go ahead and check in please yeah, actually I would really appreciate a check-in today We got a you got a like and retweet to all the folks That are that are still expecting this death to take another hour before we start. They see it We got to bump that up in their timeline, please Today's the most important check-in of the year. Make sure we bump into the timeline of folks that are not here on time because of the daylight savings time. So I appreciate it. Go ahead and check in, give it a like, give it a retweet. Yeah. Beautiful, thank you. As always, the link is always on Discord. It's always, if you're just following on Twitter, you'll see it. Beautiful. All righty, thank you for checking in. If you want to be fancy, remember, best clip or funnest clip gets a special color on Discord. Currently there are two exclusive individuals with the golden yellow color on Discord. They're the only folks that have it. They're the envy of all the other 100 devs.

So best clip I'll always share a slide out after each class and go ahead and submit your clips in that slide Oh, I know folks know how to game slider a little bit. I don't just pick the top one I picked the best one and best can either be like best educational content or funniest whatever you want to choose and Best clip it's the fancy yellow golden color now we also have the funnest portfolio and the funnest project from our project night and so I left open the slidos until today so if you still want to submit your funnest project and your funnest portfolio for a chance at that lovely golden color and some some hundred devs merch go ahead and make sure you submit that one and and we'll announce those winners on Thursday. I also opened up a Slido for our Super Review. So if you had some good clips from the Super Review, feel free to share them as well. Also, speaking of the Super Review, I downloaded it, I edited it, I uploaded it, it made it onto YouTube today. it was hands down the, the best video I've put on YouTube so far in terms of like engagement, the number of likes it got was super, like it was, it just blew the every other video I've ever posted on YouTube out the water in terms of like likes and views that it immediately got on YouTube. And then I got the comment, Leon, it stops at seven hours. And I was like, what do you mean it stops at seven hours? We went nine and a half hours. What do you mean? The YouTube video stops at stops at the very old review. And then I went back and I looked at it. Something happened when it was rendering like the, the, the video must have been rendering from premiere that it said nine and a half hours on, on the actual size of the video file, but around seven and a half hours, the video file kind of just like stops and I'm just like, I'm like, stop mid talking. And so I uploaded it and then YouTube somehow has magic to know that even though the file says nine and a half hours, there was only seven and hours of video. And so that's what it put up on YouTube.

And so shout out to, I forgot, I should've wrote down the comment, the person that made the comment, but if you wrote, if you got that comment, thank you. I read all the YouTube comments, uh, but thank you for that comment. I took it down. So the video is down. I have re-rendered it, it's looking good, it's gonna be uploaded and it'll go live tomorrow. So for folks that wanna watch the review on YouTube, it'll go up tomorrow, just know that there were some glitches. I had a lot of people asking for it and I promised it since we stayed over 1500 throughout the whole entire Sunday, it'll go up tomorrow and I apologize. But it was pretty sad because it was like, it was the best engagement we've ever gotten on a YouTube video and I was like, fuck, I gotta bring it down. So I'll be up tomorrow Work You had a lot of reading and some stuff that I asked you to do over the past week what I really want to see are your drafts the drafts of your portfolio the drafts of your of your proposal and Contract put those in a Google Doc for me and then any of the tasks that you did that you have code for from the reading, I want to see that too. So you can throw those in code pens, glitches, whatever you want to use, replits, and throw those in the form. So whatever you got, I want. Don't worry about if you didn't have a chance to submit it. You know, the homework was kind of nebulous this past week. So what I want is the drafts of your professional, sorry, your portfolio and your proposals. And then I want any of the task or JavaScript that you wrote for the reading But throw those into a code pen doesn't have to be pretty doesn't have to be neat and I want it Screenshots of code Academy throw them in there.

Yeah, give me whatever you got I want to see what you did what you got done and how well you did and How far you got through it? So give me what you got upload it for me, and I'll take it all Networking folks, this is the week, gotta start taking that networking seriously. We talked about kind of ramping up a little bit, ramping up a little bit, right? Now you want to be hitting that stride of three networked individuals already in tech and two coffee chats a week, folks, you got to be hitting that stride. I'm going to give you one more, one more grace period of a week where it doesn't matter. But after this week, boy, does it, you got to hit those three individuals. You got to hit those two coffee chats. Yeah. All right. So what you got to do is start finding those events. Go back to our class on networking, go through the things we said to do. Start finding your way of networking, right? Your way of networking. Everyone's gonna have a different process, a different strategy. Some are gonna like meetups, some are gonna like conferences, some are gonna not wanna see humans at all and wanna talk through text.

Find what works for you. This is the last week to ease into it. After next week, I'm checking it. Wanna see who you met, when you met them, how you met them, and make sure you have those connections. Cool. Use the sheet. I'm gonna start asking for your sheet starting next week Yeah, so use the sheet make sure you're adding your connections there Make sure you're going through that process and then next week when I start asking them for those sheets with your homework Met a senior full-stack developer at networking event last weekend. She said she's going to refer me. Hey, let's go That's what we're talking about folks. That's it. That's how it works It's not the, it's not the, it's not the coding ability. I gotta keep saying it's not, it's not just the raw coding ability. It's the networking that helps you get the jobs. And every single person that's here right now, there is a strategy that would work for you to network. I really do mean it.

For folks that are introverted, there are things that will feel more comfortable that you have to explore. For folks that are extra voted, don't burn out, don't go too hard on the networking. That's another big thing. Some folks come out the gate flying, they're doing 10 coffee chats a week, and then two or three weeks in, they're fizzling, so be careful, there's a balance, three and two. Three network connections, two coffee chats is a good pace to keep for the rest of the program. How do we manage while working full time? You got to be effective with your time, right? That's that's that's a it's definitely a challenge It's definitely something that that's harder to do The beauty is that a lot of networking events happen after normal work hours. There's also a lot to happen on weekends There are lots of organizations. You can volunteer with on weekends. There's a lot of different ways to go about it So depending on your unique situation, you're gonna network differently But you got to realize it's the biggest thing you can do that's going to change your outcomes when it comes time to getting a job. Yeah, exactly. Cal Milk said you're normally networking with people who have jobs, so they'll be at around five too. Exactly. So if you're working a normal nine to five, then you'll probably be networking with folks that get off at five too.

Is an eight gigabyte laptop good enough for web development? Hell yeah. Been offered four jobs while doing ride share, just talking about the bootcamp. Yeah, I'll tell you what, my Uber drivers always make the best students. The folks that do the ride sharing, I don't know what's in your DNA, but I look at all my best students from RC, I look at all my best students from a lot of students coming out of 100 devs It's always the ride-share folks that are eating everybody's lunch. So keep it up No Alrighty code challenges We're getting ready to start our code challenges daily Daily code challenges in the beginning. I want you to start trying code wars will eventually share challenges that I want you to focus on, but I need you to start adding a daily code challenge into your life. I always have my students start off with code wars. If you've never done a code wars before, it is just a coding challenge. Now, when you go to code wars, you're going to see some doozies of some problems. you're gonna see some problems that make your brain spin. I don't want you to start with those types of coding challenges. On Code Wars, there is specifically a fundamentals track that covers the basics of JavaScript. Please, for the first week or two, do not do any problems that are not in that fundamentals track. They're too hard.

You'll burn out, it won't go well for you unless you've kind of gone ahead a little bit on your JavaScript reading. So you wanna make sure on Code Wars you're on the fundamentals track. The way Code Wars works is that each coding challenge has a ranking. It goes from eight to one, and then it's kind of like you're a black belt and you do like harder problems. So eights are actually the easiest on Code Wars. It seems odd, you think maybe like one would be the easiest, But no eight is the is the easiest and then you go down the seven six fives, right? So make sure You are doing Right, make sure you are doing Level eight Fundamentals code wars if you're doing anything else, they're too hard Cool. We also have a clan on Code Wars. So if you join the clan, you'll be able to see all of your 100 devs folks that are solving challenges as well. It's exclamation point clan in chat. It'll give you the link to join. It's like when you set up your account in your settings, you can add a clan and we have 100 devs clan That you can join and that way you can you can even compete against other folks to see how many you get done I will say a lot of folks that were high up in the in the clan last last cohort They did well when it came to the job search. So if you want that extra little bit of fun, you can do it It's just excellent. It's just the octothorpe 100 devs is the clan name. Yeah Yeah with the hyphen Leon or comm slash twitch Here, I'll actually throw it in chat because I know it'll speed by.

All right, here we go. There we go. That's it. It's that full thing. It's the octothorp100devs-leoninworld.com slash Twitch. It's like the actual full thing. I'll put it in the slides for next class. Yeah. Alrighty. I need you to start today. Yes. Today, every day, every day you do a, you do a coding challenge. Saturdays coding challenge, Sunday coding challenge, Monday coding challenge, Tuesday coding challenge, Wednesday coding challenge, Thursday coding challenge, Friday to coding challenge, right? It's a daily coding challenge. You need this practice, right?

For right now, you're just gonna be doing them on Code Wars and just submitting them there and taking your time with it. The fundamental rule with any coding challenge, I don't know why people don't always say this from the very beginning. If you look at a coding challenge and you have no idea how to solve that coding challenge, like you don't even understand the words that are being said, just look at the solution. Just look at the solution. That's it. Look at the solution, understand the solution, type it all out, type it all out, Add it to your Anki make sure you never forget that solution again and move on to the next day It's not cheating It's learning What when you are first starting out with coding challenges it There's there's nobody there's there's nothing There's nothing to be gained by stressing out and then going and crying in the bathroom. Coding challenges for a lot of folks invoke some really strong emotions. Who gives a fuck if for the first two weeks you look at every single solution? It just doesn't matter. If you could look at the challenge and there's like, there's no way I'm doing this bad boy. Just look at the solution and move on. Just doesn't just like make sure you understand it. You retype it out a few times, you add it to your Anki, you will gain more. Right. You will gain more.

From looking at the solution, typing it out a couple of times, adding it to your Anki, then you will from sitting there and freaking out for, for 10 minutes. Just doesn't, it just doesn't make any sense. Right. So I hate when people first start doing coding challenges and they sit there and, and just freak out for an hour and then they don't learn anything. Use your time effectively. Now, once you got a couple of them underneath your belt and you're starting to feel good, there's a difference between like having no idea and maybe I need to spend 20 minutes on this. Right, there is that difference and you gotta find it. Sometimes you're gonna look at it and be like, I might have an idea, let me try a few things, like let me play with it a little bit. and then if you spend 20 minutes, you stop. 20 minutes is all you ever spend on a coding challenge in the beginning. All you ever spend on a coding challenge in the beginning is 20 minutes. 20 minutes. If you have given it a solid 20 minutes and you don't have a solution, you stop, you look at the solution, you type it out a few times and you add it to your Anki, make sure you understand it before you move on. You will get so much more out of looking at a solution, internalizing it, understanding it, adding it to your Anki than you will for struggling for another half an hour on the problem. So in the beginning, you look at a problem and you're like, there's no way I'm getting even close to this.

Just look at the solution. Once you start feeling a little bit better and like you understand how the coding challenges work, give yourself the good old 100 devs try, spend 20 minutes on the problem. If after 20 minutes is not making any sense, then you look at the solution, you internalize it, you figure out why it works, why it didn't work. You type it all out, you add it to your Anki. This is a way better way to get good at coding challenges than just banging your head against the keyboard for an hour Cool, we all we all on the same page All right now Every day when I say every day, please every day you're gonna you're gonna come towards the end of program and you're like Leon Can you be a reference? I'm gonna I'm gonna let me say alright show me show me your code wars, show me your coding challenges, show me your Anki, all these things. When you want my help as we get further on, I'm gonna wanna see that you've been doing it daily. Eventually, the other reason why we do coding challenges is because once we get to Git and GitHub, which is a place that we're gonna store all of our code, we push daily, we push our coding challenge every day. So to a recruiter or a hiring partner what they see is that you are writing code every single day Which helps you stand out against other candidates that are not So the the coding challenges are two purposes one they make you a lean mean interviewing machine But they also help you pass that sniff test of, are you actually a software engineer? Because the recruiter is going to look at your profile on GitHub and see that you push code every single day. Which brings us up to an amazing announcement, an amazing announcement, an amazing announcement, but it's not the best announcement of the week folks I got an announcement for you I didn't put in the slides I don't want folks to ruin it it's a great announcement it's an amazing announcement it's a it's a wonderful announcement but the best thing I've ever announced since I started happens on Thursday. So I don't want to I don't want to downplay this announcement because it's a beautiful announcement. It's an amazing announcement that the hype should be real. But Thursday, folks. Thursday, I got something bigger.

Anyway, the big announcement is the reason that we do our coding challenges is so that we become lean, mean interviewing machines. It's so that we push our code every day to get hub. So that when recruiters are looking at our profiles, they see that we write code every day. We push every day. It's going to help you stand out against other candidates. Now we push our code to get hub. so an amazing sponsor for our upcoming class on github would be github and boy do we got it folks Alright, so Microsoft will be sponsoring our Git and GitHub class. They're giving away swag, wonderful Microsoft swag. For those that don't know, Microsoft now owns GitHub. So they're coming, they're sponsoring our Get in GitHub class. There's gonna be lots of swag. We're giving away laptops. We're doing it big, folks. So when we learn Get in GitHub, we're doing it with style. So huge shout out to Microsoft for sponsoring, for coming back to support our community.

I can't wait. It's coming up in a few weeks. Oh, yeah, lots of lots of fun People got excited Wavy 13, thank you for the gifted subs layer cake. Hey, thank you for the 10 gifted subs and spider lady Hey, thank you for the thousand bits spider lady. Thank you for being here wavy 13. Thank you. I appreciate that and layered cake Hey, thank you turn up Cool. So that's, that's an amazing announcement. We're going to do get in GitHub in style. We're going to have swag to give away tons of raffles. We're going to have laptops to give away. We're going to do a big, so that's coming up. But like I said, folks, that's just the beginning. Just the beginning. This is shaping up to be a really good week, folks.

We had the super review on Sunday. I feel pumped. I'm ready. We got a brand spanking Sponsor coming through for the getting github class Just getting started though. Just getting started Mara thank you for the hydration. Cheers to you What if let thank you for the five good subs, thank you for being here Alrighty, let's keep it pushing folks You So I got you going but remember Client you got to get that client on the line contract due date March 31st You don't get God we go get You did it hey, it's been amazing folks been posted in that celebrations channel folks been posted on Twitter getting clients left and right Got time folks. You got time go back watch our class move through it make the motions It'll happen Already got three secured get out of here If my client wants an NDA how do I share a contract Um, send, that's a good question. Does the contract fall underneath your NDA? I would not have it fall underneath the NDA. Get SpaceX next. Alrighty. Remember, paid client, 31st, you got this, dig deep, just the contract, don't need nothing more. Just the contract. You don't have the work finished. Just the contract.

Alrighty. We had our super review, we got sponsors on deck, we got another amazing announcement on Thursday and now we're gonna start to turn things up just a little bit. Things are gonna start to go a little bit faster. You got a lot of stuff that you're kind of juggling now, right? Gonna juggle a lot more now. You got class, you got reading, you got daily code challenges, is you got networking, you got paid clients, you're building up folks. I need to take a second and think about all the amazing stuff that you're doing. Like two months ago versus now is wild. It's wild to see all of y'all progress through this, to go from just wanting to learn how to code to knowing what the heck HTML is, knowing a little bit of CSS, maybe gotten a little JavaScript in your back pocket, out there networking, trying to get paid clients, trying to do coding challenges, like what? Come on now, you gotta be proud of yourself. I'm proud of you, you gotta be proud of yourself. I don't care if you're super behind, super ahead, it doesn't matter. Think about where you were a month or two ago Versus where you're going now It's huge. It's huge. It's huge.

We're gonna keep it going Gonna keep it going. I'm gonna keep pushing and I keep moving Keep the flow going Remember, it's a marathon not a sprint whether you do it in 200 days 300 days. It doesn't matter. It's are you moving forward? Are you moving forward? That's it Are you different today than you were yesterday? Are you different today than you were a month ago? Are you different today than you were two months ago? Because if you are, you're doing it right. It's a marathon, not a sprint. We're gonna keep turning it up. We're gonna keep juggling a little bit more, but we're moving forward, folks. I don't care if you think you're a little behind, a lot behind, a few little ahead, little far ahead. It doesn't matter. We're moving forward.

That's all that matters. Alrighty, let's get a little review in here folks a little review and then we're jumping into a race It's a big meaty topic. We need a lot of time to go through it. So let's let's jump into this programming a Computer will do what you tell it to do That's it. The computer will do what you tell it to do so a program is a set of instructions that you write to tell a computer what to do and And a program or programming is simply the task of writing those instructions in a language that the computer will understand During the super view we talked a lot about kind of building out from that base Binary to some simple logic from that simple logic to a language that the computer can somewhat understand Building up even further to a language that we can understand and that language being JavaScript We write JavaScript so that ourselves and other engineers can understand what the heck we mean. We can translate the things that we need to have happen into a language that makes a little bit of sense to you and I, right? And we're gonna keep adding a little bit more and more to JavaScript as we go along. We learned about the big four, the variables, the functions, the conditionals, the loops. You could do pretty much whatever you want with those four, But we're going to add a little bit more on today. We're going to add a new data structure called an array Next we're going to add a new data structure called objects. We're going to keep tacking on more and more to our JavaScript goodness Alrighty JavaScript has a specific syntax that spelling and grammar rules that we've seen We've seen a lot of weird keys when it when it comes to JavaScript and tonight We're adding two more square brackets so we can create arrays literally we'll get to that what that means in a second but we're gonna keep adding a little bit to the syntax a little bit more we have to remember good stuff to put into your Anki syntax deserves a spot in your Anki deck. Alrighty variables chat when we're creating variables there are buckets where we put data we have two steps the declaration step where we create the bucket and we have the assignment where we put a value into that bucket and we can do that declaration and assignment at the same time here we declare a variable called age and we assign it the value of 25 we've been there we've done that we also learn about conditionals and conditional syntax when we look at a conditional, we can have if, else if, and else. How many else's can we have? In one conditional block, how many else's can we have? Ooh, people, people are sharp today.

Yeah, we can have one else. We can go to as many else ifs as we want, but only one else. Else is the default, right? It runs if everything else above it was false. So we can have our if, We can have as many else ifs as we want, but then one else. Beautiful. When I say danger of assignment versus comparison, what the heck do I mean? Assignment versus comparison. What's the danger there? Yeah. Can we just take a moment to pause that the number of folks that now know that this versus this is dangerous. If you know why this versus this is dangerous, that's some wild stuff. That's some wild shit. Could you imagine, can you imagine just two months ago, living life not knowing this was alarm bells and this was okay? We outside folks, we inside, we online, that's wild.

Remember assignment is where you're adding a value to a data bucket, you're giving a variable its value. Comparison is when you're trying to compare two things to each other. Does three equal four? Nah, that's not true, beautiful. We can compare multiple things inside of our conditionals at the same time. So in this case, if your name is Leon and your status is Bollin, you get a wink at the camera. We can also go ahead and do or, So where both of these must have been true. We could also do or, where only one has to be true. So if day is Saturday or day equals Sunday, then we know it is the weekend. Beautiful. Functions, chat, what are functions? What are functions? I got the big bottle today folks, I'm hydrating. Ah, they're just instructions, yes. Functions are sets of instructions.

They're simple sets of instructions, they're reusable. The beauty of using functions is that you can declare your function once and call it as many times as you want. So you do one little bit of work and then you can reuse that work as many times as you want. We've often call these the building blocks of our programs Is it whiskey no, it's a it's I wish I had a big jug of whiskey this size get out of here this is iced tea, it's a Zero sugar sweet tea It's pretty dang tasty. I like this. I Like this zero sugar sweet tea my great my great-grandmother always made iced tea And I know it's weird, but this tastes like her iced tea. I don't know why, but it does. So I drink it all the damn time. Alrighty. Our functions have a very specific kind of syntax, right? Granny using Stevia. I don't think she used Stevia, but I don't know why it does. That's what it reminds me of. Oh, our functions have a very specific syntax. Chat, what is this?

What is that? What did I just circle? There's a very specific name I'm looking for. Ah, there we go. The function declaration, beautiful. And then, hold on, hold on, hold on, hold on. All right, what's this? What did I just circle? No peeking. Yeah, that's our function call. And we call mom to argue. So whenever we are passing, sorry, whenever we're calling our functions, we are passing our arguments. And whenever we are setting our function declarations, we're setting up our parameters. Beautiful. Now, when I make a function declaration, where does it go?

When I type out a function declaration, I save, I run my file, where does it go? Like the browser executes the JavaScript file, where does it go? Oh, Bob134, got it. First, into memory, yeah. Our function declarations go into memory. We can think about our memory being a physical place, and right now there is a space in memory called name that has all the instructions that would be inside of this function. Beautiful. Here is an actual function with actual parameters, a function declaration with actual parameters. Word is our actual parameter here. Down here, we have our function call. We're passing in our argument of hello. That argument of hello goes into Word. Wherever I see Word, it's actually hello, and we alert hello. Beautiful. Loops.

Chat, what are loops? We're getting our spaced repetition here tonight, folks. What are loops? Fruity I didn't I didn't get the job at Fruit Loops my body is now your communion and eat from me, eat from me. Some people don't know where that comes from, but if you do, we could be friends. Bird up, exactly. Alrighty, loops enable us to do some action a certain number of times, right? Enables us to do something a certain number of times. There are three main kinds of loops you're going to run into. Legalized ranch, yeah. There are three main types of loops we're going to run into, for, while, and do while loops. But tonight we're actually going to see another kind of loop, a for each loop that comes specifically with arrays. So there are more than just those three in JavaScript. The different kind of loops really just offer a different way to determine a start and endpoint to your loop. Alrighty.

The first kind of loop that we've talked about was a for loop. Let's quickly run through the syntax again. Let's quickly run through the syntax again for a for loop. Then we'll look at a while loop and then we're gonna do some practice before we take our break. So here's a for loop. We have it set up so that we have our increment that we're starting here at one. Today we're gonna start seeing increments It's maybe starting at zero for a very specific reason in a few minutes. So here our increment starts at one, or our counter starts at one. Our counter is called I in this situation. So our counter starts at one. We're gonna check to see if our count is less than five. If our count is less than five, we do what is inside the curly braces. And then when we are done, When we are done, that count is gonna go up by one. So, the very first time this runs, our count starts off at one. So we say, hey, is one less than five?

It is, so printed to the console is what the count currently is at one. Then it goes up by one. And now our count, or i, is at two. Is 2 less than 5? Well, indeed it is, so then we print 2 to the console and we go up by 1. Now we're at 3. Is 3 less than 5? It is. It is indeed. So we do what's inside the curly braces and we print 3 to the console. Then we go up by 1. Is 4 less than 5? It is indeed. So 4 gets Let's print it to the console and then we go up by one. Now we're at five.

Is five less than five? Is five less than five? No, five is not less than five. So we stop, we're done, we're finished, you're cut, it's over. All right, we stop. Beautiful. So this loop would print one through four and then be done. If we want it to include five, what change could we make, chat? If we want it to include five, what change could we add? Yeah, we can change this to a less than or equal. And now we would get one through five with five because five would be less than or equal to five. Beautiful. Another kind of loop that we just solved, we actually hadn't worked through yet, is a while loop. A while loop is very similar. You have your condition, and then this loop will run as long as that condition is true.

So you can see up here we start count at zero. So in this case, zero is less than five. So we would print to the console zero, and then we would add one to zero. Sorry, add one to our count. Now we're at one. Then we do it all over again. Is one less than five? It is. We print one. We go up to two, two, three, four, and then we print four. We go up to five. Is five less than five? No. So we stop. So very similar, except that we're seeing the increment happen inside of the loop.

So the reason why I don't often start my students off with while loops, why do you think? Why do you think I start them off with for loops and not while loops? It's a lot easier, I think, to get into an infinite loop. If you forget your increment, right, or you do your increment wrong, you're gonna be looping for a while, folks, until kingdom come or your computer crashes. And so I always like to start off with for loops because you're kind of forced to think about your counter, your end condition and your increment a little bit more than you might in a while loop, but you'll see both. And as you start doing your coding challenges, there might be some scenarios where a while loop makes a little bit more sense than a for loop. Right now you're like, why would I use one over the other? It's just about when you start and stop. And so as you start getting into code challenges, pay attention to when you might use a while or a for, cause it'll come up. We'll get some practice with that in the future, but for now just keep an eye out for it when you're doing your coding challenges. Alrighty, let's get some practice in and then we're gonna take our break. Actually, you know what? Let's take our break and then come back and do the practice. Let's do that. Let's take our break and then we'll do the practice.

So I'm going to put five minutes on the timer. We'll come back from the break and we'll do our practice. So let me bring up the timer here. Beautiful. I put five minutes on the timer for us. Please hydrate. If you're able to get up, move around, let your eyes focus on something that's not there in front of your screen. I'm gonna run some ads so new folks don't see them. Pick your five. I'll see you then. You You All right, folks, come on back, come on back. All right, everybody, we got the daylight savings crew coming in. Have you seen the new Batman? Nah, I haven't gone to the movie theaters yet. That's that's like a step too far for me.

I'm just starting to go outside again. Like movie theaters is like a whole other Like a whole other thing All right, let's get in here I've done more stuff outside in the past like two weeks than I have in like a year One of my favorite comments on their videos was, I've lived in New York my whole life. I've never seen any of these types of people or these types of characters. And the top comment was because you weren't outside. I love it. I love it. It's so true. They were not outside. All righty folks we got some work to do we got some work to do in the starter code for today if you're new Scorpio welcome if you're new and you want the materials for the work that we're about to do it's on our Discord so exclamation point discord and chat our Leon the world comm slash discord Agree to our rules and there will be a follow along materials channel and in the zip code from today There will be a bring it all or nothing Challenge and in there and that JavaScript file is some work for you to do we got some variable reviews some function review some conditional review and Maybe your first real coding challenge with loops We're gonna go over it all together after five minutes that we're jumping into a raise folks So I'm going to put five minute on the timer, bring out some tunes. You got this. It's the bring it on all or nothing. JavaScript practice, your variables, your functions, your conditionals, your loops, we'll go over it together. If you're stuck about it, this is the bring it on all or nothing. Just did this after reviewing the Meggie review, that's awesome. King Berlin it's exclamation point discord in chat give you the link you weren't finished your soup yet oh no This is Javascript.

Do I ever use C++? I do. A little bit. I've been trying to get into some more competitive programming and people tend to use a little bit of C and C++ in that. So purple glerp it's in the slides and also on discord to the link for your your work always in the uh always in the follow-on materials channel message will be the link to submit the homework how do i declare a variable wow we did a great super review on sunday so you We could definitely watch that class and learn all the basics of what we're doing tonight. Or you can just wait three minutes and we'll go over it together. Do you recommend cracking the coding interview book? I actually recommend their GitHub repo that has all the stuff in JavaScript. That was, that's going to be way more useful if you're following along with this course. So yeah, I like it. Definitely just check out their GitHub repo though. Briar, that's actually pretty common. It goes away with time. the more practice and time it goes away. I declare variable.

What level of Code Wars is good to start interview hunting? If you already have full stack skills in a portfolio that shows it, once you can reliably do sixes, you're more than enough ready. Remember, interviewing has nothing to do with how well you interview, but also your networking. You're networking into, into jobs, not coding your way into jobs. Always plan. That's cool. Risky. Koala. Why do you need it? That's interesting. Augie it does, it does work. Sorry to hear Galaxy. Macro Code Wars is ranked from 8 to 1 and then like you do really hard ones and so sixes are where they start to get a little bit more difficult and folks that can reliably do those they're more than enough ready. Last one is hard. That's the challenging one.

We'll go over it, though. Mikey Dubs, we're going to go over it together when we get to get in GitHub. Don't worry about that now Alrighty folks, come on back. Come on back. Let's go over this together Got some folks coming in done. That's pretty cool. That was a tough one to come finish the finish already Let's take a look at these together Well Declare a variable assign it a boolean and alert the value. What the heck is a boolean? What's that chat? What's a boolean? True or false, exactly. It's another data type, just like we have numbers, we have strings, we also have booleans in JavaScript, true or false values. So declare a variable, let duck have a duck equal true, and then I can alert have a duck, beautiful. Beautiful. So I declared a variable called have a duck.

I set it value equal to true. I signed it the value of true. And then I alerted that variable. So I should see if I was to open this in my browser, the value of true. Let me make sure I'm here. Let's go. Let's open this. And beautiful. We see true pop up in the browser. Declare a variable and reassign it to your favorite color and console log the value All right. Let's declare a variable let Favorite color equal chat. What's your favorite color? Chat what's your favorite color? Purple, green, green's kind of, green's kind of coming through a little bit. Purple's in there too.

Oh, this is a close one. Green. Can we do a poll? Let's see, question. Favorite color. I saw blue, green, red, purple were the dominant at one so far, and oddly, like pink. All right, started a poll. This is for high stakes, folks. This is for what we assign our variable to be. Alright, blue's coming in at 34%, green's pulling in at 30%. Red took a nosedive to eight. Alright, I think blue's gonna pull it out here, at 35% of the vote, to green's 27%. If red and purple wanna join in with green, we might be able to overtake blue, But it seems like it seems like the blue is going to have it here. All right. The polls come into an end with that blue wins.

Wow. I was close. Beautiful folks. Lou wins it. Favorite color, red. Could you imagine blue? All right. Declare a variable. Oh, we got, we'll start it off at red. We'll start it off at red and then we'll reassign it to the favorite color. Come on now. VS code, favorite color. Start off as red. And then we'll reassign favorite color, be the winner. equals blue.

Beautiful. And then console log. What the heck? It does not like colors, folks. So what am I doing wrong here? What am I doing wrong here? I assigned it red and I assigned it blue. And now I'm going to console log the value. What am I doing wrong here? Ah. What is what would JavaScript try and read red and blue as right now? Would it try and read them as right now. Yeah, it's gonna look for a variable called red and a variable called blue. What we really want is them to be strings. So they need to be wrapped in quotes.

So I'll put red in quotes and then I'll put blue in quotes, beautiful. And now we have declared favorite color, assigned it red, reassigned it to our favorite color, which is blue, according to chat, and then we console log it. Beautiful. Functions. Create a function that takes in four numbers, returns the sum of the first three numbers, divided by the fourth. Return the result and and call the function. All right, so let's create a function here called sum three and divide. And we know that we're taking in three numbers. Let's just do N1 and sorry, four numbers and N4. And then we're gonna return the result. So let's do our return keyword and let's just use parentheses that we don't have to worry about PEMDAS. And we're gonna sum the first three numbers. So n1 plus n2 plus n3, and we're gonna divide by n4, beautiful. And then it says to call the function. So let's call it.

Sum three and divide. Let's pass in our numbers here. Let's do 10, 20, 30, and then five. There we go. Now, once I call this, what's gonna happen on line 16? I call it, it runs the function, what happens? Poofs, exactly. The result will get returned to where it was called, where it was highlighted, right? It's gonna get returned to here, but since we haven't created a variable, We haven't like console logged it. We haven't alerted it. It'll vanish in the thin air. Beautiful. All right, create a function that takes in two numbers, console log the first number to the power of the second, and then call the function. So we're gonna call this function more power. I will do a little do lowercase power.

There we go. And we're gonna take in two numbers. So we'll say robot and duck. Beautiful, robot and duck. And then we wanna console log the number to the power of the second. So let's go ahead and set up our console log. And inside this console log, we have to do one number to the power of other. What have you all been using? Ah, I see a lot of math.pow in the chat. Math.pow, and we can pass in two numbers. So we can pass in robot and we can pass in duck, beautiful. Lots of other ways to do this as well, right? But JavaScript comes with a lot of stuff baked in. One of the things that comes baked in with is this lovely math object. And we get this lovely pal method that's tied to it.

And we are able to then pass into values that I'll take one and do it to the power of the other. Did a whole custom loop for it. That's okay. That's cool. These things come up, right? The reason why I love Code Wars is because if you didn't know this, it's going to come up in Code Wars. And then you add it to your Anki and then you start to build up all these little extras that are built into JavaScript right there are other ways to do this. You can you can use your the up carrot you can use the the looping way but built into JavaScript is this math object that comes with so much useful stuff the ability to round the ability to get random numbers the the ability to do a lot of really nifty stuff, but you might not have ever come across it unless you came across it in the reading, or you're doing your Code Wars. And when you're looking at the solutions of Code Wars, you go, oh, they use this thing, and then you can add it to your Anki, and that's the beauty of the Code Wars early on. Yeah. Cool. And then it said to call the function, So more power. Beautiful. And we'll pass in four and two. Conditionals create a function that takes in a Boolean and a string.

If the boolean is true, alert the string. If the boolean is false, console log the string. Interesting. All right. Function, alert. What is it? Yes, it said alert or console log. Alert or log. All right, alert or log. And there's a lot of different ways that we could do this. Let's just use our normal function syntax. We're gonna start seeing arrow functions later today. We can actually do this all in one line, which is pretty interesting. We're gonna take in a string. So we're gonna take a string and a boolean.

So I'm gonna call this, let's give it a, let's do B and str, beautiful. And let's just do our normal conditional syntax. Let's not get fancy yet. We'll look at a ternary maybe though. but let's not get fancy here. Let's go ahead and do if, right? And we'll say if B, right? Do I need to actually, do I need to look at anything? Like, do I need to do if B equals true? Do I need to do that? Ah, no, because it's truthy. B itself will be true or false, right? So remember, what we're looking for is for whatever is inside these parentheses to be true. And if B is already a Boolean, it's either gonna be true or false. It's enough, we don't have to do the comparison.

It's already gonna be true or it's already gonna be false. But there's this concept called truthy and falsy. You don't know what truthy or falsy is. I want you to add that to your homework for tonight and tomorrow. come on Thursday knowing what truthy and falsy means. It was in the reading. So if you didn't do the reading, you got a little catching up to do. Come on Thursday knowing what those two things are. Beautiful. So we take an if B, we're going to go ahead and alert the string. Beautiful. Otherwise, we'll go ahead and console log the string. Beautiful. Now, in JavaScript, there are some other things that you can do. We can get fancy with it.

So let's go ahead and do this real quick. There's something called a ternary where if we do this. There we go. This is kind of the same thing as our conditional. I know it's a weird syntax, but it's the same thing as our conditional. All right? What we're saying here is look at your Boolean. If this is true, you do what's on the left-hand side. If this is false, you do what's on the right-hand side. It's the exact same thing as doing a conditional. It just, you do what's on left of the colon if it's true, and you do what's to the right of the colon if it's false. Isn't that neat? Yeah, so it's kind of like a short form. So let's go ahead and comment this out, and let's do something else down here. So let's go ahead and do a function expression.

Right? So we can eventually get to the point where we are doing something like this. Look at that, folks. This one line is the same as this function here. So we're going to see arrow functions a little bit later tonight. You saw some of them in the reading. Hope we got a little practice with them. But the cool thing here is that we have the name of the function called alert or log. We have our parameters, B and stra. So one for the Boolean, one for the string. We have our arrow syntax. Some folks call that fat arrow, but it's an arrow syntax. And we have a ternary, right? Beautiful. And so the Turner is same thing if this is true you do the alert if it's false the console log would run There's a lot of ways right?

There's a lot of ways Right a lot of ways to to to do a lot of these challenges and the beautiful thing is As you start to do more coding challenges, you see different ways of solving the same problem. You see that you see different ways of solving it. And so right now, if you've never seen this, this is OK. All right, this is OK. But as you do more. Right, as you do more challenges, is one of the best things you can do is look at other people's solutions, right? Look at other people's solutions. That's the first thing I'd like, I solve it. I don't care how well I solve it, right? I don't care how well I solve it. I look at other people's solutions and I go, whoa, you did that in one line. What is this ternary thing? What are these arrow syntax things? and so for me the The coding challenge is one part trying to solve it and the whole other part right the whole other part is Looking at how other people did things and trying to understand So as you start to do these coding challenges another benefit you get is all these new ways of solving the same thing Yeah, cool I don't like the parlance for that, so I'm not gonna use that. I said it once, I think that's enough.

We're gonna say big arrow going forward. Alrighty, loops. Let's get our last little practice here before we move into arrays this evening. Create a function that takes in a number. Consologue all the values from one to that number. but if the number is divisible by 3, log fizz instead of that number. If the number is divisible by 5, log buzz instead of that number. And if the number is divisible by 3 and 5, log fizz buzz instead of the number. Now this is a very famous coding problem. It is one of the most common interview questions you will ever see. It was a very common problem that everyone used to have in their interviews. And then around, I don't know, like eight years ago, people were like, everyone asks this question, we're not gonna use it. And then like three or four years later, everyone was like, wait a minute, we're gonna actually ask it again. because if you don't know how to solve FizzBuzz, not only do you maybe not know how to code, but you definitely didn't practice or study for this interview. So it came back with a force.

And one of the biggest privileges I have as an educator during my day job and 100 devs is I see hundreds of interviews, right? Like you'll go through the interview process and see a few. People that interview others, they have their process. I see hundreds, if not thousands of interview processes across hundreds of different companies. And when I tell you people ask Fizzbuzz, people still ask Fizzbuzz. It's coming up like 10 to 20% of the time in interviews at some stage. And it's not always exactly this Fizzbuzz, but it's somewhat in the ballpark, right? So know that it's still alive and well, it's still something that you should absolutely have in your back pocket. And it's a really good practice because it combines pretty much all the stuff that we've learned thus far. So let's take a few seconds to break down fizzbuzz. The idea of fizzbuzz is that you're going to count from one to some number, right? And you're going to do one, two, and then if the number is divisible by three, you'll print fizz instead of that number. Then four, if the number is divisible by five, you'll print buzz instead of the number. And you'll go all the way up until there's a number that's divisible by three and five, which will then be fizzbuzz. And so it's a loop, right?

You're going one through some number. You're having some conditional logic to see if that number is divisible. and if it is, you do the word instead of the number. So chat, how do I know if the number is divisible by three or if the number is divisible by say five? What am I using here to determine if something is divisible by? Modulus, nice. Remember, modulus, right? Modulus. Check, check, check, check, check. Hmm. Sorry, one Second, are captions working? Let me check real quick. Check, check, check. Hello, hello, hello. For some reason, captions just stopped.

I think I didn't give it the right permission. Hello, hello, hello. Check, check, check, check, check, check. Check. All right, one second. I just want to make sure we get these working. Okay. All right. Okay. Check, check, check, check. There's a reason they went down. When we take a break, I will try and get them fixed. Sorry for folks that the captions went down. I think it's just a permission issue for some reason, but they were working and now they're not. So I'll get them back up during the break.

Sorry about that. All right, so we talked about the idea that if we want to check if something is divisible by a number, we use modulus, right? So we're going to have a function, a loop, conditionals, and modulus all in one problem, right? So let's go ahead and try and figure this out. All right. So let's create a function. We'll call it fizzbuzz. And it says that we're taking in a number. So we'll just say num. Beautiful. And then we want to go from one to that number. Whenever I'm going from one to that I just know I'm going to use a loop. So let's just go ahead and create a simple for loop. And in that simple for loop, we'll have let i equal one, while i is less than equal to num. So we're going to go from one to the number that they enter, and we're going to do i plus plus.

So we're going to go up each time this loop runs. Now, why did I start my counter or i at one and not zero? A lot of folks kind of trying to figure this one out. It's because it asked for it. It said, takes it a number and goes from one to that number. It asked for it. You gotta pay attention to it, right? When you are doing these coding challenges, it's really important that you pay attention to the question that's being asked because I have had some interviewers that'll do something like this. They'll just change it from one to two and you'll solve the whole problem. They'll go, no, it's still not 100% right. Ah, you're close, but it's not there, right? And so, you know, make sure you read it. I don't like that type of interview, but I've seen it. So be careful. All right, so we're going from one to a number.

And if we just wanted to like console log the number, this would work, right? Like we just do console log I, right? That's gonna console log one, then two, then three, then four, then five, then six, then seven, then eight, then nine, right? So we're gonna console log. Somebody said, why less than num? Well, because num is the value that the user is giving us. So if we were to call this function, right, if we were to call this function, if we were to call this function and we were to pass in the number 10, this would go from one to 10, but it wouldn't include it. So do we need less than or do we need less than equal? Beautiful, exactly. It's gonna have to be less than or equal to. Because if we just did less than, it wouldn't go to that number. It would stop at, if we did 10, it would stop at nine. So less than or equal to, beautiful, good catch. And now, if we were to run this, it would console log one through 10. All right, what does I stand for?

Increment, incrementer, it doesn't really matter. It's kind of lost its meaning over the years. It's just a short variable to use inside of your for loop. Beautiful, all right. What else is missing? What else is missing? You see it chat? What else is missing? That's why I said everything. Well, our function opens and closes, but our for loop opens but never closes. Beautiful. There we go. Alrighty, so now we have our function, we have our for loop, we're going from one to that number, everything's looking good. now we just have to determine if the number is divisible by three, by five, and three by five. So let's go ahead and try it out.

Let's start doing our conditional. What should our first conditional be? Oh, some folks did the homework. Let's have some fun though. Let's go ahead and do, let's go ahead and do if num, sorry, sorry, if I mod three equals zero. What the heck does that mean? I say, I mod three equals zero. What am I looking for? So I said, rookie mistake. Yeah, I'm looking to make sure there's no remainder because if there's no remainder, That means that number is divisible by three evenly. And in that case, we'd want to console log fizz instead of the number. Beautiful. How about our else if? Else if, kind of the same thing. We'll do i mod five equals zero.

That way we're seeing if the number is indeed divisible by five. And in that case, we will console log, buzz, beautiful. And then what's our next else if gonna be here? We could check for both of them, right? So we can do else if, if i mod three equals zero, and I mod five equals zero. Then we would console log. Is, was, beautiful. What's the last thing we need to, we need to actually console log though? What's the last thing we got to console log? Yeah, the actual number. Right now we're only doing fizzbuzz or fizzbuzz. We're not actually doing the number. So let's make sure we're actually console logging the number so we can go from one to that number. All right, let's come out everything else and see where we're at in terms of if we're working or not. Jeez, beautiful.

All right, everything else is console logged out. We got it saved here. Let's, I'm gonna even comment out this run here. Let's save this. Let's come back here. Let's refresh and open up my inspector. I'm gonna go to my console log and let's run fizzbuzz here. Let's run fizzbuzz to 20. We're gonna run it to 20 and let's see what happens. All right, we got one, two fizz, four buzz, fizz, seven, eight, fizz, buzz, 11, fizz, 13, 14, fizz, 16, 17, fizz, 19, buzz. Hmm. Hmm. Hmm. What went wrong here? 15.

It should be fizzbuzz, but it only says fizz. It should be fizzbuzz, but it only says fizz. Let's go ahead and take a look at this. All right, so all the other numbers look good. We got one, two, fizz, right? That was looking good. But when we got to I being 15, what happened? Let's take a look at it. Is 15 mod 3 equal to 0 Is 15 mod 3 equal to 0 Yep, so at console log fizz does it ever get to fizz buzz? Does it ever even get a chance to go to fizz buzz no So 15, this if is a true statement. It's a true statement. So we console log fizz, and then we're done. We move on to 16. All right, we move on to 16. It never even gets the chance to go down to fizzbuzz.

So what do we think we need to change here for this to work? Yeah, we need to do five and three first. Let's just copy this up here. Let's cut it. Boom. Let's change this to three just to go in order. And then down here, down here we'll do i mod five equals zero by itself. Now, we gotta go in here and change it. So this should be fizz, buzz. This should be fizz, and this should be buzz. Now, when we get the 15, when we get the 15, is 15 mod three equal to zero? And 15 mod five zero? Is this a true statement? That's a true statement, right? It's a true statement.

So we would print fizzbuzz in that scenario. So let's save this. Let's go back. Let's refresh. Let's run our fizzbuzz to 20 again. We got our one, two fizz, five for our buzz. And when we get to 15, the first five and three, we get a correct fizzbuzz. So I did that long way. This is the most common mistake I see folks make in the interviews, is that they forget to do this statement first and they don't catch it. They don't catch it when they go through it. I'm hired exactly. If you can do this, right? I know if this is your first pass through it, if you didn't get a chance to do it in the homework and this is the very first time you see this, I know there's a lot of meat here. Make sure you review this after class. Make sure this is in your Anki.

If you can do this, you can get a job. I know it sounds silly, but if you can do this, there is a job out there that you could have gotten. If you would have networked your way into about 10% of jobs I saw last year and you knew how to do fizzbuzz, you would have gotten that job. Work on your networking, know how to do fizzbuzz, one job please. It's wild, it really is. People out here grinding leak code until their nose bleed when they don't really need to, if they just sort of networked their way into a job. All right, let's go ahead and move on. Arrays, this is our topic for the evening. We're going to spend quite a bit of time working through this together. What the heck are arrays? Well, I like to think of arrays as toasters. That's right. Toasters, give me a second here. So I do OK for myself outside a little bit, you know, I do. All right.

I got a I got a decent toaster. Nice four slots. It does my breads, it does my bagels, it does my Pop-Tarts, and on a good day, it does my Toaster Strudel too, right? I got a decent toaster. Now, when I look at my toaster, I see that it takes the bread, I see that it takes the Pop-Tarts, the Toaster Strudel, the bagel, but I still see that it's just one toaster. So it's one thing that holds a bunch of other stuff. Right? So it's still one entity, but it can hold toast. It can hold bread. It can hold bagels. It can hold pop tarts. It can hold toaster strudel. One thing holding multiple things inside of it. Now I thought I was okay until one day when I was watching MTV Cribs and I started to notice, wait a minute, do rich people have other toasters? Because I started to notice some folks have way fancier toasters.

Now, I haven't been the 50 cents house, but I have a strong suspicion. Joda, hey, thank you for the five gifted subs. I have a pretty strong suspicion that if I was to go to 50 cents house, they probably have a 50 slot toaster, right? And that 50 slot toaster probably has all the bells and whistles. It probably does everything you could think you can do, right? It does the bagels. It does the bread. It does the pop tarts. It does the toaster strudels. It probably even has some horizontal slots for if you're from the UK, the cheese toasties, right? Like it, it probably does the works, right? 50 cents probably live in large one toaster, but it can hold so many different things. It even has like a special slot for, for, for bagel bites. It has like a different slot for, for pizza rolls, right? Like 50 cents toaster does the business.

50 slots holding all kinds of different stuff, but it's still one toaster and I was kind of upset that 50 cent could have such a toaster until I found myself inside of Bill Gates house now don't don't think too much into this but I was inside of Bill Gates house you do know I'm a Microsoft development influencer they are sponsoring their upcoming So it could happen. It could have been possible. So I I'm in Bill Gates house It's late at night. Don't ask why it's at night. I'm in Bill Gates house and I Notice their toaster and their toaster It's not a 50-cent toaster It looks kind of like my toaster and I start to feel real good about myself I'm like, well, hey, I ain't got Bill Gates money, but I got a better toaster. I'm starting to feel special. So it's late. I'm hungry. I opened up the freezer and in the freezer or the, are those like gourmet toaster strudels? Like the ones when you go to the not, not like a normal supermarket, you know, like the fancy version of Whole Foods. Yes. There is a fancy version of Whole Foods. There is a grocery store in LA that only has valet parking. That's what I'm talking about. Exclusive toaster strudels.

The whole box isn't even in English. It's not really a box. It's kind of more like a bouquet of toaster strudel. Well, their freezer's full of these kinds of toaster strudel. So I'm like, I hit the jackpot. I can't even read it, but I know what it is. And so I take four of these johns and I go to the toaster And I put in the first fancy toaster strudel the second the third the fourth and when I put in the fourth fancy toaster strudel Magically a new slot opened up and I was sitting there Thought I had one up on Bill Gates I really did But when I hit the fourth slot, a new slot opened and I realized that this slot could take anything. It could take the bread. It could take the bagels. It could take the fancy toaster strudels. It could take the hot pockets. It could take the pizza rolls and I couldn't help myself. I put another fancy toaster strudel in. I put another one in, another one, another one. And each time I put a new one, a new, new slot opened.

And I realized that Bill Gates has such a fancy toaster that even as I fill up all the slots, there's always room for one more. There's a, there's another, there's another slot to be had. And I stepped back and I look at Bill Gates toaster and I realize that it's an array it's one element one toaster that can hold any other type of data we've talked about whether it's bread or bagels and it can always hold one more one element one thing that can hold a bunch of other stuff so tonight we're gonna be working with arrays and if you need to think about what an array is think Bill Gates toaster and see Mike redneck a thank you for the bits okay and an array is a different way to structure data that is as a collection of stuff. That's all it is. It's one thing that can hold a bunch of other stuff. Now, arrays get a little tricky because there is some gotchas to be had when it comes to arrays. Some gotchas that come with arrays are that arrays really have two things we're keeping track of. Each thing that goes into the array, just like each thing that goes into our toaster, we call it an element. So that slice of bread would be an element. The toaster strudel would be an element. The bagel would be an element. Each thing we put inside of the array or each thing we put inside of our toaster, we're going to call that an element. Now, the thing that gets a lot of people tripped up is that when we're looking at the slots on our toaster, if we were to give each slot a number, the first slot we would call the zeroth slot. So we'd go zero slot, first slot, second slot, third slot, right? So we start counting at zero.

This is called zero indexing. So arrays are tricky because it's one entity, one structure that can hold every other structure we've seen so far in JavaScript. They can hold numbers, Boolean, strings, even other arrays. And when we start counting, we start counting the slots at zero, not one. Now you're like, Leon, why do we start counting at zero? That's above my pay grade. Back in the day, when people were building programming languages, we know because of binary ons and offs, zeros and ones, they started with zero, that carried over into JavaScript. So we start counting at zero. All right, we'll learn the real reason as we get later on, and we understand some of the stuff underneath JavaScript. script. But. One element that can hold a bunch of other stuff just like a toaster. We start counting the slots at zero and the beautiful thing with arrays is they come with a bunch of built in functions that do a lot of heavy lifting for us. We're going to see one of those built in functions tonight, but on Thursday we're going to play with a bunch of them and they're really cool. They could do a lot of really interesting stuff.

And there are really two kinds of ways to create arrays. There's something called a constructor, which we'll get a little bit more into when we get to objects, and then there's something called literal notation, where we're literally creating the array. So let's take a look. Here's this constructor way. Don't worry about this for now. We'll come back when we do it with objects. And here is literal notation. We have declared a new variable called newArray, and we have assigned it to be an array using literal notation. When you see those square brackets in JavaScript, you know that we're playing, right? We're playing with arrays. So we have literally just created an array when we assign a variable with the square brackets. Cool. Now, when we assign our variable to be an array, when we literally create an array with those square brackets, we could have an empty array like we have here, just a toaster with nothing inside of it. Or when you declare your variable and assign it, you could assign it with stuff already inside the toaster. So here you can see my array is holding a string, a boolean, a number.

All of the data types we've seen so far can go into arrays. Chat, what are these called? The things that we put inside of an array, what are they called? Beautiful. Oh, elements, elements go inside of our array. Beautiful. So zebra, true and 21 are all elements inside of our array. Something to be mindful of when you are assigning an array, like creating the array using that square bracket notation, that literal notation, if you leave an empty space, there is now an empty element. There is an undefined element in your array. So keep that in mind. We're gonna see an example in a few seconds. Empty spaces count here. Now, the hard part with arrays, so if this was an array, here we have an array with abbreviations of cities inside of it. We have how many elements are inside this array chat? How many elements are inside of this array?

Yes, there are four elements in this array. Now where it gets tricky is, give me, come on, put on the headphones tighter right now. New York City is the first element, it is the first element, but it is at what index? It's such a weird thing to say. It is the first element, but is that what index? Exactly, it's at the zeroth index. So I'm gonna ask you a question. In chat, what is the second element in this array? What is the second element in this array? Nice. The second element in this array is LA. This is the second element. However, LA is at what index? It is at the first index. Remember, this is Bill Gates' toaster, right?

Bill Gates' toaster. All right, Bill Gates' toaster, it has slots. This is the zeroest slot. This is the first slot. This is the second in terms of index. The third. We start counting our slots at zero. We call these the indexes, right? So even though this is the second element, it is at the first index. Beautiful. All right. What element is in the second index, chat? What element is in the second index? Beautiful, yes. Sydney is in the second index.

If we were to count. 0, 1, 2, Sydney is the element in the second index. What element is in the fourth index? What element is in the fourth index? Y'all got got. Nothing. There is no fourth index. it's undefined it's undefined zero one two three four there's nothing in four folks you got got London is the fourth element but it's in the third index There's no element in a fourth index. There's nothing here. It's undefined. You got that, cool. If you're from, I'm interested. If you're from, let's see if anybody's here. Let's see. If you're from LA, throw your appropriate index in the chat.

If you're from LA, throw your appropriate index in the chat. Or if you wish you were from LA, throw your appropriate index in the chat. A lot of folks from LA. Man, this LA meetup's going to be lit. Great. So we see that LA's index is one. If you're from New York City, if you're outside, throw your appropriate index in the chat, please. Cool. You being the 0th index cool now if you're from London this be a little a little late for you But if you're from London throw your appropriate index in chat, please We got a few of you few of you All right Got a few folks from London thrown up with a third index And if you're from Sydney, or if you just want to pretend you're from Sydney throw up the appropriate index, please We got, we got a couple of you got a couple. I think we a little fibbing, but yeah, yeah. Cool. Second index, beautiful. So New York, first element, zeroth index. LA, second element, first index. Sydney, third element, second index.

London, fourth element, third index. Indexes start counting at zero. That's the tricky part folks All right now the cool thing is Once you understand the indexes it enables you to get stuff out of the array So you can get stuff out of the array by using the index so here you can see I have an array called new array and and you can see that the zeroth index would give us zebra. Zebra is at the zeroth index. So if I was to say new array with the square brackets of zero, it would give me zebra. Chris A, thank you for the hydration. Cheers to you. Now, if I was to say new array of the index of one, I get undefined. Why do I get undefined? Why do I get undefined when I ask for the first index? Yeah, if we look, there's an empty space. Remember when I said empty spaces matter, or they still take up space in the array. There's still a slot in the toaster. There's just nothing in it. And so if you ask for that empty slot, if you ask for that empty slot in the toaster, you get undefined.

If we asked for the second index, we would get true. And if we asked for the third index, we would get 21, 21, 21, 21, right? Zero, one, two, three in terms of the indexes. Beautiful. Now the cool thing is, not only can we get stuff out of the array, we can put stuff into the array. So I didn't like having that empty slot in my toaster. Right, I didn't like having that empty slot in my toaster. So what I'm doing here is I'm saying, hey, look at my array, and using the square bracket notation, I'm saying look at the first index and set that equal to string Bob, right? String Bob. Now, if I was to ask for the entire array back, I would have zebra Bob true 21. It's as though I put a new slice of bread into that empty slot in the toaster. In this case, it was string Bob. Is it like reassigning? Exactly. It's exactly like reassigning.

So if you're reassigning one slot in the array or one slot in your toaster and it doesn't have to be empty, right? It doesn't have to be empty. You can take any value you want. You could do new array and do three and set it equal to 22. 21 savages wild stepson, right, 22 savage. And now if we were to call back the array, it would no longer be 21, it'd be 22. So you don't have to re-savage, exactly, re-savage. You don't have to, it doesn't have to be empty to modify. You can even take a space that is currently undefined, say new array four and set it out to we online, right? If we were to call back this array, We would see zebra Bob true 22 and then there'd be a new slot or we online Beautiful Now one of the really tricky things One of the really tricky things is you can also Reassign the whole array at one time So here, let's look at a normal variable that we've seen before. Like let num equal five. If I reassign num to be equal to six, what the heck is num? If I ask for num, what would you give me? If I ask for num, what would you give me? You give me six, right?

It's been reassigned. Well, let's look here. We have a variable here called cars, and it's set equal to an array of cars. Here, I have an array of numbers, and then I do something odd down here. I set cars equal to numbers. So I've literally reassigned the whole cars variable to be this numbers variable. If I was to ask for cars, I would get one, two, three. It's the exact same thing. I've just reassigned the variable, but I reassigned it to a whole other frickin array So you can overwrite whole arrays by assigning an array to a different array And with that statement, I think it's time to take a break I Think that I think it's time to take a break with that one alright, so let's go ahead and put five minutes on the clock and And when we come back, we're going to see a few more powerful things with arrays and then get lots of practice. All right. Lots of practice. When we come back, five minutes on the clock, we're going to come back, look at two last really powerful things with arrays and then get lots of practice with them. Lots of fun stuff coming up. All right, five minutes on the timer. If you're able, please get up, move around, hydrate, let your eyes focus on something.

That's not the screen for a while and I will see you in five Check, check, check, check, check, check, check, check, check, check, check. All right. Checking the closed captioning. I'm starting to think it might not be on my end. I'll try fiddling with something else, I'll be right back You You You I was captioning him, but not working. on We're still here, all right, I'm trying to see if there's a permission I turned off by Accident. Okay, I see what happened. I see how I see how it works. I can't turn it back on now, but it will be back on for next stream. I definitely figured I figured out what it is. I have to quit everything for it to come back. But let's see, one second, let me BRB real quick. Come on, come on back. Check, check, check. Yes, let's go.

All right, let's go, let's go, let's turn up. All right, so the captioning should be back. That should be good. All right, I think we can come back. We online, folks, we online. All right Well Beautiful sorry about that folks. I had to change all the permissions and then restart so my notes and stuff are down the Won't see all the note notifications coming through but we're good for now Beautiful alrighty. Oh the slides I need the slides Bear with me folks. Sorry All right, oh look at us Beautiful all right, we're back Cool beans. Alrighty, folks. Sorry for the little disruption there, but the closed caption should be back. We got the slides back already. So we talked about arrays indexing. We saw that you can overwrite whole arrays just because it's a variable, right? You're assigning a variable something.

that's all it is. Now, arrays, excuse me, sorry, come with this like very, they come with a lot of goodies built in, right? They come in with a lot of goodies built in. And one of the goodies they come built in with is this length property. Now, when I say the word property, it shouldn't send alarm bells off if you did some of the reading about what an array really is, but we're not ready to reveal all those secrets yet, right? But when you use an array, you get this lovely length property that comes along with it. And this length property will tell you how many elements are inside of your toaster or how many elements are inside of your array. So if you ever wanna know how many elements are in your array including empty spaces you use length. So let's go ahead and take a look at this code here arrayed at init to winit when it closed the ones we did already and so init to winit you'll notice that all of our coding today is around one of the greatest movie franchises of of all time, bring it on, of course. And so we have, if you haven't noticed already, we've had bring it on, bring it on again, but then we also have things themed for fight to the finish and it's in it to win it, Worldwide Cheer Smack. So it's just, it's just, it's modern, exactly modern classics. So let's go ahead and open up the in it to win it. And there are a few practice problems to get your fingers going with a raise. So let's go ahead and put five minutes on the clock here. I want you to try your best here and see if you can figure out this work when it comes to arrays.

Five minutes on the clock, have at it, you got this. If you're new around here, all the starter code is on our Discord, exclamation point Discord in chat. Agree to our rules and in the following materials channel, you'll see all the stuff we're working with tonight. I'm just gonna be jamming, you work, I jam. if if Yeah, Divker got the answer there. No way, folks. We got some dunzos. That's wild. No worries, blood. Shrek, Shrek 2, Shrek 3. All right, we got to settle this once and for all. If you're done, please fill out the most important poll of 100 devs history. Usually on top of the challenge, my brain isn't really cooperating today. No worries. Always catch the VOD.

Never feel like you have to thug it out. It'll always be on the VOD afterwards. It's every day can't be our day. Oh, that's good to hear Faith. Wow. Is Shrek one about to 90? Get out of here. I have never been more flabbergasted by this community. Absolutely. That blew my mind. I think all the folks you know what all the diligent folks are still working and not voting on the polls. They haven't seen the poll yet. All the folks that are working hard haven't seen the poll yet. I think that's going to tip the favors. There's a certain type of person that likes the first Shrek movie.

I saw a different type of person that likes the Shrek 2, you know, a little bit more of a nuance, a little je ne sais quoi, you know. 100 devs is canceled. Let's go about a minute 30 left books It's one of the first times finishing super early, yay, congrats, guy. Am I super saiyan? I wish, Minty. I wish. Look at the Dunzo's coming in. I see y'all. Make sure you get in this poll. Alright, let's take a look at this together please. Come on back, no matter if you're still working, come on back, let's go through it together. Alrighty, create an array of movies with at least three movies. So let's of course use the greatest movie franchise of all time, bring it on. And so we'll go ahead and set up an array and what do you square bracket? So I have just created this array using what kind of notation?

What kind of notation did I just use here to create an array. Throw it in chat for me, please. Yeah, I've used literal notation to create an array. I'm going to go ahead and throw in, um, in it to win it. Beautiful. Put a comma. Remember, you separate things in your arrays with commas. And then I'll the biggest fan of Worldwide Cheersmack. I know some folks thought it brought like a new revitalization to the franchise, but it's kind of not my cup of tea, but we'll do it. Worldwide Cheersmack. Beautiful. Alrighty. Using the array from above, store the first movie in a variable. So let's go ahead and make a variable here called first movie already and how can I get the first movie out of my movies array 80% Shrek one Wow Shrek 2 is clearly the better movie I had 848 votes to 216. Wow.

Shocked, I say. Shocked. All right. First movie, movies, zero. Beautiful. It's gonna give us the first element out of our movies array. The init to win it is now stored in first movie. Get the length of the original array and store it in a new variable. Let's call this let array length, just to give it a good name. And then I can do movies dot length. Right, there we go. That's gonna give us the length of the original array. So stored in array length is what number? If I was to go ahead and let's say console log, array length, what would I get? What would line seven give me?

Shooketh, I say, yes. Three, exactly, because we have one, two, three elements in our original array. Okay, get the last element in the array and store it in a new variable. All right, so let's create a new variable. Let's call this last element. And how can I get the, Like if I wanted to just like do this the easy way, right now with just the information I have on the screen, how could I get the last element in this array here? Like if you didn't wanna think at all, how could I get the last element right now? Yeah, I could do movies two. That would give me the last element in the array, right? If we looked, zero, one, two. So movies two would give me the last element in the array. But what if I kept adding elements to my array? Would movies two always give me the last element? No, it would always be stuck at that worldwide cheer smack no matter how much more stuff I added, it wouldn't work. So is there a way using just what we have learned today, not adding other methods, I see folks throwing out pop and stuff like that.

Is there a way with the stuff we have seen today, don't delay by today, how could we get always have the last element? Yeah, I see a lot of folks in here. So we could do movies.length minus one. Right, or if we wanted to use our variable from up top, we could do array length minus one. But let's make it a little bit clearer with the movies.length. What will movies.length always give us? What will movies.length always give us? Ah, SeaFilly got it. The number of elements. Movies.length will always give us the number of elements. If we were to look at this right now, movies.length would give us one, two, three. It's always gonna give us the total number of elements. Right now, there are three elements in the array, so movies.length would give us three. Why the heck do I have to do minus one? Why do I have to do minus one?

Ah, because indexes start at zero. So we're always going to have to do minus one because if we wanted to get the element out of the array, we need to use its index. The index is zero, one, two. So the total number of elements in the array will always be off by one when it comes to the index because the last element in the array will always be off by one, right? If we count one, two, three, but the index is two, we're off by one. So we always take the length. In this case, it'd be three minus one, which would give us two. and if we use that index to get the value out of the array, zero, one, two, it would give us the last element. And so this syntax here will always give us the last element in the array without having to know the length of the array. I could put, we could be at Bill Gates' house, having a pool party, having some fun. He could be firing up the toaster. We could have a hundred things in that toaster. we don't need to know the length to get the last element out. Right? If there were a hundred elements in the toaster, let's think about it for a second.

If there were a hundred elements in the toaster, what would movies.length give us? If there were a hundred elements in the toaster, what would movies.length give us? Nah, nah, you jumped ahead, you jumped ahead. if there were a hundred elements in the toaster, what would movies.length give us? It would give us a hundred. It's the total number of elements. However, if we wanted to take the last toaster strudel out, we would turn to Bill and say, hey Bill, Mr. Gates, give me the toaster strudel in what slot number? what index would we ask for that last toaster strudel? It would be 99, right? If there were a hundred elements in our Bill Gates toaster and we wanted the last one, we're asking for the toaster strudel in slot 99 because the slots start counting at zero. The indexes start counting at zero. So this would be 100 elements minus one to give us 99, or the 99th element in the toaster. If we looked at the toaster, the toaster goes from zero to 99. There are a hundred elements inside of it, but the slots go from zero to 99.

So we're always gonna need to be off by one to get the last element. I got 99 problems, but an index ain't one. Couldn't have said any better, Dev. Beautiful. Let's save this up and move on. Alrighty. Now, now that we, now that we know about arrays, we can store stuff into the array. We can take stuff out of the array. We can also iterate through the array. We can pull values out of the array as we want them. So here I have an array of best colors. Green, blue, yellow, black. If I ask for the length of best colors, if I did best colors dot length. Oops, sorry. All right, bestcolors.length, what would I get?

Bestcolors.length, what am I getting? I'm getting four, there's four elements in this array. If I wanted the last element out of this, no, let's change it up. If I wanted the first element out of this array, what would I need to type? I want the first element out of this array. Yeah, we've been doing best colors, zero, right? That's gonna give us green. If I want the last one, best colors, best colors dot length, Minus one that's gonna give me what best colors best colors dot length minus one is gonna give me what? Black beautiful That pattern Needs to be in anki It needs to be anki. I I don't care if you don't get the negative one yet Maybe it won't, maybe it didn't click for you this class. That's okay, we'll review it on Thursday. Needs to be in your Anki though. Alrighty, now, we saw how to use indexes to get stuff out of the array. Well, the cool thing is we can actually iterate through the array. So here, I'm starting my counter off at zero.

I'm gonna loop through from zero to the total number of elements in the array. I'm gonna go up by one each time. And so what's gonna wind up being printed to the console here, chat? What's gonna be printed to the console? Yeah, it's gonna be all the colors. It's gonna pop off green, then blue, then yellow, then black, and then stop. Because if we look, if we did this, if we ran this, I starts off at zero. So best colors 0 is gonna give us green. Then we add 1. Is 1 less than 4? It is. So then we would do best colors 1 which is gonna give us blue. Then we add 1. Is 2 less than four since it is we're at best colors two which gives us yellow then we add one all right then we add one now we're at three is three less than four yes though we're at best colors 3 which is black then we add 1 is 4 less than 4 no We're done we stop Exactly oh and this is why We start counting at what? Why did we start counting at zero here?

Why didn't we start counting at one here? Why did we start counting at zero here? Because the indexes started at zero. If we started at one, if we started at one, guess what? We skipped right to blue, right? All right, green's index is zero, blue's index is one. So if I started counting at one, I skip green and I go straight to blue. All right, so we start counting at zero, but we can get the first element out of the array, which is green, beautiful. Now, there's also another iteration, right, that another way we can iterate through arrays that come with arrays. There is a special kind of loop that is tied to arrays. It's like a function that comes with arrays that enables us to loop through. So we can do the exact same thing that we have here with this for loop, right? We can do that with a foreach. And so the foreach seems a little odd because what it is doing is foreach is a special function built into JavaScript that will run once for each element in your array. So foreach, all it does is it runs once for each element in your array.

So without having any idea what this line of code does, how many times is this foreach going to run? Beautiful. It's gonna run four times. There are four elements in our array. The length of our array is four. So since there are four elements, ForEach is gonna run four times. And each time it runs, it runs this. What have I just circled? What have I circled here? Each time ForEach runs, it runs something. It runs that function, that's a function. That's an arrow function right there. that arrow function is going to run each time that makes the arrow function a what It's an argument, yeah, it's an argument. If this is a function and it runs, and when it runs, we pass in this function, that means that that function is taken in a function as an argument. We've kind of, we've hit higher order functions.

We got we got maybe some callbacks with the we're not there yet. We're not there yet. Don't worry. Don't worry. We'll get there eventually We're not there yet, but that's some some that's some JavaScript happening right there. That's all I got to say We got functions on functions on functions. We got functions as arguments. We got some higher-order stuff We got some we got some fancy stuff going on right here We don't have to know the lingo yet, but we're gonna get there, but right now we have each time for each runs is is run in this function, this arrow function. Now the cool thing is, when foreach runs, we said it runs once for each element, right? When it runs, foreach is popping off three things at a time, maybe technically four. It's popping off the element, the index, and even the array itself. And so when for each runs the very first time it runs it's gonna pop off green and it's index of zero. Then when the for each runs the second time it's gonna grab blue and it's index of one. The next time for each runs it's gonna grab yellow and it's index of two. And the very last time for each runs it's gonna grab black and it's index of three.

Now, instead of these values and indexes poofing into the air, right, instead of it poofing into the air, we set up some what? We set up some what? We set up some what? We set up some parameters, exactly. So in this case, X is gonna hold the actual strings. X is gonna be green the first time it runs, X will be blue the second time it runs, it'll be yellow the third time it runs, and it'll be black the fourth time it runs. I is kinda doing the same thing. The very first time foreach runs, it grabs the zero index. Then the first index. Then the second index. Then the third index. Remember, foreach runs once for each element in your array. And when it runs, it's a little goblin. It comes and it grabs the element and it grabs the index before it runs. So foreach comes along, it sees that there's four elements in this array.

We know foreach is going to run four times, and every single time it runs, it grabs the element and it grabs the index. And that goblin is passing the element into our parameter of x, and that goblin is passing the index into that parameter of i. Now, am I even using I? No, I have access to it though. The goblin's doing a good job. It grabbed it for me. I'm not using it, but I got it, right? It's not using it, but I got it. Cool. So the very first time this runs, the goblin grabs what? The very first time foreach runs. The very first time the foreach goblin runs, what does it grab? It runs around and it grabs green and zero. So X in this instance is green and I in this instance is zero. Beautiful.

So if we look inside the arrow function, what gets logged to the console? Mikey doves nothing, nothing. It console logs green, exactly, it console logs green. The very first time this for each goblin runs, it runs around and it grabs green and zero from the array. It passes green into X, it passes zero into I, and that's why if we were to look at this in the console log, we would see green. Yes, I forgot how to spell green for a brief second. It's okay, the world still goes on. Next, the goblin runs a second time. The goblin runs around this time, grabs blue and its index of one. So X is going to be blue and I is going to be one. So we'll see blue printed to the console. The third time this run, the goblin runs around grabs yellow and it's index of two. So into X we see yellow, into I we see two. And then the very last time the goblin runs the goblin runs around grabs black and it's index of three so X would be black. I Would be three Can you pass in just one parameter yeah, you could have just passed in you could have just called X, right You could and you can call X whatever you want.

This could have been called zebra. It doesn't matter. It's just a parameter ForEach, every single time it runs, grabs the element, grabs the index, and even grabs the array, right? And so the goblin is passing it into this function, and we have the parameters to catch those values. We have x to catch the element, and we have i to catch the index. Cool. Let's try running it. Let's go ahead and open up the index. All right, open up the inspector. All righty, let's go to our console. We put in our array of best colors, and then let's go ahead and run this line of code. Beautiful. We see green, blue, yellow, and black. What if I wanted the indexes also to show up? Let's clear it and run it again.

I'm gonna make one change, I want the index to also show up. Yeah, well let's throw I in here. Not if, just I. Now we're getting green zero, blue one, yellow two, black three. The goblin is passing in green and zero and now we're console logging green and zero then the goblin runs around and grabs blue one Then yellow two then black three and we see all those being printed to the console All righty I'm gonna see something else weird. Let's do one more thing here. Let's do let's clear this Just to mess with our brains a little bit Can chat tell me what just happened here Yeah, it grabs the whole array. So R for each goblin, R for each goblin, right? R for each goblin can actually grab some extra stuff. Not only can it grab the elements, not only can it grab the index, it can actually grab the array that it's stealing stuff from, right? So each time the goblin ran, it could also grab the array itself. And so A, I'm just saying short for array, is actually grabbing the array. It doesn't, it's never gonna change. It's always gonna grab the same array, but it's something that comes along with foreach. Now you're saying like, when would you use that for?

It'll come up. Sometimes you want to know what the goblin is grabbing stuff from, right? But for now, just know that it exists. I got a Millie stuck in my head by Lil Wayne. That's a goon to a goblin. Nothing, nothing. All right. Let's try and code some of this out. Let's try and code some of this out. So we got fight to the finish, fight to the finish. Let's go ahead and open that up. Alrighty, create an array of movie titles, loop through the array in each element in the H2, create an array of numbers, loop through the array, and add three to each number, replacing the old number. Find the array of all the, average of all the numbers from question three. I put five minutes on the timer. We're gonna go at it together after the five.

So give it the good old 100 devs try, then we'll go over it together. Good luck. At which point in the interview do we mention the Samaritan Goblins? Once you have the offer letter that's when you bring all that stuff up Three for the last one, yeah This one's labeled fight to the finish for a reason folks fight to the finish you got this Chris, I appreciate that you spent the channel points to highlight that. Damn bull, thank you for the hydration. Cheers to you. Obscure, we'll go over GitHub strategy during the class, but one folder and I just keep pushing them to the same folder. I hope you're doing well, D'Ambo. No, Ivan, unless you're a designer, use the templates, for sure. Is GitHub supposed to be confusing at first? Absolutely. That's why we save it for a ways in Untouchable said just want to say thank you. I got two contracts signed today and two deposits today Never would have been possible for this awesome class. Hey, it's amazing to hear that Congrats No cocoa it's up to you All right folks about two minutes left you got this Man this second question is the engagement on this one Woof. Had a contract for a ballet studio for $725.

That's awesome. Congrats worlds. Yeah, Anki time on these ones is definitely needed for sure. Congrats on getting the first one Tony, that's awesome Whatever you want to call it sudo Got some dunzo's on this congrats. All righty folks. Come on back. Let's do these last together. And then we'll queue up a raid, I think. Come on back. Come on back. All righty, create an array of movie titles, loop through the array, and each element to the h2. Now, what you might have noticed with each of these questions was what? With each of these questions, there was something, what, there's something missing from each of them. It's a little funky. The wording's a little off, but you're all engineers.

You were all engineers. You should be able to figure out from the question that you should be adding. That's it! It's not hard. You're going to read documentation that is way, way worse. Way worse! And you're going to have to use your deductive reasoning and logic skills to figure out what's being asked. So, when you get some tricky questions, don't give up, give your best guess. Do what you think is being asked, try and push, and then get clarified by asking good questions. Cool. Create an array of movie titles, loop through the array, and add, add each element to the H2. All right, so let's go ahead and do this. Let movies equal. And we're gonna create an array using literal notation. And let's just put the beginnings of each of these movies.

Let's say fight. Let's say win. And let's say worldwide, Mr. Worldwide. Beautiful. So, loop through the array and add each element to the h2. Let's make sure we have an h2 to add to, so let's go and look. We do have an h2, great. So we do have an h2 we can add to. So now we have to loop through and add. We could do a for loop, we could do a for each. Let's do a for loop first, and then we'll do a for each on the other ones. Let's set up a for loop. Let's go ahead and do let i equal, what are we gonna start our i off at? Yep, zero, because our arrays are zero index.

While i is less than, and how do we know when to stop? How do we know when to stop? How can we get the stopping number here? Yeah, just get the length. We start length, beautiful. And then we just add one each time. Great, so this should enable us to move through 0, 2, 2. 0, 1, 2, then we would hit 3, and 3 would not be less than 3, so it would stop. So this should give us each of the elements in the array if we use them. And so let's go ahead, and as we do this, let's select the H2, dot query selector. Let's go ahead and select the H2. And then how do we put something into the H2? How can we put text into something? Yeah, inner text. Beautiful.

And we saw what the 21 savage, 21, 21, 21, that if we just did this, right? We wouldn't be adding or concatenating. So we got to do our plus equals. We'll do our plus equals. And then we're going to go ahead and grab from our movies. Hi. So the very first time this runs, right? the very first time this runs we're going to have i be zero and so we're going to find the h2 and put inside of it movie zero which is fight. Then the next time this runs i is one we're going to go ahead and grab win and put that in the h2 and the last time this runs i is two so we'll grab worldwide and put that in ph2. Beautiful. Could you have done it before each? Absolutely. Up to you. All right. Create an array of numbers.

Loop through the array. And add three to each number. And replace the old number. And replace the old number is interesting here. It's replaced the old number that gets this tricky. We haven't really done that yet. So let's think through it. Let's create an array of numbers, let nums equal, and let's just keep it simple. I'm going to start, I'm going to do different numbers. I'm going to do like 10, 20, and 30, just so it's a little bit clearer. I think if you do like one, two, three, it might be a little confusing. So let's do 10, 20, 30. And we want to loop through this array of numbers and add three to each one. So we could do another for loop, but we already did one of those. Let's do the for each.

So let's go ahead and do nums.forEach. And inside the forEach, we can put our function. So I'm gonna use a nice little arrow function here. Do I need both things? So let's say, let's grab the item and let's grab the index. And we're going to have our curly braces so that we can put whatever we want to have happen inside these curly braces. So each time 4-H runs, the 4-H goblin is going to grab the item and the index. Right? So we're going to go off and we're going to go and grab. The very first time this runs, the goblin's gonna grab 10 and zero. Then it'll run again grabbing 20 and one. And then the last time the goblin will grab 30 and two. Right? Am I just putting random words or item index special? No, they can be called whatever you want.

We could have called this Bob and unicorn. The only thing that matters when it comes to foreach is that foreach every single time will grab the element, then the index, and then the array. So whatever you put inside of this foreach, know that it's gonna grab those things in that order. So you wanna make sure that you have something for each of them. sometimes you'll see folks do something like this, where if they know they're not going to use it, they'll just do the underscore. Like if they know they're only gonna use the index, they might do something like that. But let's keep it simple. Let's do item and I for index. Alrighty, so now we can go through and what we want to do is we want to change each of these numbers to be the number plus three so if we were going to do this like if I was going to do this just without knowing how it would work I want to take 10 and reassign it to be 13 I want to take 20 and reassign it to be 23 and I want to take 30 and reassign to be 33. I'm going to add three to each of them. So what I'm going to do is I'm going to grab each element in the index. So I'm going to grab each of these elements by using its index. So let's comment this out for a second and let's think how could I update 10 to be 13? How could I update 10 to be 13? Think through that for a second.

By reassigning, exactly. I could do nums what? How do I grab the first element? Nums zero equals nums zero plus 13. Or you might do something like this, just to make it a little bit easier on yourself, plus equal three. Because what you're saying here, if we go back to the slightly longer way, is when you have it on the left-hand side, this is you trying to reassign a variable. everything that happens over here executes and then goes into that slot. So nums0 would grab 10 and we would add 3 to it, Meaning that this right-hand side is 13. That 13 would go into that location. I did forget the S, sorry. There you go. All right, so here, all I'm doing is I am grabbing the original number, which is 10, adding three to it, which is 13, and then putting 13, reassigning that space in the array to be 13. I could hard code it, right? I could do plus 13, but I want to be able to grab the numbers. And I could do this over and over again.

I could say, all right, nums one equals Bob, right? I could say nums one equals bob and nums two equals unicorn. And if I was to ask for this array back, if I was to like, if I was to log nums, I would get 13 bob, bob, unicorn. All's I'm doing is I'm reassigning these different slots in the toaster. I'm saying go to the zeroest slot and put this in. Then go to the second slot in the toaster and put this in. Go to the third slot in the toaster and put this in. Right? But instead of doing Bob and Unicorn, what I decided to do was to put new numbers, right? Put new numbers into those slots. So I'm gonna say 20 plus three and 30 plus three, right? But if I wanted to pull the value out first, I would say nums one. That would grab 20. Saying nums one is the same thing as saying 20 here. Right?

It's the same thing as saying 20 there. I'm saying nums one. That's grabbing the 20. I'm adding three to it. And then I am putting that into this slot in the toaster, making it 23. Down here, I'm gonna do nums two. That's gonna grab 30. it's the same thing as saying 30 here, right? Making it 33, and I'm putting 33 into that slot in the toaster. Now, instead of doing this line by line, hand-coded by hand-coded, I came down here and I put this inside of a loop. It's gonna be the exact same thing that I just hand-coded up there. where I'm saying, all right, let each specific slot in the toaster equal whatever the item was plus three. So if we were to walk through this now, what's going to happen is I'm going to run this for each. The for each is gonna run how many times, Chad? How many times is this ForEachGoblin going to run?

The ForEachGoblin's gonna run three times. The very first time the ForEachGoblin runs, let's set up our column here. Item and I. All right, the very first time the ForEachGoblin runs, it grabs 10 and zero. So wherever I see item, it's actually 10. And so what I wind up doing is I have 10 there and wherever I see I, it's zero. So what I wind up doing is saying, all right, this first slot in the toaster is gonna be 10 plus three. So this winds up becoming 13. The next time the goblin runs, it grabs, we should probably put these back to what they were. The very next time the goblin runs, it grabs 20 and the index of one. So wherever I see item, it's actually 20. And wherever I see I, it's actually one. and so what I wind up doing is putting in this slot of the toaster 20 plus 3 this becomes 23 and the very last time the goblin runs it grabs 30 and the index of 2 so wherever I see item it's 30 plus I'm gonna add 3 to it And over here, I have I being two. So I'm gonna go to the last slot in the toaster, the zero, the one, the two, and I'm gonna put 33 inside of it. So it's reassigning, yes, it's just reassigning.

It's reassigning the spaces inside of the array. Now, I know the first time you see this, this is a wild notion, especially if you didn't get to the arrays in the homework. This is really hard to see. So you got to come back. You got to rewatch this one. You got to play with it yourself. This really helps if you draw it out, like get a piece of paper, see what item equals, see what I equals and type it all out for yourself. This makes it a little bit easier to follow along. All right, last one and then we'll do a rate and end it for this evening. Find the average of all the numbers from question three. How can I find the average of all the numbers from question 3? So if this is question 3 we can't grab all the numbers but was there another question that had numbers? Yes. Question two had numbers. Come on now.

Question two had numbers. So we can say average all the numbers from question two. All right. Let's go ahead and how can we calculate average? Oh, I see somebody throwing in. We have to add all the numbers together And then divide it by the total number of numbers. Beautiful. So let's go ahead and do that. Let's first, let's create a sum. I'm gonna create a variable called sum. I'm gonna set it equal to zero. and then what I'm going to do is I'm gonna add each number to sum. I'm gonna add each number to sum. So let's just go ahead and set up a quick loop. I'm gonna say nums.foreach and I know inside of my foreach loop I'm gonna need each number so I can just grab that first number.

It could be call it whatever I I want, call it num, I guess. And then all I have to do is do sum plus equals num. Why would this work? Why would sum plus equal num work here? Why would that work here? Yeah. So it could take num and add it to sum. So for each number we had, it could take 10, add zero plus 10, then 20 plus 10 would be 30, 30 plus 30 would be 60. So we could do it kind of like in one line with a for each. Let's do it with a for loop. I think four looks a little bit easier to see how we could do this. Let's do four. Let's do let i equal zero, while i is less than nums.length. And then we can do i++. All I'm going to do is I'm going to add each number to sum.

I can do sum plus equal nums i. Some folks are pulling out the reduce and all that fun stuff. There are other ways to do it, but this is pretty, pretty forward, right? So, if we were to be the goblin and we're looking just at nums right here, the very first time this runs, nums zero would give us 10. So we would add 10 to sum. Then the next time that this runs, I would be one and that would grab us 20. Then we'd be adding 20. The last time that this runs, I would be two and that would grab us 30 and we'd be adding 30 to sum. My brain is shut off. No, hey, I told you we're going to start turning it up a little bit. Turn it up a little bit. All right, let's break this down one more time and then we're gonna call it this evening. I know arrays are difficult. The first time you see them, this is like our first real programming, right? It's the first time you're doing all of these substitutions.

We're really using variables. And so the very first time you see this is definitely difficult. For a lot of folks, you need to probably come back and rewatch this one, play with a little bit. And then guess what? We're going to come back Thursday and we're going to do all this stuff again. Right? So all this stuff that we kind of first started today, you're going to see it again on Thursday and we're just going to add a little bit more towards the end. Cool. Let's do this one more and then we're end. Alrighty. When this runs, let's make it a little bit clearer. Let's do sum equals sum plus nums i. Alrighty, so when we run this for loop, what is the length of nums? What is the length of nums here? Nums.length give us what in chat please?

It gives us three exactly. If we look, you can see there are three elements inside of nums. So this, for all intents and purposes, is three. Beautiful. The very first time this runs, nums zero. Remember, it's gonna be nums square brackets zero. Because i at first is zero. Nums zero is what? If we go up to the nums array and we grab the value you out of the zeroth index. What do we get? We get the number 10. So if we come back down here, it's as though we do, plus 10. All right, as though we do, well let's comment this out. Sorry, I was getting confused on that one. Let's comment that out.

There we go. It's as though we're doing plus 10. So at this point, we're doing zero plus 10, and we're reassigning that to sum. So sum becomes 10. And this runs again. Now nums is no longer zero. We've added one to it. we are at one. So nums one gives us what value? Nums one gives us what value? If we come all the way up to the array and we look at nums one we get what? 20, exactly. So it's as though we put 20 down here. So sum at this point is 10. So we do 10 plus 20.

And then we reassign that to sum. So now, sum is sitting at a pretty 30. And the very last time this runs, the very last time this runs, we're at i equals two, because it went up by one. So, if we were to ask for nums two, what value are we getting out of the array? We're getting 30, exactly. That's the second index in that array. Pull that out. It's as though it was 30. and we were already sitting at sum being 30. So it's as though it's 30 plus 30. We're gonna reassign sum to be 60. Now, sum is sitting at 60. How do we get the average? How do we get the average? You're saying divide by three, but how could we make this so that it's extensible to any number of elements in the array?

Yeah, we could do some. Let's just console log it. We could do console log. Some. Divided by nums dot length. because nums.length would give us three because there are three elements in the nums array. So at the end, this would be 60 divided by three and we would get the average of 20. Beautiful, beautiful, beautiful, beautiful. Already folks, I know the first time you do a raise it can be very, very difficult. The idea of one entity that can hold a lot of values, that's tough, right? Make sure you get through the erase reading before Thursday just to try and reinforce some of these concepts. Don't be afraid to come back and rewatch a lot of these kind of examples. This is your first time really seeing a lot of substitution, a lot of variables holding values, things moving, bobbing, weaving. It's okay if it didn't click for you and the very first time you see something this complex. Come back.

Rewatch this portion and please if things were not, if you weren't able to connect all the dots, make sure you come back and you do it with a piece of paper. The substitutions are a lot easier if you're keeping track of what I is. It's a lot easier if you're keeping track of what's going into the sum or et cetera. Right? So come back with a piece of paper, follow along as you do these, because it really does make a huge, huge, huge, huge world of a difference. So let's go ahead and set up a raid. Don't forget, not only do we have class on Thursday, you gotta be turning up your networking, you gotta be turning up your daily code challenges. Remember, Code Wars, you're doing a Code Wars every day. You wanna make sure you're doing level eight. make sure you are only doing the fundamentals track. If you're doing something that's not level eight and not fundamentals, it's not going to be fun. So please make sure when you're doing your code wars, you are making sure you're doing level eight cues, fundamentals. If you want to join the 100 devs clan, makes it a little bit more fun. And on Thursday, we'll come back and we'll do more of this. This is not the only time we will see arrays, folks.

We're gonna come back on Thursday. We're gonna run back this array knowledge, make sure it syncs a little bit better, and then add a few more methods onto the end. So let's go ahead and do our raid. That ended up beautiful. All right, they are working on something fun. A dynamic Pokemon overlay. All righty folks, I'll see you over at the raid. Have a wonderful rest of your Tuesday. Good luck with your coding challenge tomorrow. Come back Thursday, we'll keep plugging away at arrays. We'll make them make a little bit more sense. Let's raid. Peace everyone. you

End of Transcript