JavaScript Cardio [Session 1] - Reversals, FizzBuzz, MaxChar

[Music] coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over seventy K per year to learn more visit coding dojo com or click the link in the description below hey what's going on guys so in this video we're gonna do something a little different usually we do some kind of practical project or maybe a framework crash course or something like that but I want to start to do some exercises and coding challenges or even algorithms now the stuff that we'll be doing is very rare in the real world and real projects but these are the exact types of problems that you're going to get during job interviews okay if you were to go to an interview with Google or Amazon or something like that these are the types of problems that they'd have you do probably on a white board alright it also builds your just your programming skill in general and there's a few reasons why companies do these types of problems during interviews one of them is because it shows that that you know your your programming logic it shows that you have critical thinking skills it also shows how you can work under pressure and and when you're put on the spot and it can be a very stressful situation so the more of these types of problems that you can remember the better so what I'd like to do is if this video goes well and we can get maybe let's say a thousand likes I'll make this an ongoing series where I'll come up with different challenges for you guys and for each challenge you guys can pause the video and you can try it yourself and then we'll go over some solutions okay now a lot of these problems will have multiple solutions some will have five ten twenty solutions I'll just come up with a couple some some will people will come up with more advanced and creative and more modern solutions and some will be more practical for instance you could use an old-school for loop for some of these or you could use a newer higher high order array function things like that okay so everyone's different everyone's coding styles different but I thought it was a good idea we have so many like framework type videos and and stuff like that on my channel I wanted to do some actual coding and training stuff that's gonna really spark your brain and some of this may seem really easy to guys few veteran programmers and some of this may just be complete gibberish for you you guys that are kind of new to JavaScript alright either way if you want to try it yourself pause it and do that that's fine or if you just want to watch and look at the solution and and listen to me explain it we can do that you can do that as well alright so let's go ahead and get started so as far as my environment here I'm gonna be using node to run my JavaScript file so if you're following along make sure you have no js' installed you can download this exact file as is there's six problems with some instructions and an example you can download this from the description and just open up a terminal so that we can run the file so the structure is just a couple functions so this first one reversed string you'll see at the bottom here I just have an output variable set to reverse string that should actually be a lower case in there and we just have a string and then we're gliding the output okay so that's why if I go and I run node index because the the name of the file is index dot JSP cuz that's what I'm returning from the first function alright but that's just just for show we're gonna get rid of that alright now let's go over the first challenge real quick so what we need to do is create a function that will reverse a string so if we put in hello we should get this back okay or any any string we put in we should get the reversed version back and these first three challenges are very closely related and you'll see why alright now this first one I'm gonna have quite a few different solutions for we're gonna have five or six solutions just so you can see that there's a lot of different ways to do the same thing so the first way the first method I'm gonna do actually if you want you can pause the video and try it yourself and see what you come up with but the first thing I'm gonna do is split the string into an array okay so I'll create a variable called see our array and we're gonna set that to that string that's passed in dot split because what split does is it turns a string into an array and it takes in a parameter of a separator now since we want each character to be put in its own array value we're just gonna put a set of single quotes don't put a space if you wanted to separate the words into into the array values then you would put a space but we want each character so make sure you don't put a space okay then what we can do is we can use the array prototype method reverse which will take an array and just do that it will reverse it so we'll say STR array dot reverse and then let's just see what that gives us obviously if you're doing a whiteboard interview you can't do this stuff you can't test or anything like that but I just want to convey you know what exactly is going on here so let's say string and you could very well get this question need all of these are actually pretty common in these interviews so let's run this with node index and you can see we get the word hello in an array backwards never mind the undefined it's just because we're not returning anything from this function so now that we did that we need to just turn it back into a string and we can do that with the join method so what I'll do is just say return the string array dot join which will turn it back into a string and again we just want to put our single quotes in there so now if we save and we go ahead and run this node index we get hello backwards alright now this is kind of a messy way of doing it so I would definitely suggest cleaning it up and if you're in these interviews I would suggest doing it this way so you can explain it and then just showing them that you can clean it up so they know that you can write good code so there's really no reason to have this variable so we can just return and then we can just chain on string dot split dot reverse and then we can just chain the dot join on to that so we'll save dot join and now if we run that we get hello backwards and I would probably just recommend that you put these on separate lines just to clean it up a little bit tab it over alright so that's the first solution now like I said I'm gonna go I'm gonna do multiple solutions here okay they might eat they would they might even say don't use the reverse array method so in that case what I'm gonna do next is just a simple for loop I'm gonna separate these with just some slashes all right so let's create a or initialize a variable we'll call it Rebs string for reverse string set it to nothing and then we're gonna do just a an old-school for loop okay and I'll show you different types of for loops we can use and we're gonna set I here will say let I equals string dot length okay this is going to be a decrementing array or a decreasing array so we'll set I to that and we'll say as long as I is greater than or less than zero then we want to decrease I by one so I minus minus and then all we have to do in here is take our Reb string and set it equal to the Reb string plus the current character so we can get that with string as STR and the current iteration because you can use this format even with strings it doesn't have to be an array you can go you can access for instance if we wanted to get the H we could do we could do whatever whatever the string is STR is bracket 0 and that will give us H brackets 1 would give us e and so on ok so we're gonna do that and then we just need to return the Rev string okay so we'll go ahead and run that and ok we get undefined because let's see why are we getting undefined oh you know what we're getting undefined because string-length right now let me just show you this if we console dot log I and we go ahead and run this we get 0 through 5 which is 6 okay that's 6 numbers and the string we're passing in is only 5 hello is 5 letters so what we're going to do is just from the string length we're gonna subtract 1 and if we save that and we run it now we get 0 through 4 which is 5 characters so now that should match however many characters you pass in so let's get rid of the console.log uncomment that and let's clear this out and run it and now we get hello backwards alright I just forgot to do that minus 1 there now that is a decreasing array meaning which we set I to the string length and then we set you know greater than 0 let's let's do an incrementing for loop so I'll copy this whole thing and let's just space this out and we'll paste this in and then we'll instead of setting I to the string length minus 1 we're gonna set it to 0 and then say as long as I is less than or equal to string dot length minus 1 and then we want to just increment high by one so I plus plus and then we can simply take the string I and put it on this side oops and just add the Rev string all right so that should work as well and there we go so that's another way you could do it now these these old-school for loops I mean these will be acceptable but there's there's better ways you can do things to kind of show that you you know more modern JavaScript you know es6 and so on so what I'm gonna do now is use a for of loop instead of using this this type here and when you use this type of for loop you have a lot of room for error especially if you're on a white board and you can't test you could you could put the wrong way here you could put a greater than rather than the less than you could set I equal to something that's not correct you could increment instead of decrease you could do there's a lot of room for error so this makes it a little easier as far as not making errors so I'm going to copy that and what we'll do here is instead of doing this old-school for loop we're gonna do four and then just say let shark HR can be anything but I'm gonna say let char of the string and then simply change this string I to char all right so let's try that and there we go so this is a little more impressive than doing it this way all right now we also have high order array methods we can use like for each so now I'm going to show you how to do it that way so what I'll do is I'll just type it out so we'll say Rev string we'll initialize it and let's do let's see now to to be able to use a for each loop which is a high order array function we need to actually turn the string into an array and you saw how to do that we use split so let's say STR dot split put in our quotes there and then we can do for each okay now for each takes in a function and it takes in an iterator so I'm just gonna say char and then we can do the same thing we did here just take that Reb string value and equal it to char plus Rev string and then simply return Rep string all right let's try that and there we go and to make this even neater if you want to impress them a little bit showing them you know es6 arrow functions you could get rid of the function keyword put an arrow here and you could get rid of the curly braces and get rid of this semicolon here and just put this on the same line like that and yeah that should work and it says there's only one parameter you don't even need those parentheses so let's try that out all right so that does the same thing so this is a much more impressive way and then the most I think the most impressive thing you could do is use a reduce which is a more difficult high order array method so let me show you how to do that oops so for this we don't even have to initialize a variable first we're just gonna say return STR dot split to turn it into an array and then we're gonna call reduce and just like for each reduce takes in a function and this function will take a Reb string okay instead of initializing it up top we can do that and then we'll put in char it also takes a second parameter of what we want to begin with which will be just an empty string alright and then all we have to do within the function is simply return char plus Reb string okay because with reduce along with other high order methods like map and and filter it actually returns another array you can return from it unlike for each so we're gonna do that I think that should work let's try it out and there we go so then if we want to clean it up of course and use some es6 we can get rid of the function get rid of the curly braces and the return statement and we can put an arrow here that and just get rid of the semicolon and move this up okay so that looks very very neat let's make sure it works and there we go so that would probably be the most impressive to them if you did that okay and and don't be afraid to do multiple examples either all right so that's quite a few different examples if you came up with something different great if you want to share it that's fine the next thing we're gonna do is we're gonna validate a palindrome and the palindrome is a word or a phrase that's the same whether it's forwards or backwards so for instance race car is the same if you spell it if you you know read it forwards or backwards so what we want to do is return true if it's a palindrome and false if it's not and what I'll do is is let you pause the video now if you want to try it but I'll give you a little hint all we really have to do is reverse the string and then compare it to the original string and then return true or false so with that information if you want to pause and try it then go ahead and do that alright so let's do the solution now we need to reverse the string so we could choose any of these I'm just going to choose the first one which is kind of the most practical in my opinion I wouldn't say the best but probably the most practical so we'll create a variable actually we can use Const here so we'll say Const and let's say Reb string and we'll set it to the string parameter split turn it into an array and let's reverse it and let's join to turn it back into a string okay so now that's the reverse string and then what you could do is an if statement saying if the Rev string is equal to the STR return true else return false but a better way to do that would be just to return Rev string equal to triple equals to string and that will give you true or false all right so it's actually a very simple solution once you know how to reverse a string so let's save that let's go down here and change the function so it's gonna be is palindrome and we're gonna just pass in let's try it with hello and see what we get so we get false because obviously this is not a palindrome but if we say race car we get true all right if we do madam which is another palindrome that should give us true as well okay and you could get either one of these or both or whatever and then this next one is very similar as well we want to reverse an integer so this brings in the concept of data types because we want to pass in a number in JavaScript there is no actual int int data type or integer data type they're all numbers but we want to pass that in and we want to get back an integer okay not a string so what we can do is we can take that int let's see well first let's create a Reb string and like I said we can take the int and we can turn it into a string with the method to string all right I forgot my equal sign okay so that will turn it into a string and then we can go ahead and split and we can reverse and we can join so what had what's happening is it'll take the integer that's passed in the number it'll turn it to a string and then reverse it just like we did above and then if we go down here and we return Rev string that's going to return a string and that's not that's not the instructions we need to actually return a number so we can wrap this in a function called parse int which will do just that will take the string and turn it into an integer so let's save that let's go down here and let's change this to reverse int and pass in a number so pass in one two three four five and let's run that and we get five four three two one now let's add something to this and say if it's a negative number that should still that should return the the backwards number the reverse number with the negative sign now if we do it now it's not going to so what we can do it's an easy solution is we can use the sign method of the math object in JavaScript so we can just say asterisk and then math dot sign and we can pass in the int and now if we do that with the negative value we'll get negative five four three two one and of course if we make this positive again that will not have the negative value all right so that'll add the sign if there is one so that's the only solution I'm gonna do for that if you guys came up with something different great and of course you could use any any of the these these string of Versalles I just chose to use this one I think it's just the most practical so next thing we're gonna do is Max character so the idea of this is just to return oh wait no I'm sorry we're gonna do the capitalized letters first so for this we need to pass in a sentence like I love JavaScript all lowercase actually it shouldn't matter if it's all lowercase or not but what we want back is that same string whether it's a sentence or whatever and the first letter of each or the first character of each word should be uppercase okay so I'm gonna give you a couple different solutions for this but if you want to go ahead and pause it and try it do that now alright so the first solution I'm gonna do is going to be kind of old-school we're just going to use a regular for loop first thing we're going to do is turn the the string into an array so we're gonna say string array and we're going to set this to STR and I want to make sure that everything is lowercase to begin with so we're going to use lowercase yeah I'm sorry to lowercase so we're gonna say string to lowercase and then split it into an array okay once we do that we could do a simple for loop so we could say for let's I equals zero and let's say as long as I is less than the string array dot length okay so the length of that array then we also want to increment and inside the for loop we'll take the string array index and we're gonna set that equal to the string array index and then we're going to use dot substring okay and substring is a JavaScript method that will basically allow you to pluck something out of a string so we want to pluck out just the first letter or the first character so we're gonna pass in zero to one okay because we want to get from the string for instance if this is passed in for each word one thing that I forgot to do is put a space here because we don't want each character as an array value we want each word so this should be a three value array with I love JavaScript as each has a value all right and then for each word we want just the first character and that's what this is going to give us and then we want to uppercase that so we can say to uppercase and then we just want to add the rest the rest of the words so let's say plus so we'll concatenate on string array current index and then we want substring we basically just want the rest of the word so we can pass in one meaning that it's gonna start from the one value which is the second character and then on okay so we're taking we're just plucking out the first letter upper casing it and then adding on the rest and then after the for loop we just want to return the string array but we want it as a string not an array so we're gonna say join and make sure you put in a space here as well because we're separating the words into arrays not the characters all right so now let's go down here and change the name of the function to capitalize letters and we'll go ahead and put in say I love JavaScript and let's run it and there we go and even if we add a capital in here like let's say this s was capital and we run it it's still gonna be lowercase because of that to lowercase that we put here all right so let's go ahead and do a different solution I'm going to comment this out and let's separate this okay now my second solution is gonna be to use map which is another high order array function and this will be a little more impressive than doing a standard for loop so what we can do is return the string but we want it to be lowercase so we're going to say to lower case and we'll actually put this on a separate line so we'll say it's return string to lower case and then we want to split it into an array by words so put a space there then we're going to use map okay and map will actually return we can manipulate an array and return another array from it or return whatever we want from it so in here map will take a function just like for each and reduce and all that stuff and it's gonna take in a parameter here let's just call it word because that's what it's going to give us each word if I were to console dot log word and run this you'll see I love JavaScript okay never mind the undefined so within here I'm gonna say return word and we want the first character and then we can call to uppercase and then we can simply add on the word dot and we can use substring I'm gonna actually gonna use out sub STR which is pretty pretty much does the same thing you could use substring or sub STR and we're going to just add the rest so we're doing pretty much the same thing we did here just in a cleaner way so now that we did that we're gonna just add on to this dot join to turn it back into a string okay join and make sure you put a space in there as well so let's run that see if that works and it does and if you want to clean this up a little bit and use some es6 so you get rid of the function you could get rid of the curly braces and the return and put an arrow here and of course you want to get rid of this semicolon whoops get rid of that semicolon move this up and since this is only one parameter we don't even need these these current these parenthesis alright so that should work as well and that's a very clean method this is probably what I would choose to do all right I'm gonna give you one more solution that uses regular expressions okay and I'm not the best with the regular expressions so we could say return extra let's comment oh shoot I went out I went outside of the function let's comment this out and then let's separate alright so we can say string and our return string and then we're gonna use the replace method here and that takes in a regular expression now regular expressions need to be within slashes and I'm gonna put in a word boundary which we can get with backslash B and then we want to put in a range here of lowercase a to Z all right and then after this slash you want to put a G for global because if you don't it's only going to capitalize the first word or the first letter of the first word so make sure you put that in there and then we also want to put an i which is case insensitive okay now this takes in a second parameter of a function and let's just pass in char here and then we're going to just simply return char dots to uppercase all right so let's see if that works and it does why oh I don't have an S in my JavaScript all right so that's another way that you could do it I personally would go with this I have the most experience with this type of code well obviously this but this is kind of the old old-school way of doing it but it should be perfectly acceptable all right so let's move on to max character now there's a lot of different ways you could do this I'm going to show you one way and it's kind of complicated but I think that it would really impress them so we want to return the character that is most common in the string so for example if we pass in JavaScript a comes up the most so that's what should be returned so what we're gonna do here is we're going to use an object as a map so we're gonna create a variable called char map for character map and we're going to set it to a set of parentheses so just an empty object literal all right and then what we want to do is loop through the string as an array so we'll take the string and split it so that it's an array and just pass in some quotes not not a space just just single quotes and then we're going to use the for each method here so we're gonna say for each and we'll go ahead and pass in a function and we'll say char here and then what we want to do is we basically want to look at each character in the map or eat each each key/value pair because this is going to be a key they're gonna be key value pairs of the actual character and then how many of them are inside that's what we're creating here so it'll be like j1 a 2v1 and so on so we're gonna say if let's say if charm map and then we want to grab the character okay so if it if it exists then we just want to add one to it and we can do that by just saying charm map char + + that'll add one else if it hasn't been found so basically if we're using the word JavaScript if it's gonna start at J that's not gonna be found yet because it hasn't it's the first letters and there's no J that has been found so we're gonna make it one so we'll say charm app the char is gonna just equal one okay and then we hit a that will also just be set to one because it hasn't been found V will be set to one when we hit this nut this other a it's already gonna see that there's an A in the character map so it's just gonna add another one to it so it will then be - if it hit another a it would then be 3 and so on alright so let's take a look at our charm map now after doing that so we'll say charm app and let's just run this let's clear this out actually alright and we'll run node index and of course we need to change the name of the function here - what is it max character and we'll just use JavaScript okay so this is our map it's it's it's an object with each letter and then the number of times it occurs you can see a a is the only one that that occurs more than once so we have a - if I were to put a bunch of more T's in here and then run it you can see for T we have five okay so that's a character map but now that we have that we're not done of course we need to we need to return whatever the highest one is so the solution I'm going to use is to do a four in loop and a four in is used to loop through an object rather than an array so let's do four and we can say four let char this could be anything but I'm going to say let char in charm map okay and then what we want to do actually you know what I'm gonna I'm gonna do real quick is just show you how to use the nodejs debugger I'm just gonna put a line in here called debugger and put a semicolon and this is kind of just kind of a side note but let's go over here and clear it out and this is kind of an alternative to just using console.log and i don't do a lot of debugging I don't think I've ever made a video on debugging which I probably should but just to show you we can say node inspect index dot JSP file and we just want to put a C to continue and then it should stop where it hits a debugger so we'll do C enter and you can see it's stopped at the debugger all right now from here if we want to examine let's say the char or the char map or any variables we can go into repple mode so repl which stands for I believe read of read eval print loop and then we can look at variables so if we want to look at char we can see we're at J if we look at the charm map that will give us the charm map all right now if we wanted to loop through and go to the next iteration what we could do is escape the repple with ctrl C go back into debug and do C again so we want to continue and now we should be on the second iteration so if I now go back into the repple and we look at char now we're at a okay and if we look at let's say charm map char we're at 2 so there's two A's so it's just a nice way to kind of examine your code and this really helps if you run into issues so I just figured I'd mention that all right now hopefully you'll kind of understand what's going on here but we still need to continue and we need to return the letter or the character that returns the most so I'm gonna add two more variables up here one is going to be called max num and that's gonna be set originally it's gonna be set to zero and we're also gonna have one called max char and we're gonna set that to nothing by default so max char is going to be the actual number that has the most occurrences max num will be that number so a would have two so max num in this case we already know is going to be 2 and max char is gonna be a but we need to figure that out so let's go down here I'll just comment out that debugger and let's simply do if char map char and we and we looked at that here and this in this current iteration it was two because we were looking at a we were looking at the char a so if that is greater than the max num which is set to 0 by default so the first iteration it's always going to be greater then we want to say max num we're gonna set it to this actual value okay the char map value and then we want to set the max char to the actual char to the character it should be an equal sign all right and then all we have to do is go outside of the for loop and then return the max char okay so I know this is kind of a long solution but hopefully hopefully it makes somewhat of a little bit of sense now let's go down here actually we already did but let's let's escape the debugger so control C a couple times and then let's do node index and we get undefined let's see what do that oh wait a minute tonight screw something up here max char oh you know what my issue is I used Const max num and Max child these are getting redefined so this can't be Const this should be let both of these okay so that should work so let's try it and we get a okay so let's add in a bunch of T's here and now the max char should be T good all right so that's that now the last challenge here is fizzbuzz and this is actually a very popular challenge with in interviews and stuff like that a lot of you have probably know what fizzbuzz is and if you do you probably know that the answer it's it's more of a memorization for this once you memorize it it's it's pretty easy but we want to write a program or loop that prints all numbers from 1 to 100 for multiples of 3 instead of the number we want to print the word fizz for multiples of 5 we want to print the word buzz and for numbers that are multiples of both 3 & 5 we want to print the word fizzbuzz okay so let's go ahead and let's create a for loop here and in this for loop we're gonna set I to 1 we want to start up 1 and we're gonna say as long as I is less than or equal to 100 and we want to increment okay now if we were to console dot log and by the way if you want to pause this and try it on your own you can do that we want a console log I so if we run that you guys probably know what's gonna happen we're just gonna look forget to change this to fizzbuzz and it's not gonna take any parameters so we want to just scare rid of this all right so let's run this and it's just gonna print 1 to 100 so what we want to happen is every multiple of 3 so 3 6 9 12 15 we want to print the word fizz all right actually not 15 because that's a multiple of 3 and 5 that should be fizz buzz buzz every multiple of 5 5 10 all that stuff anything that's that's a multiple of 5 but not 3 we want to print buzz so all you really have to remember for this problem is is how to use the modulus operator okay so if we say if let's say if I the current iteration modulus 3 is equal to 0 and modulus will just give us a remainder and if there's no remainder then it's a multiple ok so if that's true then we want a console dot log fizz ok else we want a console dot log just whatever the number is which of course is just I now that takes care of the 3 so if I were to run this every multiple of 3 we get fizz so for the 5 as you guys probably know we just have to do an else--if ok we'll move this up here and inside this if here let's say I modulus 5 is equal to 0 then what do we want to do go on a console log buzz all right so let's run that and there we go so you can see if we go to the top here three is fizz five is buzz six is fizz fifteen is fizz and that's not what we want remember if it's multiple of three and five we want fizzbuzz so I'm actually going to I'm going to make this right here in else/if because I want the first if to be the multiple of three and five all right so we'll go like that and then we'll say if I modulus three is equal to zero and i modulus five is equal to zero then we want a console dot log fizzbuzz all right let's try that okay so there we go if we say one two three is fizz five is buzz get to fifteen it's fizzbuzz we get to thirty fizzbuzz we get to forty-five fizzbuzz and so on now you could even shorten this up and just do instead of doing both of these you could just put fifteen in here okay because if it's a multiple of 15 it's gonna be a multiple of three and five so if we run that there we go we get the same thing all right so this is pretty simple to remember guys and this is something that is very very popular so I mean I would just suggest remembering this you know I mean it's Princeton it's easy logic to understand as well but just remember that code okay especially if you're looking for a job and you plan on doing white board interviews so that's gonna be it for this this one guys if you if you liked this please leave it a like and if you want to see more of this type of stuff let me know we could do easier stuff harder stuff or just you know I consider this to be pretty intermediate but I think it really it really builds on your skill your your your coding logic skill of course it's not as fun as well maybe it is to some people but I'm sure to a lot of people it's not as fun is actually building a project that you can see but it does it really helps with your knowledge okay so that's it for this video guys and I will see you in the next one coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech but lack the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over seventy K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 126,973

Rating: 4.9821143 out of 5

Keywords: javascript, algorithms, javascript cardio, javascript challenges, javascript tutorial, advanced javascript

Id: M2bJBuaOeOQ

Length: 44min 34sec (2674 seconds)

Published: Fri Feb 16 2018