Junior Vs Senior Code - How To Write Better Code

do you ever wonder if you're a new programmer constantly wondering why your code doesn't look as good or clean as the code you see online well in this video I'm gonna compare noob code to professional and advanced code and show you how you can go from this noob code all the way to the more advanced professional code and I'm gonna do so through multiple examples so you make sure you stick through each of the examples so you can see all of the different elements of transforming your code from noob code all the way to clean professional code let's get started now [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this one now to get started I have two different examples that I'm going to use to break down this noob versus professional code and the first example is just a basic example that's going to be going over how new programmers handle logic and how professional programmers handle complex logic and in the second example we're going to look at a function with some variable manipulation which exemplifies a lot of points inside of it so it's gonna be a pretty lengthy section but to get started with we're gonna go over this basic logic section so let's open up this new version of the code and essentially we just have a single function which is going to be taking a number we're gonna be passing any number between negative infinity positive infinity it doesn't matter and we want to convert this to an accounting string version of that number so in accounting when you have a negative number you surround it by parentheses like this so this would be negative 10 right here well if you have a positive number you just print it out like normal so this right here is positive 10 so we have negative 10 positive 10 and all this function does is take in our number and convert the negative ones to have parentheses and the positive ones do not have parentheses and if we look down at the bottom here I have a couple examples for how we can print out this code so we're planning this with 0 10 and negative 5 and if I just run this really simply right here this logic new version with node you can see that we get printed out at 0 10 and then this negative 5 is inside of parenthesis so that all works essentially like we want it - but there's a few problems immediately when we look at this code and the first thing that you notice with a lot of new programmers that they have kind of redundant if statements for example we're checking if n is less than 0 we do this code for putting parentheses otherwise we're checking if n is greater than or equal to 0 and if n is not less than 0 then automatically it has to be greater than or equal to 0 so there's no point in having this if check here so we can just completely remove this we don't need this so that's something that a lot of newer programmers are gonna do which you don't actually need and if we save and rerun we get the exact same results another issue that I see with a lot of newer programmers is that they don't take into account the type of the variable as you can see here we're returning a string that's surrounded by parentheses but down here we're just returning the number we got passed in which is a number that is why you see these yellow colored 0 and 10 that is because those are of type number while this 5 here in the parentheses is a type of string so this function is actually returning strings and numbers when in reality it should only ever return a string so this should probably say n dot 2 string instead and now if we run this you're gonna notice everything being printed out is white and that is because they're all of the string type and no longer are we returning any numbers at all now the last thing that I want to take into account is that newer programmers a lot of times forget to think about null or undefined they think about all of the good values that get passed into a function but what happens when undefined gets passed into your function if we run this we're gonna get an error as you can see we're getting this error and that 2 string cannot read property to string of undefined and that's because this variable n is actually being undefined by this first variable function here and then n dot to string obviously undefined has no two string function so this is throwing an error so that is a big problem I noticed that a lot of newer programmers don't take into account also they use pretty bad naming a lot of times I mean this n variable is very abstract you don't really know what it is is it a number is it something else I don't really know so this n variable is not the greatest and this to accounting is also a little bit vague it could be better explained exactly what this means so let's jump into the advanced version of how a more advanced programmer would handle this it's gonna look very similar actually as you can see here we have better variable names we have number two accounting string to make sure that we're saying that we're taking a number converting it to a string in the accounting format we're also using a variable called number here instead of n it just makes it easier to read the code and lastly we're checking here for null so we're saying if number is not equal to null then do everything otherwise just return undefined so now if we were to change this to run our advanced version instead you're gonna see that this first one returns undefined when we pass an undefined which means we no longer throw an error and we're actually properly handling getting undefined passed in and then everything else returns exactly as before also you're going to notice another slight difference here is that we have template strings instead of using concatenation as you can see here we're concatenating multiple strings and here we're using the temperate literal syntax in order to write these strings in line together which just makes for cleaner strings and if you want to learn more in depth about these temperate literals I have an entire blog post on them I'll link down in the description below but essentially it just makes it easier to write strings with numbers or variables inside of them now this code is where probably most of you are when it comes to programming you're gonna write this code and not even think twice about it and honestly when I start writing code at first and I'm writing out a function this is a lot of times what my code looks like before I go back and change it and refactor it to make it look cleaner and better because this function works and it really doesn't look too terribly bad so you'd think ok this is good and I'm gonna stop here but a professional programmer would take this a step further to clean up this code even more so let's look at the professional version as you can see here the code is quite a bit more condensed and a lot easier to read we have the same good variable names of number two accounting string and number but you'll notice the way that we handle all of our checks is much simpler our first check here if number equals null so essentially if we pass an undefined or null we just return nothing we essentially return undefined and then if our number is less than zero we just do that same string concatenation as before and make sure we return that and then otherwise if none of those cases are true we just returned the stringify adverse of our number because it's a positive number and what this is referred to where you have these if checks and you return after each one of them this is called a guard clause and I also have an entire blog post on guard clauses I'll link down in the description for more in-depth information but essentially what a guard Clause does is it just says if this condition is met then return out of the function because we don't want to compute anything else and the reason you use guard clauses is because we can have all of this if logic in one line for example we have no nesting we don't have nesting like this if is inside of this if it gets rid of all of the nesting that you would normally have if you did your if checks like this in this advanced version of this function in here we have a lot of nesting and nesting is really hard to read because you have to think okay if it's not equal to no and it's not less than zero then we return otherwise we back out and say okay if it's not equal to null then we do this so it's really hard to kind of wrap your head around a complex nesting which is why almost always you're gonna see guard clauses used instead because it's much easier to read a guard clause because it just says if we're equal to null they just exit immediately if it's less than zero exit immediately and you don't have to think further than that it's just one step nesting which is perfect and to make sure that all of this works let's just come down here and run this so we can just say three run the pro version and we get the exact same results undefined zero ten and then the negative five inside the parentheses so we know this function right here works exactly the same as this more newbie version or this advanced version is just much cleaner to read and much easier to write and much easier to maintain in the future since if people need to change this they don't have to worry about memorizing all of this complex nesting so that is the main point of this logic section is to show you how to use guard clauses to break out of that complex nesting and also to make sure you think about variable naming as well as think about how to handle null undefined or really any value that is unexpected being passed into your function in this next section that I want to talk about is going to be all about variable manipulation so let's open up this noob version and what we're doing here is we're calculating the total essentially we're passing in a list of items which are going to have this price and this Quan property which stands for quantity so essentially the cost of the item as well as how many we buy and then we pass in some options which is going to be either the discount that we applied which is this or the shipping cost which is ship and we calculate what the final total price of all of these items with discounts with the shipping with taxes everything included is going to be so that's what this calculate total function does and already just by looking at this if I didn't explain that to you you'd probably be a little confused by what this function does just because the names are not quite as good as they could be I mean T is kind of self-explanatory that it's total but you really have to know what the function means to know that this is total also Quan is a little bit confusing is this quantity or is this like something else I'm not sure same with discount and shipping that could just be a little bit more explanatory also something that's really confusing here is what is this 1.1 mean is this the tax percentage is this some other value I'm not really sure so that's a little bit confusing and also this five is a little confusing because what exactly is this in this example it's the default shipping but it's hard to tell that just by looking at the code so in order to clean this up there's a lot of things that we could do namely some of the biggest things are to increase our variable names and to break out some of these constants into their own variables so that way that they're easier to understand also something that I see all the time that happens is a bug that a lot of people run into when they're newer in programming and that's by having this or syntax here we're saying option shipping or five what happens is if the shipping cost is zero zero or is going to return false which means this five is going to be returned instead so if we pass in a shipping of zero for example right here we're gonna be getting a actual shipping value of five and if I run this example by just saying node here we want to run the new version you're gonna notice this first test that gets run here is going to be returning eighty two as the total cost and then our next test which has a shipping of zero so it should be five dollars cheaper still returns the exact same value and that's because we have this or here and zero or is always going to return what's on the other side of the or so it's something really important to take into account when you're writing out code like this is to make sure that you don't have bugs with that or when you have like a zero or an empty string or something like that which could evaluate the value on the other end of this or this is something I see all the time from beginner programmers and also we have our discount being applied properly 75% off and then our shipping here we added five or seven dollars I'm sorry so this 82 gets to 89 which is $7 more so all of that is working but there's quite a few problems if for example we passed nothing into our function it's obviously going to error out because items is going to be null and you can't call for each on something that's null and then another problem that's really big is and what happens if we want to pass no options as you can see out here we're passing an empty option list so normally you just don't want to add that to the function so if we do that and run this we're gonna get an error as you can see because we're always trying to access our options for example and there's no default value for our options kind of a similar thing with down here if we pass undefined for our list we're going to get an error and kind of a hidden bug is if we pass no items as you can see right here and we run this you're gonna notice that we get a total cost of 5 even though in reality if there is no items you shouldn't have to pay for shipping so there's quite a few bugs baked into this code as well as the fact that it's really hard to read so let's jump over to the advanced version where we fix a lot of those bugs and also make the code much easier to read so over here in the Advanced section immediately the first thing you'll notice is we broke out these constant variables and gave them actual names so our tax rate is named tax rate our default shipping is called shipping default so that way we have those broken out and we can actually handle those scenarios also we handle the case of if our items are null or if we have no items by immediately returning zero because if you have no items obviously you don't have to pay anything there's no shipping cost it's just going to return at 0 so we handle that edge case properly inside of our calculate total and we're even using a guard clause to do that which is exactly what we want to do another thing you'll notice is our variable names are much better we have total we have price quantity discount it's just much easier to read what each one of our variables is doing which is really good and also we're passing in a default value for our options if you remember over here when we tried to call this with test items and no actual options afterwards we ran into an error but now inside of here since we have a default value for our options of an empty object we can actually run this code with this test items of nothing and if I just do that real quick you'll notice we get no errors as you can see it just prints out everything just fine actually let me save and there we go as you can see it's printing out that 82 value even when we pass in no options because it just defaults to this empty object also something else you'll notice is if we scroll down here I'll just comment this out and rerun this you'll notice this price here is 82 as you can see by our first line and when we have 0 for shipping we're getting 77 so our shipping is properly being calculated if it is zero and in order to do that we just have a simple if check that says if our shipping is not equal to zero then calculate shipping otherwise if the shipping is zero just ignore the shipping step so that's how we're getting around that check with or down here which is a really clever way to do this solution and overall this code looks very similar to this new version really the only differences are we have much better variable names and we also have a few extra bugs being fixed by checking for these edge cases as well as having optional values here and lastly having these different checks for our shipping so overall the difference between the new version and the advanced version is very small it's pretty easy to make these changes so when you're programming make sure that you think about the edge cases for example this situation as well as these default values and think about any potential bugs that could come up by thoroughly testing your application with all of these different edge cases that's why I have all of these different tests down here because that way I wanted to test everything thoroughly to make sure it worked in all regards now there are going to be quite a lot of differences between this advanced version and the professional version but one thing to notice though is that when you're writing code most likely the code you write is going to be somewhere between the advanced version in the new version the first time you write code it's never gonna be professional and clean and perfect it's gonna be somewhere in between these two states the important thing is that once you write that code that's in this advanced or in a newb state that you take that code and then transform it into a more professional-looking code because now you know what the code is supposed to do and you know about how it's supposed to look that's actually how I wrote these examples you know I started with this advanced version for example and then to make the professional version I just edited the advanced version there's no way my mind works well enough to think like the professional version from the start most people cannot do that so now let's look at the actual advanced version as you'll notice immediately the code is quite a bit more condensed there's a lot less lines of code inside of our function which is not always a good thing but it does mean that there's less to think about when you read the code so it may mean that the code is cleaner overall also we have the very same you know constants here for our tax rate and shipping default but something you'll notice is we are taking advantage of something called D structuring inside of the function arguments and I have an entire video on D structuring I'll link in the cards and description if you want to check it out but essentially what we're doing is we're just defining the values for our options for example we have shipping and we have our discount these are the only two things our options can ever be and we're also setting a default so if they don't pass in a shipping we pass in a shipping default so we don't have to worry about this if check or anything we just know if there's no shipping passed in we use the default same thing for our discount if they don't pass a discount we just default the discount to zero because obviously you're not going to have a discount in that example and then lastly an important thing to notice about destructuring we make sure we set this to an empty object here by default so that this entire options which is what this used to be called is made sure it's set to a default object just in case they don't pass anything in for example right here they don't pass any options we just want to make sure that we have an empty object as the default that we use instead of using null so now with that out of the way let's look at the rest of the code here we have the same exact if check which is great and down here we have a little bit of a different code for calculating out the total item cost over here what we did is through all of our items and added it to this total variable but in the pro version instead what we're doing is we're actually using this reduced function which allows us to take an array and reduce it down to one single value essentially and this value is called our total so each time that we loop through our items array we're given this total variable and then whatever we return from here is being our new total so we start with a total of 0 and then we're just adding to our total the price times the quantity this does the exact same thing as the for loop it's just a little bit tidier and cleaner way of writing it and if you want to learn more about this reduced function I have an entire video on that as well I'll link it in the cards and description down below now the next thing to notice that is much different than the previous examples as you can see here we have one total variable and we just constantly update it throughout our entire function but over here we don't actually have a total variable we have the cost of all of the items and then we calculate our discount rate and then we're just down here returning everything combined together on one single line and what's nice about this is that we don't have this intermediate variable that's constantly being updated because this variable total you have to constantly keep track of every single line that modifies total to figure out what the new total value is going to be at that point in the code and this is something that doesn't sound difficult to do but in reality it takes a lot of brainpower to keep track of all of the different changes to this total variable as you go through the code especially as you get longer and longer functions and you have to go further and further with remembering everything that happened before the nice thing about this version is we don't have any variables that get modified this is all constants so this item cost never changes after we define it discount rate never changes so now we know as we go forward this function could be a thousand lines long an item cost is always going to be the same we don't have to worry about figuring out where we are in the function to know what the value is that's a really important reason for using constant variables as much as you can and trying not to create these intermediate variables for example of total where we just constantly update it and update it this is something that I noticed a lot of beginner programmers do and you're just adding extra work for yourself that you don't want to handle when you have to go back and change this code in a few really other than that though this final example does pretty much everything else exactly the same we just took a lot of those intermediate calculations put them on one single line which is pretty easy to read we just take the cost of all of our items multiply it by our discount multiplied by our taxes and then add in our shipping at the end and if I run this just to make sure everything works the same as before you can see we get all of the exact same values being returned to us so we know that this version is working exactly the same as the previous version with all of the same inputs so we went from this pretty complicated and difficult to understand function to a slightly easier to understand function but it's still kind of long and bulky all the way to this really clean simple function that is actually pretty easy to read when you look at it's much easier to figure out what this is doing then figuring out what this is doing purely just based on variable names alone I mean just the difference between advanced and newb is almost exclusively variable name differences and as you can see this while it looks more complex because it's more code is actually way easier to read and then obviously this version is even easier to read and that's the important thing about programming it's not about writing something that's works it's about writing something that's easy to read and easy to maintain because writing code is the easy part I mean anybody can write a function that looks like this for example this is easy to do but changing this and modifying in the future that is the hard part because now you need to memorize all this logic or all of this logic and that's hard especially if you come back a year later while this more advanced version with better variable names in the cleaner smaller tighter code is much easier to read and figure out what's happening even a year or two in the future when you have to come back and change this the thing to remember is that writing code is not the important part the important part is writing code that's easy to read since you're going to have to change it in the future and there are all the differences that you'll see between beginner code and professional code if you enjoyed this video and want to see more videos like this make sure to let me know down in the comments below because I had a ton of fun making this and also check out some of my other videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 916,940

Keywords: webdevsimplified, junior vs senior dev, noob vs pro code, noob vs pro, junior vs secnior code, beginner code, how to write better code, how to programmer better, clean code, clean code js, clean code javascript, write clean code, how to write clean code, how to write code, the best way to write code, how to program better, how to be a better programmer, senior developer vs junior developer, senior dev vs junior dev, junior dev mistakes, junior developer javascript, javascript

Id: g2nMKzhkvxw

Length: 22min 12sec (1332 seconds)

Published: Tue Apr 28 2020

Reddit Comments

[u/redsandsfort]

This was actually pretty good.