JavaScript Practice Exercises For Beginners: Beginner Exercises Part 1

Aug 15, 2023

JavaScript Practice Exercises For Beginners: Beginner Exercises Part 1

In this tutorial, you’ll get a chance to have a go at some JavaScript practice exercises for beginners and then review a possible solution. Grab a free copy of the PDF here 👉 http://bit.ly/2SXDVVD and you can work through all the exercises at your own pace.

Follow me on Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelo…
Blog: https://www.juniordevelopercentral.com/

Want to work through the JavaScript exercises for beginners offline? Grab a copy of the PDF here: https://pages.juniordevelopercentral… and you can work through all the exercises at your own pace.

It’s important to practice your JavaScript coding skills but it can be tricky to find decent problems to solve and then you’re always left wondering - is there a different or better way of solving the problem?

In these JavaScript practice exercises, you’ll get the chance to be given a problem, have a go at solving it and then run through a possible solution to check your own.

JavaScript for beginners can be a bit of a stab in the dark to know whether your code is correct and the truth is that, for most javascript problems, there isn’t a right or wrong way of doing it.

But for some JavaScript practice problems, there is usually a short solution which can be achieved with JavaScript function and that is generally the aim of these JavaScript practice exercises for beginners.

It can also be good for you to see someone else break down a problem and code it in JavaScript and compare it with your own approach to a problem. Channel Handle @codebubb

Content

0 -> in this video we're going to go through some JavaScript practice exercises for

3.6 -> beginners where I give you a problem and then we go through the solution together

10.88 -> hi as is James from genie develops central and welcome to these JavaScript

15.179 -> practice exercises in the video what's going to happen is I'm going to present

19.23 -> you with a problem which can be solved with JavaScript and then what I'd like

23.039 -> you to do after each problem is actually pause the video and go away and have a

26.97 -> bit of a go at coding yourself and see what kind of solution you can come up

31.019 -> with if you have a second don't forget to subscribe to support the channel

34.649 -> below and so that you don't miss out on any future tutorial updates so now let's

39.6 -> get started with our first exercise okay so this first one is nice and simple

44.789 -> it's the classic right function to take some numbers and do something with them

49.35 -> and return true or false depending on the outcome so if this one we want to

53.1 -> write a JavaScript program to check two numbers and return true if one of the

57.09 -> numbers is 100 or if the sum of those two numbers is actually a hundred as

60.96 -> well so right now if you pause the video and go to your console or text editor

65.549 -> and then try and solve this challenge and if you get stuck or you want to see

69.09 -> the solution and come back in just a second where I'll show you how I would

72.21 -> solve it

76.04 -> okay so the way I'd approach this is basically to first of all write function

80.45 -> and I'm just going to do a function declaration so we're using es6 here and

85.22 -> one of the features which is arrow functions so by doing this sort of

89.87 -> syntax I can basically create a function without having to actually use the

93.77 -> function keyword so with my function I'm going to accept those two numbers that

97.67 -> kind of come in so a and which call those a and B and the first thing I'm

101.18 -> going to do is say is a equal to 100 and now I'm using their triple equals to

106.28 -> make sure that it's definitely a number that's been passed in as an argument so

110.6 -> this will check the first number so the other thing I need to do is check the

113.99 -> second number so I'm going to just use an or operator here to say is a equal to

118.7 -> 100 or is B equal to 100 as well so if we just call it a couple of times to see

123.32 -> if it's doing what it's supposed to be doing

127.97 -> okay yeah so we can see that if a or b is passed in as a hundred then we get a

132.35 -> true value but what about if we pass in some values which aren't a hundred

137.7 -> so let's pass in two tens instead you can see I'll get false values back so

142.26 -> that's all good that's working as it's expected but what happens if I pass in

145.98 -> two numbers that actually do add up to a hundred and that's the final part of the

149.819 -> exercise so here of pastan 20 and 80 and 50 and

155.47 -> 50 so because neither of those numbers are

157.569 -> 100 the last two console.log statements actually give us false so we need to

161.86 -> amend our function slightly so that it accepts that final condition of the

165.91 -> actual exercise definition so we can just put in another or statement and

169.9 -> then just if we just basically add a and B together and then say is a and B

174.64 -> together does that actually equal hundred as well well if it does then we

178.36 -> want to return true and when we were in the code again you can see those last

181.54 -> two console logs actually give us true values as well so that's how what

185.83 -> approach exercise one and as you can see you can use a one line arrow function to

190.329 -> just do those all statements if you had a larger function that has like if

194.5 -> statements inside as well that's fine that's a logical way to solve it just to

198.579 -> keep things nice and short this is probably the easiest way that to get the

203.14 -> same result so that's exercise one let's move on to exercise two so exercise two

209.739 -> is another nice and simple one and it's basically to write a JavaScript program

213.28 -> to get the extension of a file name so if you think about the extension of a

217.84 -> file name so we're talking about the dot HTML or the dot J S so everything after

