10 Common JavaScript Clean Code Mistakes

we all want to write better code so we can advance in our careers and show our colleagues how good we are but that's tough when your code smells like hi this is tom does tech and in this video i'm going to show you 10 common javascript code smells and how you can avoid these mistakes the first code smell is stuffing logic inside of a function so you can see this function here and there's a lot going on it's very difficult to read and the function is named properly it's going to update a user and you can see that we declare an endpoint a user a first name and then we're going to check all these inputs and then we're going to get the endpoint then we're going to update the user and we're going to make a network request so better way to create this function would be to split out all the logic so we're going to make a function called validate user and i'm going to move all this code into here then i'm going to call validate user and i'm going to pass in my parameters then i'm going to get rid of all the else statements and then this last piece of code at the bottom here is going to get the endpoint based on the email address so i'm also going to copy that out and i'm going to create a new function called get endpoint this function is going to take an email address and instead of defining the endpoint and then doing an else if i'm just going to return when an if condition is met and now i can define the endpoint as a constant and i can say this equals get endpoint and pass in the email address we can define user as a constant and we can pass all of our arguments into here now we can remove all this and we can just simply return this here so you can see that this function now is much leaner and easier to read the second code smell is mutating objects and arrays so we have this user here that's defined as a let and we're going to say user.email equals email and user.lastname equals lastname and this can actually be a const and we won't violate the rules of a constant but this is generally not a good idea and we should in fact put all the data into the constant and we can remove all this if we need to add a property to user we can say const user 2 and we should spread user and now we can say name is equal to jane doe the same goes with arrays so we can define our array as a constant and we should put our user straight into there and if we need to add more properties to this array we can define a new array here called users2 and we should spread our users and we can add a new user here and we should avoid methods like push and pop because these mutate the array and they can cause some unexpected side effects code smell number three is using a weight for non-promised functions so you can see this function here is not a promise it simply returns a string but down here we've awaited this function and you'll see this quite commonly when users don't understand how promises work and so the solution here is to obviously remove a weight the fourth code smell is over complicated argumentless so you can see here that we have a bunch of arguments for this function here for get area of a shape so we're going to test the shape here and then we're going to return the area of that shape so there's two problems with this it firstly requires that all these arguments are passed in in order and secondly it requires that every argument is included so if you needed length for example but you didn't need side you would need to pass side in so the easiest way to fix this is to wrap the argument list in an object and now this function takes a single argument so now when we call get area of shape we need to pass in the shape like this and we can pass in circle the fifth code smell is leaving commented out code so this will bloat your code base and it may not be clear to others why the code is commented out so the only action here is to either uncomment your code if it's needed or remove it don't be afraid to remove code that you're no longer using the six code smell is pointless comments and again this will bloat your code base and you should write code that describes what it does so you can see this function here is just called fun and it returns x so a better name for this function would be get x and it would not require any comment here the six code smell is pointless conditions so you can see this function test to see if a number is even so you can see we get the result here which is num modulus 2 and we say if result equals 0 return true else return false but this here is pointless because we can simply return and then we can add this condition here and this will return the same result as that previous function the eighth code smell is repeated code so this adds complexity to your code base and it adds maintenance overheads and to fix this problem you should apply dry and dry is do not repeat yourself you can see we have these two functions here and this one is called get user and this one is called updated user and straight away you can see some code that is repeated in both functions so the solution to this would be to create a function called fetch user which is going to take an email address and we're simply going to return this function here and this is going to be an async function now we can say user equals fetch user and we can remove this code down here as well this of course needs to be awaited you can see we have some more repeated code down here and so we can assume that every time you fetch the user you want to add a name so we can modify fetch user to do this for us and you can see here that we're modifying name the better way to do this would be to spread user and we can attach name to this better yet we can remove this up here and add it down here now we can remove all this code down here and we can remove this repeated code here the ninth code smell is bad tests so there's a lot of things that will make a test bad but a bad test won't tell you if your program is working or not and it won't show other developers how to use your functions so you can see this function here to get a user and we have this little describe block down here and we say it should call the api this doesn't really tell other developers how to use our function and it also won't tell us if a function is working or not should call api is an implementation detail and we shouldn't be testing for implementation details we should be testing that the function returns what we expect it to return given the input so an easy way to fix this test would be to add another describe block and we can say given that the email is valid and then we can add our assertion down here should return a valid user so a good test has this structure it tells us what we're testing and then it's going to tell us under what conditions we're testing it and then it's going to tell us what we should expect there's many things that make a great test and this is just one of them there's a great repository called javascript testing best practices that i'll link to in the description below that'll tell you all the best practices for testing your javascript and finally the tenth code smell is not enforcing the last nine rules so you should enforce these rules in your continuous integration and continuous development pipelines and the reason we want to do this is because we want to keep developers accountable for their code quality and we want to maintain a high standard thank you for watching please make sure you like and subscribe and i'll see you in the next video

Channel: TomDoesTech

Views: 258

Rating: 5 out of 5

Keywords:

Id: fHJC44PESIk

Length: 9min 3sec (543 seconds)

Published: Mon Sep 06 2021