JavaScript Algorithms for Beginners

Key Takeaways

Hello guys, how are you doing? Can you hear me now? We should be live. This is the first live on JavaScript Mastery channel. So just in the comments feel free to let me know, can you hear me? Can you see everything? And then we're going to start with um code wars exercises. We're going to solve some algorithms live. So you guys will be able to help me here and we'll just go through them. Uh learn something uh practice JavaScript and yeah just hang out a bit. Okay. Yeah, great. I'm I'm getting comments. Uh hello everyone. Great. It seems that everyone can hear me. Uh so yeah, this is the first live on JavaScript Mastery channel. Um and I thought let's do some live exercises, challenges, um algorithms. Let's I'm going to let you guys see me making mistakes because that's not something you can usually see on YouTube videos. They are pre-recorded. It's great. But now you're going to go with uh you're going to actually go through the process of actually solving an exercise with me. So I'm going to give you my thought process how to approach something and how to actually solve the thing hopefully right uh I created a new code wars account uh I found code wars to be a great website for practicing and we are in there we can start training awesome great so this is how it's going to look like uh we have a code uh explanation on the left side or rather the explanation of what our program should be doing on the right side. We can actually uh put our code solution. You can write our code here or we can even take it one step further and simply do it inside of our Visual Studio Code. So, for now, we're going to do it here. And once the exercises get a bit harder, we can then move to Visual Studio Code. So, with that said, let's actually jump into the first one. Um in here it says categorize new number. So, I'm going to read it for you and then we're going to try to solve it. So, it says, "The Western Suburbs Crockage Club has two categories of memberships, senior and open. They would like your help with an application form that will tell prospective members which category they'll be placed. To be a senior member, sorry, to be a senior, a member must be at least 55 years old to have a handicip greater than seven and have a handicap greater than seven." In this croquet club, handicaps range from minus2 to + 26. The better the player, the lower the handicap. So, usually there is some kind of story, right? But with all programming exercises, the thing that you want to be looking at is the input. Input and the output to be more specific. There you will be able to see what your function or program should take in and what it should bring out. And I see we're getting some comments uh saying, "Hi, hello everyone." And I got one questions that says, "For how long am I going to stream?" We'll see. Uh let let's try to go we we'll see. We'll go with the flow. Can be one hour, but can be two hours if you guys are here and and you like what you're seeing. So great input in this case uh consists of a list of lists. More specifically, that's basically an array of an arrays as you can see right there. Let me know if the text is big enough. I can make it a bit bigger for you guys. Uh like this. And each list contains information for a single potential member. Information consists of an integer for the person's age and an integer for the person's handicap. Note for the f uh the input will be int list list, which is a list list. This doesn't seem like JavaScript to me right now, but looks like it is. We're going to just keep moving with it. Um, okay. Moving forwards. Um, there we go. Yeah, these are our inputs. So, I'm going to take these inputs and I'm going to put them right here at the top as a comment. So, these are our inputs. Um, great. Uh, I get some comments saying maybe solve something uh with four or five kata. That's some system in here in um in um in code wars. I'm not even sure what kata is, but we're going to try go through it. Is four or five kata easier than what we're doing currently or is it harder? Uh great. So yeah, let's let's move further. Uh the output will consist of a list of string values uh open or senior stating whether the respective member is to be placed in the senior or open category. So for this kind of input we are getting this kind of outputs. So for that we know that we need to have a function. In this case uh I always like to use ES6 plus. So we can convert this function into a arrow function. Great. with that I just make it a bit bigger for you and let's see so the first thing here I think is the age let's see the first thing uh to be senior yeah the first thing is the age and the second thing is a handicap so for someone to be senior they simply need to be uh plus 55 for the first thing so the first thing here needs to be plus 55 and the second thing I think needs to be greater than seven so in there I'm going to type greater than seven and This needs to be greater than 55. Great. So now for each one of these, we need to figure out if this number is greater than uh 55 and if this number is greater than 55 as well. And we're going to see if that works. Um okay. And some people are saying now the lower the kata the more difficult the problem is. And uh we'll see. Yeah, they think that lower kata would be better. Um okay, great. Yeah, we'll see. We'll start with this and then we can move to even lower or or harder kata depending on how well we do here. Of course. Okay. So, we're getting the data. Of course, since we have a list of things, we want to have uh we want to map over it. For this, you can use the for loop or simply you can also use the map. So, we're going to just do the data and then we're going to map over it. Inside of here, I don't usually like to call things data, but that's how they call it. Uh it's not really meaningful. But in this case um let's simply do something like data and then each thing here is going to be data for a specific person. Let's call that info. So in the info we are looking at two different things. We are looking at the age and we are looking at this number right there. The age needs to be greater than 55. So we are going to say if info age is greater than 55 and so we can use the and operator and if handicap that's going to be info handicap but unfortunately I just noticed we're not working with objects here. So we we need to use info zero and info one to access these elements of an array. And if info 1 is greater than 7 at least that's how I understood this then we want to return something in this map more specifically this would be a filter. So let's see if this is true we simply want to return that specific info or we want to return that. So I'm going to expand this and this is going to be our if case. So if info is greater than 55 and if one is greater than seven in there then we can do something like this. We can return uh we can return senior right because if these are correct then we should return senior and that should be placed in an array else we want to return something else we want to return as the string says so return and let's do open just like so don't forget your semicolons and finally we have to return that whole thing that this returns which is an array of different strings either seniors or opens. Um, great question there. I see. Um, um, Ahmed asked why not for each? If we use the for each, uh, with for each, we could go through everything. But unfortunately, we couldn't return it because for each doesn't have a return value. With this, we can actually return it from a function. And that way, our function is going to return the expected output. Now, with that said, let's see if this is actually going to work. Now I'm going to click attempt for the first time and we'll see. Okay, we did pass some things but unfortunately we failed some and looks like we failed a longer one. Let's see why. Maybe I didn't read read the instructions correctly. That's normal. And what someone said don't check the solution before you try it. Yeah, we will not. Uh I'll just try to go through it with you guys. So let's see. Uh each list containing information. information consists of integer person's age and person's handicap. And do both of these need to be correct? Let's see. Okay, there we go. To be a senior must be 55 years old and have a handic um so looks like it's not u picking it up. Although we are checking for handypug greater than 55 and info greater than 7. Uh someone mentioned maybe more than equal to sorry greater than or equal to. Let's check that out. That's a great uh thing. Let's see. And that is actually the correct answer. So we were really close. Uh awesome. I think Will Stanley mentioned that first and uh Leon as well. So great job then. Uh, awesome. We successfully solved our first exercise in what was it like uh 10 minutes, less than 10 minutes. And someone asked does this output an array? And the answer is yes, it does. Uh, so we are returning an array right here. Um, someone asked what result would for each give us? So we know how to use the map instead. Uh, for each doesn't give us any output. Uh if we try doing the same thing with for each I can do that right there. For each always returns an undefined. As you can see if we now click attempt we got nothing. We got undefined for each one. So if you want to do some simple console logs or something in that case you can use a for each but whenever you have to actually return some data in those cases you need to use the map. Okay, great. Uh, so let's see if that works. Let's test it out one more time and that should work. Um, someone says create an empty array and push senior or open into it. Yeah, that works. Uh, but in this case, we're also putting it like immediately. So that's uh that same way. But yeah, Leon, great way. If we wanted to use um if you wanted to use for each then in that case we would have to push. So let's see how we can actually um there we go. Something happened right now. I didn't click anything but yeah looks like I completed it. Okay. So that's it. Can I get back to the solution? Maybe I wanted to optimize it a bit or with uh code wars you cannot go back. Let's see. So if you go to solutions, looks like it only tells me how the solution um looks like right afterwards. Let me see if I can uh train again. It's loading. Yeah, let's see. Someone else did something like this. Uh but let me also click uh train again to see if it's going to let me. Okay, it does let me. So we can get back. Great. I just copied someone else's solution um just to see how they did it. Usually when you solve these you don't just want to simply solve it and that's it. You want to research what's the best possible way to actually solve it. Uh someone said you could have used a for loop and pushed into an array. Of course that's also a possible solution. Great job Adam. So this is what other guy did. Uh I like his way of array destructuring. So now let's let's try to get back and let's try to form our our own uh most optimized solution. So we get the data. You can see he also used the data map. And then what he did here is he used array destructuring. Instead of simply having info, you can take out the things from the info. You can take out the age and the handicap by using array destructuring as you can see here. And then he did the same thing as we did. age is greater than 54 or we can say equal to or greater than 55 and handicap is greater than uh seven. Looks like he used 54 here that's okay. And then in this case he used the turnary operator to return either senior if those two cases are correct or open if only this case is correct. So with that said this is great. I think we should be able to uh submit it. But what we can also do is we can just immediately return this since this is an arrow function. It's a long one, but with arrow functions, you're going to notice this from from time to time. So now let's click attempt and let's see if our output is going to pass. Uh it says your output will be shown here. Uh let's see. Awesome. I see someone saying Python for the win. Yeah, we like we like JavaScript here, but Python is also great. Uh, so let's see. This is still loading. Your results are going to be shown here. Great. Uh, looks like it's it's loading. Let me try to refresh. How are you guys liking the stream so far? This is the first time we're doing this. I guess we have to write it from the start. Um, so let's let's just move to the next one. if we if we can or it's not going to let us let me see if I go here past. Yeah, there we go. We can see our past solution. So that's great. We can use our past one and then simply modify it. So what we said uh we're going to simply use this uh if we can return this if and simply make it into a turnary expression. So we can say if both of these are correct then return the senior else we can use the else just the colon sign else we're going to return the open and that's it now what we can do is simply put that also in here because it's an instant return and then this is also an instant return so we can just put it in one line and I think our solution should pass so I'm going to click attempt and it says sending request looks like it failed Where did we fail it? I think we're missing a parenthesy right here. Okay, we have some errors. Uh, let's see. Data.map. That's great. Oh, yeah. We're missing something here. Let's see. Yeah, this is here. Info0 info one. We said we're going to dstructure this. So, that's going to be age and handicap. And we can use age and handicap here. I agree. This is not really readable because it's all in one line. So, let's see. Oh, I think we're missing a closing tag for the map. Yeah, that that's correct. Great. Uh I see some people are joining right now. You're not late. We're just starting. We're getting warmed up. Uh great. And I think uh everybody's having great comments. That's amazing. Adam said, uh, curious if you use your function expression is just a preference or if there is an anything deeper. Uh, I love this way better than any live stream. This is better than the first presidential election. Great. Yeah, I'm glad. For someone, this is going to be really boring. For some, it's going to be really interesting. Uh, but everybody seems to be enjoying it so far. Uh, so yeah, this is it. This is our first solution. Looks really elegant, maybe a bit too long. So maybe in this case I would even dare to say that having it in two lines would be maybe just a bit more readable. Uh and Adam to answer your question uh error functions are simply just a bit more modern uh more clean and you can do instant returns. So let's attempt it one more time and finally move to the next question not to bore you guys. Great. So we can go back I guess here and we're going to continue doing these. So we have dubstep which is six Q and let's start training it. Okay. Uh, should I even read this or should we go straight to the input and output? What do you guys think? We can go ahead and give it a read, right? Uh, Polycarpus works as a DJ in the best Barland nightclub and he often uses dubstep music in his performance. Recently he decided to take a couple of old songs and make dupstep remixes from them. Let's assume that a song consists of some numbers of words that don't contain wobb to make this dup the premix of the song. Polycarpus inserts a certain number of words wobb wob. Okay, I see guys you just someone just want to read the input and output. But let's uh let's just do let's just try seeing the let's just skim through it. Um, so we have we basically have to create a song uh of words wobb wub wubby wobbw and that's going to be dubstep. So for example a song with words I am x can transform into a dubstep remix as wob I'm not going to even read it and cannot transform into this. Um, recently Johnny has heard Polycarpus' new dubstep dubstep track, but since he isn't into modern music, he decided to find out what was the initial song that Polycarpus remixed. Help Johnny restored the original song. Oh, this is going to be uh hard. Uh, I can see I see some people say read, some people say read it, some people say just go through the inputs and outputs, you know, just for fun. These are great. These are really, really nicely put together. So, I'm going to read through those, but just skim through those and go to inputs and export uh outputs. And I see Adam asked uh do professional programmers even read the problem or is it all about manipulation of input and output? Great question. Yeah, sometimes the problem is going to contain like key things to solve the exercise. But in most cases or sorry, for even for simpler exercises, input and output are going to be enough. But sometimes you will have to take a look at that. So now let's see the input consists of a simple uh or a single non-mpy string consisting only of uppercase English letters. The strings length doesn't exceed 200 characters and the output return the words of the initial song that polycarpus used to make a dubstep remix. Separate the words with a space. Okay, so we have this. I'm going to take it and we're going to put it as a comment right here. Let's do that right now. For these, we could even move to our Visual Studio Code, but for now, I think it's going to be fine. So, song decoder, uh, what? Yeah, let's see. Yeah, for example, uh, Adam, to answer your question, in this case, uh, if we just see the input, which is this, and the output, which is this, would we know how to actually decode it? because by looking at it, I don't see a clear way to record it. So, let's let's go through this one more time. Uh, insert a certain number of words before the first word of the song. The number may be zero. After the last word, the number may be zero and between words at least one between any pair of neighboring words. And then the boy glues together all the words including wobb in one string and plays the song at the club. So, I'm going to take that string actually. Uh, so we're going to say insert a certain number of words here. I'm going to take that. Can I make this a bit smaller? Looks like I cannot. Great. So, we have this. And then we're going to simply put it in comments like this. Just so we can see it all right in here. And then that's going to be the the basically the thing we have to do. Insert a certain number of words w before the first word of the song. So that's the first thing. After the last word, the number may be zero and between words. Okay, so we have to insert a word uh before the first word, after the last word and between words uh at least one between any pair of neighboring words. So let's uh indent this properly and then the big boy glues together all the words including wub in one string and plays the song. So we don't really care about that. The only thing we care about is this. inserts a certain number of words swap before the first word after the first word and between words. So at least one between any pair of neighboring words by seeing we have this now we can see wob we and then we have wub rub uh and then we are the champions basically we get that so we have to remove the wubs right remove ws between words at space and that's basically what we're getting so that's great I think someone just mentioned that in the comments so let's do that right now I'm going to put these as comments And let's start con song decoder we get the song which is basically one single string and in this case this is a task where we have to use string manipulation. So to do string manipulation we can either use regular expressions or we can simply you know find wubs and simply remove them. So for now what we can do is we can um find each and every wub. So we can do string.find find I think and then we need to put a space for each wub. I think the best case for for this would be string.replace. What replace does is replace takes in a uh a string that we have to find or a regular expression. But in this case we can use this wub. So we're saying replace every wob with a space just like so. And now some of you might be wondering, well, how did you know about this string that replace, right? Um well, this is something you're going to have to learn, right? You you just go through some um this you're going to get this in time. The more you learn, the more of these you're going to Google and um simply get them. So, for the first time, I wouldn't know this, right? This is not something you're born with. So, what I would do is I would Google replace something with something. And I'm going to teach you how to Google right here. replace uh something uh replace string uh JavaScript. So how can we replace something in a string okay JavaScript string lily praise. So now I'm teaching you how to Google which is an extremely important skill as a programmer as you can see usually what you want to go for is the MDN. In MDN you can find everything. So in this case I'm going to click the string.prototype.replace replace and in there you'll be able to see how this method behaves. As you can see if you have this thing uh we want to replace this specific thing in this case dog with monkey and that's it. Uh let's try with that and then we're going to try your guys' solution uh that you're giving in the comments. So in this case string.replace and we want to replace wub and we want to replace it with a space. So now I'm going to simply console lock this because this is not yet I think a done solution. So let's try doing that and let's click test. Okay. Uh string is not defined. Yeah because we have to do song.replace. I'm going to do run another test. And there we go. What we get? Uh what should we replace? Can we see the real output? I don't think we are. We're getting just that. But let me try to return this thing instead of replacing it. So return song.replace wobb with space. What should replace by one space? Um we're getting only the tests here. I'm interested if we can see what our actual output was. Uh let me see. So in here we have sample tests instructions and then skip. Um and there we go. Let me try clicking attempt if that's going to give us something more. No. What should replace with one space expected a Okay, great. So, it it doesn't work. Uh, someone mentioned replace all. That's a great question. Let's see. Does this have highlighting? Uh, like this. Let's just search JavaScript. Replace all. Let's just check it out. And there we go. Replace all JavaScript. Great. Um, someone is asking, is this my first experience with Code Wars? Yeah, I used other websites to to do practices, but I found code wars to be great. Uh, so that's why I'm basically with you guys going for the first time uh through code wars. So, we can use replace all. And let's see how that's going to go. And we get song that's replace all is not a function. So, let's see. Replace all method returns a string. And we're calling that on a string. So, that's good. And that should actually return something. Uh, there may be multiple spaces. Yeah, we're going to see. Nope, there is only one here. So if I do that and if I click test song that replace all is not a function. Let's just use this the old replace and then we're going to set it to global. Yeah, but I'm not I'm not interested. I'm interested in why I'm not seeing the output of this. Uh so I want to take this thing into a console. Maybe I have to call it down below. Uh or you know what? At this point, we're just going to move to Visual Studio Code. It's going to be easier. So, I'm going to go here, open a new JavaScript file, and that's going to be uh code wars.js. In here, you'll be able to see it better. So, after I do this, we're going to save it. And right there. There we go. We should see the JavaScript highlighting right now if we saved it as JS, which I think we did. There we go. We are back in. Awesome. So, yeah, we can just use a simple rag X, but let let's just see what's happening in here. Uh, I think we'll be able to run it with node. So, what we can do is open the terminal. Let's do that right now. And there we go. Make it just a bit smaller. There we go. So, I'm going to take the whole thing right here. And now we can test it with node properly. So, we're we're going to do something like this. Um, let's see. Uh, yeah, we're going to call this song decoder. And then in here we're simply going to pass in our demo string which in this case can be this. Okay, there we go. Now we should be able to run it with node. So if I do ls here, I can do node uh code wards. I I I didn't name it properly, but that's going to be code words uh.js in this case. if we are in the right directory which it looks we are not. Let's see where are we that's going to be into CD desktop and then we can do clear and we can get our code words. Uh great we need to console log it. So I'm going to do that right now. Awesome. And let's run it. Great. So we are getting this which means it is replacing this. But let's try using replace all as someone in the comment suggested. In that case, replace all is not a function. So, looks like replace all is not yet built in. But what we can do is we need to use a simple regular expression. So, in here, I'm going to go back here. And what we're going to do is we're going to use the regular expression instead of a simple string. So, if I go back in here, we can take this regular expression. And if you don't if you guys don't know what regular expressions are, they are basically the ways for us we can loop or find something in the string. So in this case, I'm going to replace this wub with wub in a regular expression. And there we have the G. G stands for global. So I think this should replace it on a global scale. But we're going to see. Uh so if I do that right now, let's try to run it. And there we go. This is successful. Yeah, it looks like the looks like the replace all method didn't work. I'm not sure if it's not yet built in or something. But yeah, basically WBG is correct. And I see you guys in the comments. Someone was saying that. So that was great. Uh WBG. And now let's try with something different in here. Or you know what? We can immediately try bringing that as a solution. Let's see if I go back in here and replace this function test. Okay. multiple spaces should be replaced by only one space. Okay. So we need to replace swab and we need to find multiple occurrences of of the same thing. So in this case we need to use we need to use the regular expression. So I'm going to use regular. There is a thing called regx 101. We're going to use that. Uh so if you go to regular expression 101 in there you can test your regular expressions. regx101.com. So in here we need to find a regular expression uh that basically finds all occurrences of wob not only one. So if you do wobg as we did right here. So wub g you can see what's going to happen if we have wub wub. There we go. Wub test wub. It properly finds all the matches. But unfortunately if it finds wobb wobb it's going to take them as different inputs. So what's happening is that instead of here giving us uh test or let's do something like this wob uh and then test one instead of giving us the word test and then test one. What's going to happen is they're going to be two spaces in here and the exercise doesn't want that. We need to have only one space. So, we need to find a way to match not only one singular WB, but also all incoming Wubs. I know there's some things to match multiple things, but let's see. Uh, how should we match that? Of course, if we do this, then it's going to take them, but that's only going to work for two different occurrences. Is there someone in the chat who knows his regular expressions? Uh, we need to use something here to make it basically work for everything. um for as long as we have like if if it's wub wub wub wub we need to replace all instances of that in this case let's see if does something help us here uh we need to use start of string end of string um sequences sequences quantifiers there we go this is it more yeah so what we need to use is uh right here zero one or more that's it plus so we need to use a plus. Uh, so if I go here, if I type a plus, let's see if that's going to do it. That still doesn't do it. Maybe we have to make this into a specific block. So, I need to make this maybe like this. Let's see. Still doesn't do it. Do I have to use forward slashes? Nope. Uh, let's see. So, we have to match this whole word. Do I use it as a string? Still doesn't do it. Let's see. Uh, so if I do that, and there we go. a plus. Oh, it's taking my maybe plus as a Yeah, it's that's correct. But we need to make this into the whole expression by itself. So maybe by There we go. This is great. Uh so what's happening right now is I place this into first capturing group and then we can have many wobbs as we want. So in this case, if you use this regular expression, I think it's going to take them as one instance wobbl not as two instances. So if we go back in here or rather in here, we can try using that regular expression right here. I'm going to click test. And looks like okay, that's great. We fixed it. So that part is fixed. But now in this case, uh looks like we also have to remove the trailing spaces. So we need to remove the spaces at the start and spaces at the end. I think there is the JavaScript uh trim method. So if you use string.trim, trim. That should actually work. Let's see. String.trim removes white spaces from both start and the end of the string. You can see if we have a greeting or hello world here, that's going to remove all the white spaces before and all the white spaces afterwards. So, that works great. Uh, now we basically have to use the string that thrim method. So if I go back here, what we have to do is afterwards this we simply call thetrim method as this is a simple function we can simply put it in one line and that should be it. This is an instant return. So now what we have basically is just this function con song decoder and let's see if we'll be able to bring back the old songs from dubsteps. If I click test, this actually passes. You have passed all the tests. That's great. We just learned some regular expressions as well as the trim operator and also the replace operator. So I just want to ask you guys, can you see how meaningful this is, right? How well it works? How how well you can learn things and you can learn the the language itself just by simply doing some exercises. And this is also great for problem solving in general. I know that some people asked me about some problem solving. So yeah, this is a great way to do some problem solving. Okay, great. With that said, we're going to try to attempt to solve it. So let's see if that's going to do it. There we go. All tests pass and we are ready to submit the solution. I see that somebody asked, "Will this video be saved for the future reference?" Most likely yes. This is the first of this kind. So, I'm still like wondering if it's going to be saved or not, but most likely yes. Um, awesome. So, let's see. Now, what I usually like to do is see some other exercises right there. So, how other people solve them. In this case, you can see this one is identical. Replace W plus and then trim. That's great. But what did somebody else use split? Okay, so this was some I think somebody mentioned this in comments um to use the split. So in here we split it by web. We filter it. Uh we pass in the this is kind of unreadable. Uh this is not so readable but this is um yeah but that that's fine I guess. This one take a look at this one. Uh we also split it but then they filter it in programming. This is used uh this is called a magic number or a magic variable. Why magic? Because it doesn't have anything um like any meaning. Why x? Why did he use x in a filter and not y a meaningful variable name? So we're kind of lost here. We don't know what this is solving in this case. I like his solution. His this is basically the same as ours. You can see a lot of people just did the same thing as we did. Uh I don't want to look at this one. Uh yeah, so you can see this one is obviously Oh, this is I'm not even I'm not even sure what's happening here. Uh so that's good. And let's keep moving forwards. Yeah, generally most are similar to ours. So how are you satisfied? This is cool. This was very cool. So I'm going to say very and that's it. I guess we can move to the next kata. Okay, great. Um, and now let's see. We have highest and lowest. Uh, and um, now I want to ask you guys, what type of katas do you want to do? Uh, and where can I see what kata is this? I can see this is the seven Q highest and lowest. Would you guys like something uh, simpler or something more complex? Okay, great. While I'm waiting for your questions, let me just uh tell you this. You know how we used a lot of methods uh in in last one. I just want to show you a course I released just not so long ago, basically a few days ago. If you take a look at here, what I did basically and this could be the answer if you're asking whether you want to you know um how you learn those methods that we use like the trim that replace and everything else. In this course I basically covered all of these methods four arrays uh for strings as well. You can see there is strings intro basic properties substring uh split a string repeat string reverse string and everything else is in there. So if you take some interest you can basically go to the course. It's just uh www complete path to JavaScript mastery and yeah, feel free to take a look. I might even give some discounts uh for the course just at the time of this um interview. But yeah, awesome. So, we're doing this. It's it's crazy. This seems like an interview, right? Because usually on YouTube, you guys always see like people having pre-recorded videos and these are usually, you know, per perfect. They are pre-recorded. Everything is correct. There there are no mistakes. But in this case um I'm also a human right so we all make mistakes and you guys here are to help me and we are here to solve these together. So let's let's keep that. You guys want it more complex which is great. Looks like this highest and lowest is one one of the simple ones. So what we can do uh let's just you know uh let let me see how can I choose between the harder ones. So, if I go here to home, uh, I can rank up, I guess. I can choose JavaScript fundamentals. Uh, let's see what else can we do. There we go. 7 Q. You know what? Let's just go. Yeah, let's just do this one. And then you guys are going to tell me how we can skip it and then move forwards. But this one seems like a really straightforward one. So it says create a function that turns the sum of um two low lowest positive numbers given an array of minimum four positive integers no floats that basically means that only whole numbers are going to be passed in. So for example when an array is passed like 19 54 42 277 the output should be seven uh because that's the sum of the two lowest integers five and two and that should return um and then output should be seven. Okay, so this one should return this thing here. And I see you guys have some more questions. Is C++ better or JavaScript for speed and interviews? uh C++ is more low-level than JavaScript is. So in that case, it's going to be faster as a programming language, but each one of these has uh different um you know purposes. JavaScript is used on the web. C++ is used and a lot of different things. Um and then somebody asked are fang like uh Facebook, Amazon, Google, Netflix and all of these companies impressed when we when we write code in C++, Java or JS. I guess everybody has its own programming language. It's fine whatever you do. So, okay, let's let's let's keep going with this. This one is not as easy as I assumed it's going to be. First, we have to find two different lowest integers in this array. And then what we have to do is we have to add them together and return them. So, in this case, I'm going to take this comment right there. We're going to pass paste it right here like so. And I'm also going to take this function right here. Somebody said, uh, or you know what, I'm not going to look at the comments for this one. Let let me try let's try doing it ourselves. Uh, usually you want to try doing everything yourself before you see the solution online. So I'm going to return this or I'm going to make this into an error function and simply we're going to take this as an example. Once we have the array of 19 542 277 the output should be seven because 5 + 2 is equal to 7. Okay. So first of all we have to go through these numbers and then find two lowest ones. What I would do in this case is I would sort them. So I would do numbers. And that sort is going to sort numbers um not correctly. Uh that's that's uh that's that's the thing you want to know with sort. It doesn't work as you would assume it would. So for example, if I pass the numbers or rather if I make the numbers I'm going to mock that right here. Now if I make the numbers equal to uh 1 2 3 or let's do something like 5 8 7 1 2 doesn't really matter. And now if I pass them in here, if so if I call the sum of two smallest numbers and if I pass in those numbers, you would assume that it's going to rank them up from lowest to largest. Right? If I do this and let's just simply console log the output. If I do console log output, what's going to happen is it's not or rather it is going to simply you know we have to return this but it is going to sort them properly. But the question is why it will those numbers but it won't some other numbers. So as you can see we do get uh 1578 which works. But now take a look at this. If I now add for example 11 22 55 and any other number like 123 you know anything really anything. If we do this now do you think it's going to work now? Let me know in the comments. I'm going to run it now. And there we go. We get 111 123 22 355. So obviously that doesn't work, right? So what we want to do in that case is we want to use a sort function to make it work. So we don't simply want to you know uh do this because it's not going to sort them. Uh for bigger numbers we don't want to add 1 and 11. What we want to do is we want to uh do one and three in this case. For that we have to use the proper sort method. So let's find more about sort. How we can do the sort in this case? Of course we can Google it. So you can do here you can go you can do sort and sort is going to tell you it sorts the letters or rather alphabet characters properly like uh D FJ M but with numbers it doesn't sort them in an ascending order you have to find out how to work to that so I want to show you a lecture from the course I did this because this is a really important part in JavaScript so if you go to I think that's going to be in here in strings strings and then we want to uh sort a string. So I'm going to search for array sort. Yeah, that's going to be in the array. We have to do is we have to have a separator or rather a sort function. So in here we want to have a function that sorts things properly. In this case we are saying made the two things be a and b and then we're doing a minus b. This is going to sort numbers in a specific order. If we use a minus b, that means that it's going to put each and every next character um before the first one. So it's going to sort them from lowest to highest characters or rather numbers. But if you exchange this to B minus A, then it's going to do a descending order. Let's try that. So if I go back in here and if I try doing something like this, A minus sorry, A and B and then we return A minus B. Now if we try running node as you can see we get 1 3 5 7 8. Now the sort works as it should. That's great. So now once we have numbers sorted what we want to do is we simply want to take the first two numbers right. Uh we know that this returns an array. So what we can basically do um what we can do is we can immediately do some array destructuring const number and then we can also do const second number like so. And this is basically pulling the two first numbers or the two lowest numbers uh from the array. And then in here what we can return is first number plus second number. And if I'm not mistaken, this should actually uh work. Let's check it out. In this case, we're passing this, but let's pass our original array that they gave us. So, in this case, that's going to be this. What I want to do is have that. And now, let's try it out. As you can see, we get seven as the exercise says. What do you guys say? Nice, right? Uh I see one comment or question asking why doesn't uh it subtract the numbers. Uh what's happening here is this is a function in here that's um responsible for sorting. So we're basically saying have two characters like a and b. It's going to go through the characters and it's it's going to say a minus is basically saying sort them in an ascending order. Make the five exchange by 19 because five is lower than 19. Then it's going to go keep looking. Is 19 greater than 42? Uh, it's lower than. So, we're going to keep it there. 2 is lower than 42. So, we're going to move it here. Then 42 is lower than 77. That's also going to work. Now, uh, five is lower than 19. That works. But two is also lower than 19. So, we're going to move it here. And basically, we're left off with this. And one final thing is going to move five or rather two to this side. And that's our sorted array that we're going to have. And then two and five are two lowest numbers. And that works. We immediately get our response. With that said, we can basically take this and can we simplify it even more? I don't think we do. Um, that's basically it. Yeah, this is how I would leave it. So, we can go back with this and we can go right in here and simply paste the code. Now, let's try to test it. As you can see, that solution works. And now let's try attempt it and see if it passes. It passes for absolutely all tests. That's great. We can submit the solution and move forward. Okay, it's submitting it right now. And I see someone in the comments, I think. Uh, let me take a look. Great. Uh Adam asked, "Is the course available?" Uh yeah, the course is available. The link is in the description and in there you should also have the discount code uh for the YouTube. So everyone who comes and buys the course from YouTube uh it really it basically gives you the discount. You just have to enter it at the checkout. Yeah, basically the link is in the description. Uh Adam, make sure to check it out. Awesome. With that said, let's move let's keep moving forwards. So check out code wars th red. I guess that's a subscription. We don't want to get that for now. And then we can keep moving forwards. So sum of two lowest positive integers. Uh isn't this what we did right now? Yeah, there we go. These are all the solutions. So what they did is basically the same thing. They got an array and then what we have is number.sort. The same thing. But now take a look. Compare this approach uh with the one that we have. I think if we go to my solution, we should be able to see it. Let's see. uh only show my solutions. It's loading right now, but I just wanted to let you know how this thing looks so much worse than ES6 because you can see we have a function here, A and B. We have a return here. Uh you know, everything is here, but only the logic should really appear. Yeah, there we go. So, this is the solution. So, you can see how much cleaner does it look like. Great. So, now let's move to the old solutions and let's let's see what's happening there. It's loading a bit slower since we're on stream, but that's that's great. No worries. Great. So, we have that one. Oh, take a look at this one. This one is basically identical as ours. That's great. That means that you usually did it correctly because a lot of people really did it the same way um the same way as you did it. In this case, he only used var and a function, but it's basically the same. This one, this one, on the other hand, uh yeah, you can see we're doing we're doing a for loop here, and he decided to go for a basic approach of just using a four or rather he did more of the things himself rather than using a predefined uh predefined you know uh sort method that JavaScript offers. So this could even have the you know higher uh or rather lower uh complexity. Uh someone asked about the big O of the sort method. That's a great question u and complexity of the algorithm. We could go a bit into complexity of algorithms but let's try to get the complexity of this one. So what we are doing is you have the n numbers right there and then this loop is looping n times and then he has a simple if else and then that's it. So the complexity of this algorithm would be O of N. Basically saying that um as we put more characters into it or numbers as we put like five characters the complexity is going to be O of five. And if we keep moving if we add 100 characters it's going to be O of 100. So it's not going to you know extend exponentially or it's not going to be less performant if we have a lot of characters. On the other hand, a great question is what is the O of N uh of the sort method? Is this more performant or is it not? Um and somebody said surprised that nobody used min1 and mean to approach. Uh yeah, somebody did. Yeah, somebody did a virus. Great. You just noticed it. Uh so yeah, that's that's cool. A lot of different solutions, a lot of different things. This guy you sort them, slice them, reduce them, but it also works. So that's it. Um, and we can even Google that, you know. Let's do that right now. So, we are interested in O of N. So, O of N of the sort JavaScript, right? We want to do that. So, let's check it out right now. O of N sort JavaScript. Let's see if Google is going to give us uh something. So, let's see syntax for sorting in JavaScript. You may Yeah, looks like it's O N squared. Let's take a look. It's always interesting learning these complex things. This is you know more complex than simply solving the exercise. So yeah there we have tlddr too long didn't read we just got the explanation. So in this case for arrays containing 10 or fewer elements time complexity issort. So what we can do is um it's yeah it's o of n squared and space complexity is o of one. Yeah great. So basically the solution with a normal for loop uh what is happening is that um you know yeah it it simply it is more performant but this way is um simply easier let's say for us what we can do um and um let's I was just thinking about something uh to sort it yeah let's take a look the complexity sort uh I was meaning to pull some kind of a visualiz ization for you know sorts and stuff like that but this also it's it's not that big of a deal. Let's simply move to the next one. So in here let's go to the next kada and let's see what's happening. The next one is list filtering. How are you guys doing? By the way, we're just doing a live stream. Where are you from? How are you doing? What's happening? You loving the stream so far. I got a question uh from uh Bogdan here and I'm going to put it in here in in comments because it's a great question. So he asked uh what's your opinion on algorithms and the big O notation when it comes to the front end more specifically front-end developers. So what should front-end developers should they even be concerned with the big O notation? Uh let's see. So that's a great question. Uh what's basically, you know, if you're working in low-level languages like C or stuff like that, um you're really concerned with complexity or rather with speed and efficiency. You're most likely working on some uh machines that you really need to be performant. And in this case, when you're working with JavaScript, you're most likely working on web and you don't really care about, you know, the efficiency that much because the difference of O of N and O of N squared in the situation where we had the sort method and we also had the normal for loop method. You know, for for 10 inputs, what's going to happen for 10 inputs? The complexity is going to be uh 10 squared here, which is basically going to be 100. And in this case it's going to be 10. For thousand inputs this is going to be a,000 and this is going to be 10,000. But you know JavaScript actually sorts this in I would say you know less than less than a millisecond. So if this took less than a millisecond something like this if it took this much time this much seconds and this thing took uh let's say this much second because it's it's not that big of a difference. But in this case, if you have a larger array like thousand elements or something, this thing could have taken literally 1 millisecond. But this thing wouldn't be so much more performant. It would be like 0.01 maybe. Who knows? But it's not that big of a deal. You cannot really notice the difference that much in front-end development. So I would say don't really worry about that too much. Try to make your code as readable as possible. But still it's good to have that knowledge in your brain and just just so you can you know think about it from that side. That's great. Awesome. So with that said, let's move forwards. Let's see. Do we have some more questions or comments? Uh great. Um will the stream stay afterwards? Most likely yes. Since this is the first one, I'm still thinking about it, but most likely it will. And if you guys like it, I will even uh you know do more live streams of this type. Uh so we have some people from Ukraine, South Africa. Um someone asking is there a schedule or this is a one-time thing. This is the first time. If you guys seem to be liking it, I will make it a schedule thing and we'll see more more of these happening more often. Uh Netherlands joining in and uh that's it. So let's move let's move forwards. So is in this kata you're required to given a string replace every letter with its position in the alphabet. This is an interesting one. So if anything in the text isn't a letter ignore it and don't return it but replace letters A1 and B2 and so on. So we have an example alphabet the sunset uh runs um the sunset sets at 12:00 should turn 20 8 5 and so on. Great. We have some people here from Czech Republic, Los Angeles, Serbia. Awesome. Welcome to all of you. So, let's keep moving forwards. Uh, in this case, we want to take all the letters from the alphabet and we want to map them as numbers. So, in this case, I'm going to take this whole thing in here and we're going to paste it to our Visual Studio Code. I'm going to take it here, make this a bit smaller. It doesn't have to be that big. And make it as a comment. I think somebody asked how do you make everything as a comment at once? You simply highlight it and that's going to be command or control forward slash. Um, great. So yeah, let's let's do it. So we need to first make take the alphabet and then map it to numbers. Uh, what we have to do is we have to go to I guess Google and then we can have have the alphabet uh numbers. Uh, that's going to be the easiest way to do it I guess. So if I do this alphabet numbers and simply copy I'm I'm too lazy to write the alphabet and the numbers for each letter myself. So myself. So what we're going to do is alphabet numbers copy and paste. That should be good. Uh let's see. We're getting some fancy letters and numbers. We don't want that. While that is loading, uh someone asked me where I am from. I'm from Croatia. Nice to meet you. And somebody's asking if they have some knowledge of JavaScript. Um should I also learn something like Vue, Angular or React? You should first ma master JavaScript like really really master it. That's the main premise of the course I created is to fully master JavaScript and only then you know move to these frameworks because if you move with to the frameworks without having proper knowledge of JavaScript, you're going to have a hard time because all of these you know frameworks and libraries basically are simply JavaScript nothing more. And now looks like this is not going to work because I'm trying to be too general. So let's simply do JavaScript just so we can get an array of um of alphabet JavaScript. Let me see. Alphabet JavaScript array. Yeah, this is what we want to do basically. How to generate an array of alphabet in jQuery. No, we don't want jQuery. We're going to just get back. Yeah, somebody say you can just uh type ABCD E, but we're just going to uh you know, copy it. Let me see if there is a way to actually take it immediately. Generate the alphabet in JavaScript. Looks like that's going to work. I know this is taking more than it should be, but you know, it's live, so that's fine. So, this is crazy. There we go. This is one I wanted. And then I guess we have to make each one just take the uh numbers for that. This is also a cool one. we generate numbers and then for that we take the string but let's simply take all the letters from the alphabet like this. So I'm going to take that and now we have all the letters. Uh the letters are going to be both uh uppercased and lowerase. So we're going to have to take care about that. Uh somebody was nice enough or kind enough to bring them all in an array for me in the comments. So uh that's that's great. So if I do that, I'm going to simply take that thing that somebody pasted in there. Let's hope there are not there are not mistakes there. He even had const alphabet there. So thank you so much. I think it's Daniel. Great. Um and now what we can do is we can basically have our function. Did I copy the function? I don't think I did. Let's take the function. And then in here we want to take the text. The text is going to be this thing. So if I take that, I'm just going to put it here as a reference. Um, okay. We have it here as a reference. And now what we want to do is we first want to take that text and we want to put it to lowerase to lowerase because all things in our uh in our letters array are lowercase and then this thing can have uppercase letters. We want to make it you know unique. We want to make it all uh universal. So in this case we're going to do that and then text to lowercase. And what we can do is return it. Once it is lowercased, we want to see what characters is it having. So we want to loop over the characters of that thing. For that, what could we use? We can use the um for method to loop through each character. Do we have to take care of the spaces? I don't think we have. No, the S is there. So we basically have to remove all the white spaces as well. We can do that by doing dot um split or join. That's going to be dot join. And we can simply join it. Uh but this this goes on an array. This is a string. Uh so let's first let's first yeah a string used to separate one element from an array. What we can do is first split it I guess. Yeah let's split it into different words and then join it. So that's split or you know what this is already. What do you guys say? Should we just uh join them join the words right there or something something different? I'll try to answer the questions while you let me know. So, somebody asked for the course um please consider giving regional discounts. I am giving discounts both to students and to people from low-income countries. So, feel free to shoot me an email. Uh you should be able to find it um in in the description. Just say where you're from and and that's it. I'll give you a discount. Somebody asked, "Have you ever considered living and getting a job in the US?" That's a great question. Who knows? Uh life life is long. So yeah, we'll we'll see on on the go. Um, great. So in this case, what we want to do is string to lowerase and we want to map over the letters, I guess. So we have to find the value of that lever of that thing in this array. And that's going to be array index off I think. So alphabetindex off of a specific character. So in here we need to put a specific character. In this case, uh, you know, the easiest way would maybe be to loop over it. But let me just see this uh remove white uh remove white space uh remove spaces from string. Even some things like this, you know, it's still you can still Google it. It's going to be right there pretty easily. Let me show you that. So yeah, we basically we can use the replace method one more time to replace all the white spaces. How handy is that, right? So we can say uh lowercase and then we can sayreplace and we can use that uh method we learned string.replace we can pass in that regular expression and simply remove that. So how can we test it out now? Well let's simply try to console log this thing and then see what that is going to give us. So if I do that let me see. There we go. And now what I can do is I can simply call the function. So that's going to be alphabet position. And what we're going to do is we're going to pass in this string right here. And let's see how it's going to look like. There we go. Let's call this thing right now. And it's going to say syntax error an invalid token. Uh let's see where is that invalid token. That should be at line 16 seems to be. So no. Uh, maybe it's happening right here somewhere, but I'm not seeing it. Alphabet replace uh invalid token. Const alphabet. That seems all right to me. But let me know if you see something that's uh that's not correct. Line nine. Yeah. Yeah, it's definitely in the alphabet. Did Did you uh Daniel, did you send the correct alphabet over? Let's take a look. Uh looks like there is a comma missing, I guess, or something. I'm not seeing it on the first one. So, yeah, it's definitely there. Uh, let's see what is happening. Invalid token. And this is this is an array of strings. All of this seems to be okay. M O P QRS TU VWXY Z. This seems fine to me. What do you guys say? We can also use the different one that we found. Should also work. Um, okay. Let me take a look at that. Okay. We can also use this thing. Uh, looks like this one doesn't work. So, like this alphabet and then what we're going to do is say const alphabet is equal to the string of characters and simply split them uh like so to make them into an array. So, if you do that now, let's see if this is going to do it. Let's call it one more time. There we go. The sunset 12:00. And do we have to remove this character or not? Uh I'm not sure if they specified that. Uh let's see. Yeah, I think we have to remove all special characters, right? So for that we have to find a regular expression to remove all the characters. Uh so what we have to do is basically we can Google it again. Remove special characters from string in JavaScript. you know, you're going to find yourself Googling a lot, which is not a good thing. So, if I bring this back here, yeah, you can see a Google something, but I'm going to show you an amazing tool right now, which I'm actually part of. I want to help you use that. So, in here, we say string.replace, and it basically says take all the characters that are alphabetical characters. We can do that. Let's do that right now. So, I'm going to take this regular expression and simply instead of empty, I'm going to paste that. So it's going to say keep all the things uh that are alphabetical but I don't think yeah this is going to do it or sorry that are not. So this is the not operator. So we have to remove everything. And in this case are we going to have that special character? As you can see now we have the spaces. So we have to remove this I think. And there we go. The sunset sets 12:00. That works. No special characters. No spaces. That's great. So now we have all the characters. Now we have to loop over them and then display a specific character. So since this is an array of characters, what we can do is we can split them I would say. So let's do something like that dotsplit. We're going to split each and every character into an array and then we can map over that array where we have each letter. And then what we want to do is we want to take the alphabet and say in which number or in which space in this alphabet is that specific letter in and this part is going to return it. Now what's happening? You can see prettier did this for me. We have a lot of methods happening here, a lot of logic. So what I'm going to do is I'm going to exchange this to a const make this into an arrow function. And finally what we're going to do is just have it like this. We can have it an instant return. So just remove the curly braces and have it as an instant return with simply parenthesy. It just spaces it out like this. I don't quite like that. So I'm going to go back to having curly braces and a normal return statement. So now this should be the solution. Let's take a look. I'm going to console log the output of this. And then finally uh let's see what the output should be. So the string should be like this. Now if I call it we get minus one. That's it. So it couldn't find the index of of a specific letter. Looks like um let's see what's happening. So we're mapping over it. We have we split all the characters. Oh, I'm missing a separator right there. This needs to be a separator to separate all the characters one by one. So now if we go there we have 197 4 18 20 oh we are taking the index off of the letter right but we have to make it one step bigger because uh this is an index. Indices start at zero but we actually want to increment it by one. So in here we're going to return this plus one. In that case, if you run it again, as you can see, we get 28 51 19 all the way to the end. 15 311 15311. This seems to be correct. I'm going to take this function and try to put it as a solution. Yeah, great. I'm going to go back in here. Did I lost my browser? And there we go. Awesome. I'm going to paste our solution and let's click test. It didn't pass because I didn't copy the alphabet. What a mistake. There we go. I'm going to copy the alphabet right here. Let me close this and going right here. Paste the alphabet and simply test it out. In this case, it didn't pass. So, looks like there is one one small thing. We have uh 28. Oh, who would have who would find an error right here, right? uh instead got 28 51 19 21 14 95 20 19 five 20 19 1 20 23 5 Oh, we have to have Oh, it expected a string. Yeah, my bad. So, it has to return a string and not an array. See that we have it currently as an array. So, what we have to do is we have to join it back into a string. So we have to have join and then join it back into a string. I think this is actually going to do it. If I now click test, it still failed because we have to join them but add a space in between. So I just added a space right there. Now if I call it, there we go. The solution passed. Uh Bogdan also helped us solve something. And uh yeah, that's it. We solved yet another solution. Uh yeah, some of Roger just said uh join and there we go. We just implemented our join and everything works perfectly. Uh now you can see we used a lot of methods right here, right? And uh if you didn't know these methods at at the top of your head, which you of course cannot, right? Because you are just, you know, um starting to learn JavaScript, how are you going to know that these even exist? Uh well, of course, first you have to go, you have to get some practice, but where is the time or where where is the place that you can actually learn these methods, right? Well, of course, you could just Google them or try googling each and everything. But that's kind of slow. Like if you if you don't know the two lowercase method, you would have to Google, oh, how to make a string lowercase in JavaScript, right? And then you would go, oh, how to remove all special special characters, how to um split all the characters, how to join it back into array, how to map over them. That loses your time. You're wasting time on that. Uh but what you can do is, you know, first of all, you can, you know, find a lot of places where you can find these. But that's what I did in my course. In in the course you can see we have all of these different methods starting from strings in detail where we have all the different things about strings like change string case uppercase lowerase search for a substring get a substring split a string repeat trim reverse and then for arrays even more methods. So this is extremely useful if you want to take a deep dive into JavaScript. I would definitely suggest taking a look in the description. Um awesome. Great. And with that said, uh even though I did this, I still had to Google some things, right? You cannot simply remember everything. But for that, there is a great software called mem.dev. I'm not sure if you have heard of it, uh but it's a great basically website that allows you to practice spaced repetition to learn things that you want to code. See, never forget what you learn. So now that we know how to use this, you have to actually remember how to use them, how to write them, just so you don't have to go back to Google every time. So now let me show you how I would use that. You would go back in here, log in, and then you can see I already have some things that I practice right here. Uh for example, how to push method works and stuff like that. But basically, the only thing you have to do is click create a new card. And now in here, you can enter a code snippet to remember. So what we could do is we can practice each one of these methods. For example, let's take the first one at the start. I'm going to take this thing and then we can go back in here. I'm going to paste this make this equal to JavaScript and we can say return text dot to lowerase or we can simply do it like this. Um text to lowerase. Now what you want to learn in here, what you want to remember, you simply highlight it. I highlight dot to lowerase. That's the method to lowerase. This card is about JavaScript and I just learned how to lowercase a string like that. Okay, lowerase a string. We save it and that's it. Our card is saved. Let's do a few more. Let's do a replace. So, how or let's do a split. Split a string. So, I'm going to copy this string.split. I'm going to highlight this one and let's save it. How to split. There we go. And let's add a few more. Let's add a map. So in in this case, you can learn how to add a map. In this case, that's going to be array.m map. And we're going to just paste ours. There we go. So now I'm going to save that as well. And I'm going to highlight this whole part. Or you can highlight basically whatever you want. In this case, we're adding letters. In this case, I would just want to do map. So how to um map over the array. Great. So if I now save these, you can go to your cards and you can train. You can train on the cards you added. So if I click train here and start training. Now we can go back to remembering what we had. So it's in here. It says map over the array. That's an easy one, right? We can just say map. That's it. Uh we can say and now it asks you was it too hard for you or was it easy? It was easy, right? This one I added this one previously. Add elements in the middle of the array. This one is tough, right? We have to use names dot and that's going to be most likely slice. Where do we want to add it? We want to add it maybe at the second position. And what do we want to add in here? We had John, Bob, David, David, and Mark. But looks like we added Jenny and Johnny. So, we want to add Jenny and Johnny after the second place. Let's see if that is correct. And looks like it is just a bit off. We have to say two and zero. I completely missed that second thing. So, I'm going to say this wasn't too easy. This was just good. Now, we get a second one. But I think you get the point. You add things onto this and then you practice. That way, you won't have to Google all the time. You will simply be able to remember everything on top of your mind. And that is on how to be a good developer. First, learn something, learn all the methods, and then practice them. That way, your problem solving will be so much easier because you're going to have to worry only about the actual problem, not how the methods themselves work. Great. I've been talking for a long time. Let me take a glass of water and let's keep it moving. Uh, so let's go to the next one. I'm going to click where where do we have it? This is already done, right? So, I should be able to attempt it and then we should be able to submit it. Everything passed. Let's submit it and let's see other people's solution. There we go. It's submitting right now. I think we're going to do just a few more. Maybe one or two. What do you guys say? Okay, great. It is submitted. And take a look at this. Uh uh first of all, we unlocked a new privilege 25 honor. Now you have the ability to vote on betaata. That's cool, I guess. But take a look at this. Oh, we have one more. We ranked up. Nice. So, what's happening basically is that the first solution right there is almost exactly the same as ours. That That's amazing. Uh and then the second one is really similar, but it loops through the things and it uses ask key codes to generate alphabet. We just took the easier way and we just copy the alphabet right there. Ooh, this one is cool. Uh text to uppercase. So, he decided to go to uppercase, not lowerase. That's fine. He also used the uppercase replace here. the same as we did. He used the split the same as we did, but then he optimized his map to use the character codes and not the character, not the alphabet we created. So, this could be a better solution. That's great. Okay, now let's keep moving to the next one. Uh, I guess if we click next one here, we'll be able to see what it is. And this one is vowel count. Let's try to solve that one. We can click train. Um, somebody asked uh there is exercises like sorting or group array of objects. I uh I think there are a lot of exercises you'll be able to find uh something you want to train on. And then Adam said uh thank you for creating for showing me. Yeah, no worries. It's it's a great software to use. With that said, let's keep the pace up and let's keep moving to the next one which is vowel count. uh remember the number of count of vowels in a given string we will consider a e e o u uh but not y and the input string will only consist of lowercase letters and or spaces. So for example if we if we have the word abracadabra it should be five because it's a a a and a five vowels. Great. Uh, with that said, let's grab this, move to our Visual Studio Code, and let's try to implement the logic for counting the vowels. Now, I'm going to not do anything here for a minute. And I want you all here who are watching to turn on your brain and write me in the comments on how would you solve this specific problem. How would you count the wows? Okay, comments are starting to get in. Uh Leon said uh for off loop. Uh yell said create a reg to only count the a and I guess everything else only the vowels. Uh and then somebody else said if character is equal to a e and then all the others then increment the vowel count. That's that's that's nice solutions. Um let me see. Yeah, let's try with uh well let's try with Leon solution first. I'm going to copy his whole thing here and let's try let's try by doing that. So he said take this take the whole part if character is equal to this in this case we would have to make a for off loop right or we can make a for loop it doesn't really matter uh this is a for loop but but for off is sometimes it just looks a bit better so we can say for off and we can say con for const letter like this const letter of uh string so letter of string and then if letter uh if letter is equal to and then he said a or all the other vowels what we can do unfortunately we cannot simply do it like this with commas that's not going to work uh we need to have a separate if check in in each one of these right so what we can say if letter is equal to this uh or if letter is equal to this or letter is equal to this or letter is equal to this. I missed it. Uh like this. Always use triple equals by the way. It's it it is simply better. And or letter is equal to this thing. Let's take a look. Yeah, I completely lost myself there in all the equalities. So we have this uh letter is equal to and there we go. Something like this should work, right? If we add all the or signs in between not like this and I completely lost myself there but this this should do it. So if I do this letter is equal to a letter is equal to E letter is equal to I O or U. In that case we want to do something. Uh so if I take it like this in that case what we want to do let's see if the predator is going to move this into each line for me. Looks like it it won't. But let's let's do that ourselves. It's just going to be easier to see what's happening. So, we have all of these. So, if this is the case, in that case, uh, somebody say I missed the I. It's there, I hope. So, yeah, this is going to work. And now what we want to do, if this is the case, we want to increment the, uh, vowels count, right? So, that's going to be vowels count plus+ or simply plus equal to one. It's whatever you choose. And then simply return vowels count, right? Let's see if that's going to work. So if we have the word abracadabra as we had it here that means that once we call the get count and make let me make this a bit smaller. Once we call the get count and put the word abracadabra in there we're going to also console log it. And now let's see what the output is going to be. There we go. This doesn't work. We have something with this if that's not good. Uh, four. That's good. Wow. Count the errors on line five. Looks like H. That's interesting. What did we miss? Uh, letter letter. Hm. It seems all right, but looks like it's complaining about something. Uh, so what is that? If letter is equal to this. Oh, yeah. Or or or yeah, looks like it's not getting it right now, which is kind of weird. Uh, but also fine. This is I would say this is not the best approach, right? Because you have to be really precise on what you want to do there. Uh and Neiel suggested uh let me see regular expressions that would be great. I think that would be a bit cleaner. Uh somebody else said make an array of wobbles and loop through check if current characters is included in the vowels array. That would be u better. That would be better. Um, Adam said, "I define wobbles, both lowercase and uppercase, and then loop through them with an array then he would increment vowels by one every time they see a vowel." Somebody even gave the whole solution right there, Arvin. Uh, awesome. So, let let me take a look. Yeah, I would use I would most likely create an array with characters a and then all of these and then simply increment the count if they are included in the array. So let me take the solution that somebody else provided and let's see how clean is that there are some good programmers here watching this video. That's awesome. So this is the method. Uh let's see first you know what let me without without even uh looking at it let me try testing it and see if it passes. So currently it doesn't pass because n is undefined. Uh what did he mean by n? Let's think about it. So he's looking for these characters without the Y and then or C dot that's character repeat N. Uh yeah, so this is um a lot of logic here happening. I wouldn't say it's clean. It's it's really clean because it's you know it's hard for me to read as soon as I saw it. But I guess we want to split the string map over the characters and then if C matches. So if there is a match then return a then return a c. repeat n. So the number of times the character is repeating. But why don't we simply increment that? So what why don't we have the let vowel wobble count and then simply set it to zero at default. Um and then simply in there. Oh there there we go. And then simply increment it. So if this is the case we want to increment it. And if that is the case, we don't want to do. Yeah. So, this is this is kind of weird. I wouldn't do that this way, but still, thank you so much for your solution. Uh maybe you had something different in mind that I'm not seeing right now. Uh but yeah, so let's let's try doing that uh one step at a time. So, we have this regular expression which I think is good. So, we can say uh we can loop over this whole thing. And then what we can say once we loop over it, we have the I. Let's use the for off again because it's just a bit cleaner. We have the letter and we have the string. In this case, what we want to do is we want to say if um letter match that match is the matter for regular expressions. Uh and now if that is correct, we simply want to increment the vowel count plus+ and then return the vowel count. Let's see if this is going to uh make it if if the regular expression is correct. And I want to return the vowel count. Okay, let's take a look. Um and that needs to be inside of the function. We are losing our second parenthesy here. And that's good. Let's try to run it. and we get five which means this is correct. Uh Arvin just sent a new solution which I get guess now works. Uh but it it is just a bit more confusing than the current one. So this is uh his approach. I'm going to put it here. Thank you by the way so much for sending it. So this is his approach. Uh it it's good but right now right off the bat I wouldn't know you know uh what is it doing? Let and let me try calling it and see if it works now. Yeah, unfortunately there's still some errors. uh but that's that's that's fine you know it's it's not a problem. We have this approach. We simply have this and then we are seeing if letters match uh these characters and if that is the case what we do is we simply increment the vowel count. Uh does this make sense for you guys? What do you say? Um is this clear enough or should we make it even clearer? For me personally, I think this is uh this is just just good enough. We could of course go for something uh more uh I don't know a bit shorter maybe or something, but I would say this is uh good for now. I'm going to take it back here. And what we're going to do is simply test it out and see if it works. Oh, it doesn't work. It expected five, but instead got zero. Uh, looks like I accidentally copied it over the whole thing. So, let's do it like this. I test it out and what do we get? It passed all the tests. Let's attempt to pass the whole thing. And it does work. Somebody asked, "How about using a reducer?" That's a great question. Maybe you Yeah, you meant like the reduce array method. That's a great question. So, reduce method is the most complex array method without any doubt. Um so what what happens is that reduce tries to get all the elements in the array. So it gets all the elements in the array like a b c and the main goal of the reduce is to output a single value. So that that's the main goal of the reduce you know um in this case what we want to do is take in the array of characters. In this case let's say abracadabra. So it's going to be a b r a. I'm going to do just the first four. And that if this is the case we want to output two. So question if we can use the reduce method is absolutely correct. We can it is possible. Um so to do that we would first have to transform our string into a into an array. So let's do that right now. String and we already learned how to do that right string dot and then we simply have to split it split it into specific characters. Now that we have that we can use the reduce method. So we can use reduce. Reduce takes in two things and it also takes in the initial value. So initial value is going to be zero. And the things that the reduce takes are going to be current value and also it is going to be the accumulator. So it's accumulator first and then the current value. And I will explain how the uh reduce method works. But let's first try to see how we can solve this um without it. So if we do this um reduce method works that in in a way that it first takes the first thing so the initial value and then each time it increments the current value to the accumulator. For example, if the initial value is zero at the start, it's going to start adding new values in this case a b and c to it. But what we want to do is we don't want to simply add these because these are no numbers. We simply want to take uh the accumulator. The accumulator is going to be the current letter. So we can call it like that letter. And now if the letter is one of those uh then we want to do something. So we can say if letter match we're going to use the same if statement. If letter match then we want to return um we want to return accumulator or rather let's think about it we want to return accumulator so this is going to be letter no this is going to stay accumulator and this is going to be letter my bad there so there we want to return the accumulator uh plus one I guess right let's see if this is going to make sense I know this is a bit confusing right now but I'll try to explain explain it in a better way. So if I do this right now and try to call it again, we do get zero because we are not returning anything, we have to return this const vowel count. So in this case, our vowel count is going to become this thing and that could potentially work. Unfortunately, we're getting nan. So let's see what the accumulator is equal to. I'm going to console log the accumulator and let's see what that is equal to. It is equal to undefined each time. So this split potentially didn't work properly. Um looks like it did, but maybe it's getting Oh, it's getting it at zero. Yeah. So this is the accumulator, but the letter should be correct, right? So letter letter should be each time changing to Oh, it's not being changed. That's interesting. So it's still taking the just one thing. Um let's see why. Let's see what Let's see what this thing is after we split the string right there. Accum. Somebody asked about the accumulator.length. That could be a great thing. Uh yeah, that could fix it. But let me first see if the console log string that's split. That should be pretty straightforward, right? We should simply get a string into yeah, we we do get the characters uh right there. Um, so for each character we are in there and we want to check each character what the actual thing is. Turn accumulator outside of the if. I think that is the correct. Yeah, that's definitely the correct thing. Let's take a look what's happening. If we do that, we get five. Awesome. I see all of you guys. Yeah, return zero and false. You need to return accumulator even outside of the if block. Uh, that's amazing. Uh, great job guys. So we have this. I see there are a lot of great developers right here. Awesome. So if you do this for Abracadabra, we do get the number five. As you can see here in the console that works perfectly. U what we want to do is we can now simplify it. We have a simple if and else. In this case we can use a turnary operator. So we can say if this is true then return this in this case accumulator + one else return the accumulator like this and we can simply put the return in front of it. Considering that we im just have one thing inside of there which is a return. We don't even have to have the return. We can just leave it as an immediate return from a function like this. And then you end up with something that looks like this, which is a huge function. Uh, but I guess should be fine. Let's see. We have a syntax error somewhere. Are we missing a parenthesy? We sure are. Uh, let's space it out properly. So, we have the reduce and after the reduce, what we have is the initial parameter and then we have zero, right? So, if I do this, uh, we don't have Oh, there we go. I just found it. So this is the thing that shouldn't shouldn't have been there. Now we have that we have the zero. Close one. Close the second. And there we go. That's great. So now what we're doing is we're simply returning the output immediately right there. If I save it, that doesn't look all that good. But we can even make it into one line arrow function. We just declare vowel count here and then we immediately return it. There is no need to even put it in a variable. We can just say return and then put the value of the vowel count right there. And then we're going to end up with looking something like this. And we can even put it in one line. This is a huge oneliner. I wouldn't recommend doing that. But you know, if you have uh your code or text put to a bit smaller, you can see it. Great. But for something like this, uh this would even make sense. You know what? Let's just put it into a new line and put a normal return there. it's just a bit more visible. It depends on the personal preference. So now we're going to take this code and we're going to put it back to code works. You can see this is our previous approach and uh this is the new approach. Now I want to ask you I'm going to take this approach here and I want to ask you a question. Which approach do you guys prefer? Do you do you prefer the first approach or do you prefer the second approach? And I can even make a poll. I think there is a uh straw poll online. So, I'm going to make a real time poll. You'll be able to vote in the comments and then we get what do you think. So, I'm going to say which one do you prefer? Uh and I'm going to put that right here. Straw poll as you can see. So, which one do you prefer? you're going to say the one with the reduce and the other one is going to be a bit longer one but also you know works great and now I'm going to create that poll and I'm going to send you a link to the poll in the description and then you'll be able to vote on that. So I'm going to share it URL and there we go. You can vote in the comments. You can click on that link and then you should be able to vote. I'm really interested in seeing what do you guys say. Which one do you prefer? Which function here makes more sense to you. Of course, both approaches are correct. It is only a personal preference. I'm going to wait for you guys to comment a bit. Let me know what you think. Oh, did they did they close a poll? I think I'm going to open it one more time to look the the results coming in. Let me get it right here right now. It's opening it right now. And I think you guys are starting to comment. Uh, and here are the results. Let's see. They're they should be populating in real time. So, if we get that. Okay, that that's interesting. So votes are coming in. I'm g I'm reading your comments. Um people are saying uh somebody mentioned the concise approach because it looks cleaner. Somebody said I like the original one before you did that. So it really depends on the person, but seems that most people uh like the longer one because it's more readable. Uh and this is this is a thing that is definitely important to consider once you're writing code. Should the code be more concise like this one here is or should it be more readable for everyone reading it? That that's a great question, right? And in this case, looks like it's uh it's kind of mixed, but still uh the longer one, the more readable one definitely wins the round. Uh an interesting thing definitely would be to check if there is any time differences in the execution of these two, but I don't think we can do that right now. Now, do we have Yeah, we do have the execution time, but I don't think it's going to be much of a difference. So, if I just uh take this one, the longer one, and if I click test, let's see how long is it going to take. Almost a second. And if we do get to the second one. So, if I go back here and copy the more concise one and paste it right here, let's see if it's going to be a bit different. So, it's it's generally the same. So, it's absolutely the same. I wouldn't say there is uh any performance, you know, differences, especially no uh at this level. Oh, but this is just one test. Can I click the attempt to see if it's actually going to do more tests? Let's see. Yeah, it's also five tests uh for 1 second. And if I get the older one back. Let's see what that's going to be. Uh and let's see. Attempt. This one is also it's it's the same. It depends. Sometimes it's going to be higher, sometimes it's going to be lower, but generally uh it's absolutely the same for a small number of inputs. It's don't think about the performance on this level of of things. It's all going to be extremely fast. And let me read through the comments. Uh somebody said don't be afraid of functional programming. Yeah, I I agree with that. Uh the functional approach is quite okay and it seems like seven people actually write the like the functional approach. JavaScript is becoming more and more functional. So this here is you know functional because as you can see we have a string we use a function called split or a method rather we also reduce it and then that's it. This way is more you know old school with for loop and everything else. But yeah it's just a personal preference. Uh with that said let's uh go back. I'm going to close this and let's submit the solution right here. That's great. We're going to take a look at some other people how they did it. Somebody said, uh, readable code is much more appreciated because saving lines can do only so much, but longer code makes it more sharable. I agree. Working with, uh, working with teammates, you need to write proper code. Uh, performance is not significantly increased. Exactly. Yeah. Performance is not increased. Uh but the thing that is increased is readability. So it really depends on you. Now let's see if we're going to get some other solutions from other people. Oh, this is a great one. Uh this is actually an amazing one. I like this. It is even shorter. So what this guy did um is that he did the same check as we did. So he said if it if it is true then uh just show the length of the matches because this thing the match actually doesn't return one thing the match returns the I think the number of matches or the whole it returns the whole array of all the matches. So what's happening here is if you take a look this is yeah this is definitely the better one. So you can see const get count and let's do that right now or they they copy the whole thing I did. So let me let me just get this get count right there. Close it and take a look at this one. For this to for you to be able to understand this you need to know what the string match returns. So in that case let's just take this string match and let's console log it. String match. I'm going to comment out all the other approaches and just put this thing here just to show you what does it return. I'm going to open the console right now and let's run it. We have a syntax error. We're missing I think a parenthesy here. If we call it one more time, as you can see what this thing returns, it returns all the matches, right? I see a lot of people are saying, "Oh, nice. That's clean." Yeah, it is. It is really clean. So, it returns all the matches. So, what this is saying, if there are matches, this must be an array, right? So, if this is an array, give me the length of the array. And that's going to be it. The length of all the matches is the number that we want. Is the number that the solution needs or if there are not any matches then in that case simply put it as an empty array so that we can still get the length property out of it. Uh in that case the program is not going to break but it's going to work even if there are no matches. And now knowing this we can even put this in a single line. And I would say that this is the cleanest solution once you understand how everything works. So this is great. Whoever did this 125 uh warriors that's amazing. And I would say that's the best thing about code wars is that you know you can um you can actually see other people's solutions and learn from them. I see there is a question about the or uh array. Yeah, basically if if there are no matches this is going to be null or undefined. And if it's null or undefined, I'm not sure right now what the match returns. In that case, we want to have the empty array because otherwise we cannot call the length of the of null or undefined. With that said, that's a great solution. But on the other hand, you can see we have some with uh more complex things like double double for loops. The complexity is going to be a bit higher in this one. He counted every single letter and then he counted the vowels and then incremented the vowels. That's a bit longer one, right? Uh I think this one is is uh cleaner. And also if you talk about complexity, if you talk the big O notation, this one has just a single single loop, right? So the complexity of this one is going to actually be O. Let me write that here. Don't mess with me. O of N. Right? So if you have five different elements, uh what happens is that it's going to basically loop through it five times. Right? If we have 10 elements, it's going to be tamed 10 times. But what's going to happen here is that the complexity is going to increase a lot. Uh what do I mean by that? This here is loop inside of the loop. So in this case, the complexity is going to be O N squared. In that case, for five inputs, we would have to make 25 different loops, right? That's not ideal. uh I mean for for a 100 or for 200 it's it's fine right 100 100 and then in here 100 but this time it is not a 100 it is actually 10,000 but imagine for 10,000 inputs the complexity is getting so much higher so much more complex so much less efficient right so this case this would be better than using a you know double loop um let's see what else do we have this is also a Great one. And yeah, with that said, uh I think we should be wrapping it up for today's episode, right? It is the first one in the row. Uh if you guys liked it, just feel free to let me know in the comments what did you like the most? What did you maybe like me to implement or to change and then most likely we are actually going to make this into a series. Uh so you can, you know, keep watching and then um potentially keep learning. Let me know if you learned something from this and more specifically what is the thing that you learned. Somebody said that he learned about uh this thing right now the match and also the the ore operator right here. Let me know everything. I'm I'm going to be waiting for comments and then I'll respond to those and I think we'll be wrapping it up. It's almost uh two hours past. Let me know how many of you also uh stayed from the beginning all the way till the end. Okay. Waiting to waiting for comments to start coming in because it's it's there's a huge delay. You may know not you might you might not notice that but there is a delay between me actually speaking and getting the comments. Now the comments are starting to come in. And uh uh Malignus said, "Enjoyed everything." Uh Adam said, "Learned about regular expressions and meddev." That's awesome. Uh appreciate all the hard work. No problem. Thank you so much. Uh awesome. Great. So yeah, I really appreciate you guys all here. Uh it's great uh teaching you. It's great doing this live. Uh Steve H says this, this was really good. Thank you so much. This is the first live stream, so I know we're still, you know, practicing and trying to make this better. Do you like this approach of having the the code wars and Visual Studio Code and solving the solving these at random? Basically, not picking any exercises, but going through going through everything and trying to solve it step by step and uh yeah, great. Awesome. So, this is the satisfaction rate, but this is the completion rate. So, see, not a lot of people actually completed uh that. Awesome. This is this is great. Um, everybody says, "Okay, awesome, great, great to have you here, guys. We're going to slowly be shutting it down. Let's see what we'll be doing next time." Uh, so right now, how do we actually, you know, keep going up this route. So, we completed kata. We're almost up to promotion, I think. That's nice. Rank breakdown here. Uh, overall 7Q. I'm not sure how this system works. I'm going to research that a bit more. But seems that we progressed quite a lot. These are all the solutions we we went through. 8 Q, 7Q, 6Q. Awesome. So, six completed things, six different solutions here. If you guys want me to throw a link to all these solutions, uh, I'm going to do that. Um, with that said, make sure to take a look at the course. Uh, the course is right here. It's going to be live. I mean, it already is live. You can take a look at the link in the description. A lot of great things shown in the course are actually here in the curriculum. I try to make this the best, you know, course on JavaScript uh that that that is out there. I try to make it a lot of methods, a lot of different things. So yeah, you really don't have to be uh waiting for anything. You can start learning JavaScript right now. Check out the mem and uh if you don't have anything else to tell me in the comments. See you in the next one. That's it. You successfully witnessed the first live stream that on JavaScript Mastery channel. Thank you so much. Appreciate every single one of you and see you in the next one.