222.28 -> the dot at the end of the actual file name so pause the video again go ahead

226.6 -> and give it a try and I'll see you in a second when you come back for the

229.66 -> solution here's how I would solve exercise 2 so

233.97 -> I'm just gonna create another function again and I'll just call it get file

237.989 -> extension for example and again I'll use an arrow function here and we're just

242.519 -> gonna pass in a string into that so the string could be any file name that we

246.72 -> want to get the extension of and the string could be any file name that we

250.2 -> want to get the extension of I mean only want to get the last portion of the

253.56 -> string so I'm going to say string slice which the slice function just gives us a

258.299 -> portion of an actual string so as you can see for the documentation for slice

263.04 -> we need to pass it in a start number and optionally an N number as well so the

267.69 -> star number once pass in is actually the last occurrence of the dot in the actual

272.25 -> string that we're trying to work out the file extension for so I'm just gonna say

276.09 -> string dot last index of and this function basically looks through the

282.15 -> string and just gives us the position of the last occurrence of whatever string I

286.41 -> put within the parentheses here so obviously I'm gonna put in a dot in here

290.34 -> to actually find the last occurrence of that in that string and that should

293.85 -> pretty much do it for this exercise so if I do a console dot log just to test

297.99 -> that out and I'll say get file extension and the string or passing I'll just say

302.37 -> index dot HTML and if we run that in the console name and as you can see in the

307.229 -> console we've got the dot HTML extension extracted from the actual string so

312.33 -> let's run that one more time with just a trickier example

317.83 -> so this time I'm going to use a common file that's found in a lot of web

321.94 -> development repositories which is the web pack config and as you can see it's

325.569 -> got two dots in the actual file name but we only want to get the dot J s

328.659 -> extension and when we run that code you can see that because we've used last

332.409 -> index all for the string we've only got the last occurrence of the dot so just

336.97 -> returning the the last couple of characters so that's it for this

339.849 -> exercise let's move on to exercise 3 now this is a bit of a classic one it's

347.169 -> asking you to write a program to basically take a string and every

351.669 -> character in that string just to shift it forward one letter in the alphabet

355.09 -> and there's a couple of ways of doing this but I'll let you pause the video

358.69 -> now and have a go at coding this err and I'll see in a few minutes where we go

361.96 -> through the solution that I've come up with ok I hope you got on ok with that

366.94 -> exercise so to solve this and you can create a string that has all of the

372.55 -> alphabet in and then kind of compare the string that you of working with and

376.599 -> shift it forward in that array but probably a more elegant approach is to

381.37 -> use a couple of functions that are built into JavaScript first of all the string

385.3 -> dot from char code and also the char code at function as well so I show you

393.46 -> how to use these in just a second let's create a function first of all though so

397.15 -> I'll call this move chars forward for example you can call it whatever you

402.069 -> like and we're gonna pass in a string to that and what we're actually gonna do is

406.87 -> because we want to actually modify the contents of the string I'm up first of

411.61 -> all I'm gonna split it into an array so I'm gonna call the split function on the

415.569 -> string which basically returns every character in the string as an array and

419.5 -> because we now have an array I can call another function on here as well I'm

423.52 -> just gonna move this onto another line just so that we can easier to read I'm

427.27 -> actually then gonna call the map function so if you haven't used the map

430.81 -> function before it basically mutates an array which basically means it changes

433.9 -> every item in the array depending on what you pass in as the function so for

437.71 -> each character that's in the array I'm gonna pass it back to a function and for

442.569 -> each function I'm going to say use that string dot from char code so what this

447.699 -> actually does is takes a numerical code which represents the string

451.42 -> and converts it back into an actual character into a string so we need to

456.16 -> pass that an actual value so what I'm gonna do is for the char that we've got

460.69 -> which is still a string as well I'm gonna actually access the char code at

465.94 -> function which basically returns the numerical value that we need so this

470.11 -> would literally just give us the character back we've converted it into a

472.72 -> number and then back into a string but because we've got the number here we can

477.16 -> actually just add one on twist which will have the effect of actually just

480.76 -> pushing it through the alphabet by one so the last thing we need to do because

484.24 -> we've got our string split into an array we want to actually join it back

487.21 -> together to make a string and now that will return our string which has had

490.93 -> letters in the alphabet themselves shifted forward one time so let's test

494.86 -> that okay so you can see when we pass in ABCD

500.02 -> they're shifted forward one carriage reach by BCDE so whilst this solution

505.27 -> does work really well there's only one problem with it if we actually pass in

508.48 -> at the end of the alphabet so as said in this example you can see doesn't give us

513.039 -> an A as the expected result and because the exercise isn't clearly written what

517.87 -> should happen when we've moved it forward it probably should really return

521.83 -> an A so we probably need to put some conditions or some if statements in

525.339 -> there - if the number is above a certain value then to actually go back to the

530.68 -> start and give us an A but I'm gonna leave this exercise as it is for the

533.86 -> moment just to demonstrate how I would approach this particular exercise so

