3+ Ways to Write Clean Code in JavaScript

how's it going guys my name is Domin in today's video I'm going to be showing you three different ways to improve your JavaScript code quality if you want to make your code cleaner easier to read or easier to maintain and extend upon these three things should help you out okay let's have a look first on this list is going to be to avoid using else or else if statements where possible now this typically applies to functions but it can also apply outside of functions and I'm going to start off this segment by simply stating that I can almost guarantee that in 9 out of 10 situations within your code you can probably avoid using an else or an else if entirely okay so let's see what I mean by that with this function here called gets theme colors now this function as it reads below is going to return an object containing two properties here a text color and a background color and we can also see that it's going to use the current hour of the day to determine if it should be light mode or dark mode of course light mode meaning a uh a darker text on a white background and of course dark mode meaning a white text on a dark background now we can see here between the hours of 8 pm and 7 am so more than 20 for the current hour and less than 7 for the current hour between those hours we want the user to use dark mode otherwise light mode so how can we avoid the else in this function here well it's actually very straightforward and it's one of four ways we can improve this function let's begin by removing that else we're going to do this by assuming a default let's assume that in most situations the user is going to use light mode but then in certain special situations such as after 8 pm and before 7 AM that is when the user might want to use dark mode instead to make it easier on their eyes so that is your special case let's assume that defaults right above where these variables are declared we can say text color equal to a dark gray so Triple Two and the background color is going to be a white so triple f and now we can simply remove the else to get the exact same results it says here okay your default theme is light but if we're between 8 pm and 7 am then change the variables to be dark mode instead so I've got the same functionality but we've reduced the lines of Code by four okay so that's one way to improve their function the next way is going to be to make this current hour a constant instead so we can say here const current hour and the reason why we're able to do that is because well the current our variable is never reassigned within this function so we can use a constant instead and this is going to inform the reader of the code that this variable or constant is never going to change and that right there saves an extra second of thinking because now the person reading knows that well that constant is never going to change the next way to improve this function would be to remove the duplication of the property names here so we can instead just do text color and then comma background color like this and it's going to give us the exact same result because now it's saying okay you want the text color property to be the value of text color which is also assigned in this function so let's just use that instead and the same goes of course for background color and the last way to improve this function is probably the way I would have written the function in the first place and that is going to be to do an instant return and this also comes back to the whole avoiding an else as well so let's refactor this function to instantly return when we know what to do we're actually going to take the if statement and put it at the top so what we're doing here is we're basically putting all of our special checks at the beginning of the function check those edge cases and then we're going to return those values return instantly an object text color equal to you know white as we saw earlier and the same goes for the background color of course being dark gray instead just like that so now we've instantly returned which means the code down here is not going to run but guess what this code is going to change to return the light mode let's grab this put it there grab this put it there and we have something like this so now the function has been simplified even further there are no more Declarations of variables okay we're simply saying look let's get the theme colors let's check for dark mode first if so return straight away bang and we're out of the function otherwise if this did not pass we can hop down here and return the defaults value of light mode and that is your four ways to improve their function with the focus being on avoiding the else or the else if statement next up we're going to be talking about skipping Loop iterations now I know you might be thinking why does skipping Loop iterations count as clean code well I'm going to show you why so right here we've got a constant of numbers with a value of 492 7 and 11 and down here with this code it's trying to find which of these numbers are factors of 12. in other words which of these numbers divide evenly into 12 so 4 is a factor of 12 2 is 9 isn't and so on and the code to achieve that would be to Simply apply uh 12 mods the number if that result is going to be or is zero then you have a factor of 12. so this Loop here simply checks that condition then console logs a message how do we simplify this code well it's going to be to skip the loop iteration in those negative cases so this is a similar sort of thing to skipping the else check and so on so let's hop up here and just change what this for Loop looks like so first we're going to say if 12 mod n does not equal zero so the whole point of this is to essentially do your do your bad checks okay check for bad data or things that you know should be skipped so do those checks first then once all your validation has been passed then you can go ahead and you can do your normal behavior so going to say here look if 12 is not a factor sorry if n the number is not a factor of 12 we can just simply continue just like that okay otherwise let's hop down here indent back and perform the default Behavior now this doesn't seem like much in this small scenario but imagine your if statement at the very beginning so this one right here let's go back imagine this if statement was 20 lines long you have 20 lines of indented code instead of a single line at the very top so go back over here you continue then everything's pushed back those 20 lines are pushed back and you have less indentation in your code now another benefit is if you want to add a next so if you want to add not a next but if you want to add another another condition you can simply hop down here at a second edition bang this one also checks for something and then it might skip it so it's easy to then add on to you know in the future so there it is skipping your Loop iterations last on this list involves array Transformations so what I mean by this is taking an array and then looping over it to apply changes to each element to give us a new array so in this case here I've got a list of names here and they've all been inserted as lowercase so a lowercase D for my name lowercase p lowercase a and so on so this code here is going to take those names and then for every single name uppercase the first letter and add that to a new array called capitalized so if I was to console.log what capitalized looks like I'll just run this code here we can see we get those capitalized names that's the intention we take the array and transform it to capitalize those names now we're going to be doing this using array map so the array map method is built for this purpose now if you're a regular viewer of my channel you'll know that I talk about array map quite a bit that is because I like to see it being used right so we're going to take this names array and use array map instead to give us the same result how do we do this well let's go up to this capitalized here and replace this array um uh this empty array here to be instead names dot map then the map method is going to take in a function this function is going to run for every single item in the array and the return value of that function is going to be the new value for that item so we can say here name as the parameter then hop down here and simply perform the same operation so using two uppercase on the first character and then using slice to slice off everything aside from the first character uh so we can just copy that operation here and return it from this function make sure to update n to be name just like this and now if I was to get rid of the for Loop we can see that we've essentially saved the two-step sorry we've saved ourselves the two-step process of uh you know firstly initializing the array then looping over having those extra blocks and so on it's now less lines of code with the same result I can just run the script here and we get the same results now there are two alternative ways to write this code here one of them would be to take it a step further and actually just skip out on the return altogether so you can just go up here and get rid of the curly braces as well as the return so something like this I'll just get rid of the sidebar so you can see better there we go so you basically have that one statement it also becomes the return for the function so just a shorter way of writing the function I'll run the code and we get the same result and the second way to write this code differently and this is quite commonly seen in other languages like python for example what you'll see is the function to perform the operation is actually written elsewhere so you might see something like this a function called capitalize written up here and this function takes in a name and it's purely used to capitalize a single name so it's reusable right this function is going to return the same operation once again just like that so now you have this Universal capitalized function to use you can then just say okay no worries names dot map and then say capitalize just like that so now the same result once again but this time your functions declared elsewhere and also makes it a little bit more reusable so if you want to capitalize multiple things you write the function once and you just use it twice I'll run the code and you get the same result so going back to improving the code or making this uh you know more clean we're talking about here much like the previous two examples reducing those lines of code removing the need to declare variables and so on and just making it flow a little bit nicer and that is all for today's video I hope you guys enjoyed that one if you did make sure to drop a like And subscribe to the channel and I'll see you in the next video

Channel: dcode

Views: 9,281

Keywords: how to write clean code, how to improve code quality, how to get better at coding, how to get better at javascript, beginner vs advanced javascript, junior vs senior developer, how to become a senior developer, best javascript practices, best coding practices

Id: b59AgnPOGxc

Length: 13min 33sec (813 seconds)

Published: Thu Oct 20 2022