[For beginner] 3 easy ways to clean up your JavaScript code

Jun
Jun
Nov 1 · 4 min read

Hello! Now I’m learning JavaScript in my school. In a school project, I tried to review other classmate's code. And I found easy ways to improve your JavaScript code to clean and modern for beginners. Actually, we can search for how to write clean JavaScript. But there are a bunch of rules and it’s difficult to remember everything for a beginner. So I will pick up 3 easy ways and write down here for myself.

1. Don’t use var, use const or let

This is a really easy way to improve your code. If you use const or let, another developer can understand which variable will be reassigned. But when you use var, we need to read code more carefully. Because we don’t know whether var is reassigned or not.

var sampleVar = 1; // I don’ t know whether var is reassigned or notsampleVar = 2; // oh, reassigned… I’m not sure it will happen againconst sampleConst = 3; // Okay, this will be never reassignedlet sampleLet = 4; // It will be reassigned, I’ll be careful!sampleLet = 5;

Still now, using var is common. Actually, it’s not mandatory to use const or let, it’s okay to use var because the program will work. But I recommend to use const or let especially you are in team development. On team development, your teammate will maintain your code. But it’s going to be hard because your teammate doesn't know the whole code and whether var is reassigned or not. To make it easier for teammates, use const or let!

In a personal project, also I recommend using const or let. Because after the project is over, it’s possible to maintain your code. In programming, the future yourself is another person. One month later, you will forget what you wrote. When I tried to fix my code again, I had to understand what I wrote even though it was written by myself. Therefore, I recommend to use const or let in a personal project also.


2. Use === and !== instead of == and !=

Same as const or let, using === or !== is not necessary. But I recommend to use it. Because it can check a data type of a variable. Like this code.

console.log(“1” == 1); // true. because it doesn’t check the data type.console.log(“1” === 1); // false. It checks the data type.

The result of the first one is true. “1” is string and 1 is number, so actually these are different. But == doesn’t care about it, so == and !== maybe make error of your product. If you make a really small project or practice, it doesn’t matter. But checking data type makes it robust and reduces the possibility of bugs!


3. Use template literal instead of concatenation

When you print something on the console or return some string sentences, template literal is useful and your code will be clear. At first, let’s see an example without template literal.

const name = “David”;const age = 30;const place= “Vancouver”;console.log(name + “ is ” + age + “ years old, living in ” + place + “.”);// → David is 30 years old, living in Vancouver.

Just writing one sentence with variables, but we have to use many + operators. Also sometimes we forget a space between words. Next, let’s see the template literal example.

const name = “David”;const age = 30;const place= “Vancouver”;console.log(`${name} is ${age} years old, living in ${place}.`);// → David is 30 years old, living in Vancouver.

In using template literal, no + operator and it looks easy to read. The cautionary point is using a backquote instead of a quotation. It can be output by enclosing the variable in $ and curly brackets!


That’s all! But…

In addition to this, there are so many rules to write clean JavaScript. To solve this problem, I recommend using airbnb JavaScript style guide on ESLint. It can analyze your code and teach you a mistake.

Let’s make it clean and write robust code!:)

Jun

Written by

Jun

Front end web developer based in Vancouver https://junyamada.info/