538.27 -> that's it for this exercise let's move on to exercise 4 so exercise 4 is a

543.46 -> really common scenario especially because javascript dates don't work in

547.3 -> the fashion that they do another of programming languages and they can be a

550.42 -> little bit difficult to work with so this exercise is basically asking you to

554.38 -> take the current date and print it out in one of the expected formats so pause

558.91 -> the video again and have a go at this one and I'll see in a few moments when

562.42 -> you've got your solution ok I hope you got on alright with that

566.589 -> one and I'm just gonna dive straight in on the solution that I came up with so

570.43 -> I'm just gonna create the function to do this so we'll say format date and I will

575.079 -> allow it to pass in another date variable as well so we could use any

580.389 -> other date objects that we might have in JavaScript but the first thing I'm gonna

583.75 -> do is just create a new date object which basically gets a date object for

588.279 -> right now when I'm running this code and for this function it's gonna be a bit

591.88 -> more in-depth so I'm gonna open it up so it's not a one-liner in this case so the

596.11 -> first thing I'm going to do is get the day of the month that we're currently on

599.079 -> at the moment and to do that I'm gonna say Const days is equal to the date so

604.72 -> this is a date object so there's methods available on it and I say get date which

609.55 -> basically gives us the day of the month we want to display and again do the same

614.38 -> thing for months and years

619.06 -> and you'll notice that the years one slightly different it's get full year to

622.39 -> get the four characters of the year and all I'm gonna do now is just return a

626.74 -> template literal which is basically just a string with some values inside it as

630.73 -> well so I'm gonna say days and I'll use forward slash and then finally you'll

636.58 -> eight years as well so here in the UK we put our days first so it's days months

640.48 -> and years so let's just run that code now and see what we get back and if I

645.85 -> don't pass in any values the default value of a new date object will be

649.87 -> created so we don't actually need to pass anything into that to work for it

652.99 -> to work okay so it did give us a result in the output but what we're actually

657.55 -> looking at here is you not to know this but it's actually February when this has

661.03 -> been recorded so it's actually the segment and the reason for that is we

664.69 -> need to just add one on to those values because there's zero index so zero will

669.49 -> be the actual first month ie January and I've actually made a mistake there it's

673.63 -> not get day it's get date and that gives us the day of the month so thirteen for

678.1 -> the second that looks good so as I say working with JavaScript dates is a

682.39 -> little bit tricky and you need to use these functions to kind of get the

685.38 -> values for each particular day of the month and the month itself but this is

690.43 -> probably a simple way of doing it and it's quite flexible because we can pass

693.49 -> in other date objects as well that's it for this exercise let's have a look at

697.24 -> our final one which is exercise 5 okay so for exercise 5 we need to write a

702.43 -> simple program that creates a new string but an actually prepends app needs the

707.589 -> word new at the front of the actual string so if we had say offers as passed

712.93 -> in as a string it would then say new offers but if the string has already got

717.37 -> like the new at the start of it then we shouldn't actually add that on and it

720.85 -> should just leave it as it is and return the original string so one last time if

724.99 -> you pause the video and go ahead and give this a crack and I'll see you in a

728.5 -> few seconds when you've got your solution okay so probably the best way

733.48 -> to approach this again is to use a template literal to put the string new

737.26 -> before our existing string but we do need to have that check in place to see

741.43 -> if the actual word new is at the start of our string so let's create a new

745.839 -> function to do that so we've got a basic function add new and it's got passing in

751.06 -> an argument which is a so the simplest thing to do would just

754.51 -> be to return a template literal like this and then just pass the string back

759.22 -> afterwards so that pretty much solves the first part of the problem let's just

763.15 -> demonstrate that okay you can see in the console on the

767.139 -> right we get in new offers and of course if we already had new in there we'd get

772.24 -> new new offers so we need to have that check in place to see if the string is

775.66 -> already in the bass string

780.81 -> so just updated the function and I've put it on the line below just so it's a

784.11 -> bit easier to read so we've just got that check in place now to say is the

787.38 -> index of new so does the word new appear at the first part of the string so we're

792.75 -> checking if that index of is equal to zero and if it is the ternary operator

797.22 -> kicks in and we just return back the original string but if it's not so it

802.14 -> could be somewhere else in the string but it's just not right at the start we

805.26 -> return about the template literal with new prepended at the start and as you

809.43 -> can see the codes run and the string has been updated to not actually put in new

814.65 -> in twice so that's probably the easiest way to approach this exercise a nice

818.67 -> one-liner and it's a good example of when you might use a ternary operator

822.39 -> rather than an if statement so that is it for these exercises they're fairly

827.19 -> beginner exercises but hopefully you find some some of them useful and got

830.91 -> some value out of the solute going through the solutions just before you go

834.06 -> don't forget to subscribe to support the channel and for any future updates and

838.26 -> I'll see you in the next video some more JavaScript coding exercises

Source: https://www.youtube.com/watch?v=N65RvNkZFGE