Javascript is a cool language if you did everything right. But, without any refactoring, it may result in some messy code which will give unexpected results. In this article, I'll show some tips for refactoring JavaScript code.
Use strict mode
The first thing you should do is to use strict mode. It will help you to avoid some common mistakes. For example, if you forget to declare a variable, it will throw an error. Also, it will prevent you from using some reserved words as variable names.
"use strict";
x = 10; // throws an error
let y = 10; // works fine
Use proper variable names
Variable names should be meaningful. It will help you to understand the code better and won't confuse you in the future.
const x = 1000;
// ...
setTimeout(() => {}, x); // ???? What is x?
When you see the code above, you may not understand what is x
. But, if you change the variable name to something meaningful, it will be much better.
const oneSecondinMs = 1000;
// ...
setTimeout(() => {}, oneSecondinMs); // much better
Don't use negative function names
When assigning function names in classes/objects, don't use negative names. Use positive names instead. For example, look at the code below.
const obj = {
name: "John",
age: 30,
isNotAdult: () => obj.age < 18,
};
if (!obj.isNotAdult()) {
console.log("Adult");
}
As you can see, the function name is isNotAdult
. It's a negative name and it's confusing. It's better to use a positive name instead.
const obj = {
name: "John",
age: 30,
isAdult: () => obj.age >= 18,
};
if (obj.isAdult()) {
console.log("Adult");
}
Use arrow functions when possible
Arrow functions are a great way to write shorter functions. You can use them when a function is short enough. So, if you have a function like this:
function add(a, b) {
return a + b;
}
You can rewrite it like this:
const add = (a, b) => a + b;
That's it. It's shorter and easier to read. BUT, some things like this
won't work inside arrow functions. So, make sure you don't use it.
Use const
and let
instead of var
var
is a global variable. It's considered a bad practice to use it. var
s don't have any block scope. So, if you declare a var
inside a function, it will be available outside the function.
var x = 10;
{
var x = 20;
}
console.log(x); // 🥹 Output is 20
let
and const
have block scope. So, if you declare a let
or const
inside a function, it will be available only inside the function.
let x = 10;
{
let x = 20;
}
console.log(x); // Output is 10 😌
let
can be reassigned, but const
can't. So, if you don't need to reassign a variable, use const
. It will help you to avoid some bugs.
let x = 10;
const y = 20;
x = 20; // works fine
y = 30; // throws an error
Reduce if statements
If statements are great but don't overuse them. If you have a lot of if statements, it will make your code messy. So, try to reduce them. For example, look at the code below.
let number = 10;
if (condition1) {
number = 20;
} else if (condition2) {
number = 50;
}
We can use short-circuit evaluation to reduce the if statements.
let number = 10;
number = condition1 ? 20 : condition2 ? 50 : number;
Use destructuring
Destructuring is a great way to assign variables from objects and arrays. It's much easier to read and understand.
const obj = {
name: "John",
age: 30,
};
const name = obj.name;
const age = obj.age;
In the above code, we have to write the obj.name
and obj.age
twice. It's not a big deal, but it's better to use destructuring.
const obj = {
name: "John",
age: 30,
};
const { name, age } = obj;
Whoa! It's much easier to read and understand. Also, we can do some advanced destructuring like this.
const obj = {
name: "John",
family: {
father: {
name: "Jack",
},
},
};
const {
family: {
father: { name },
},
} = obj;
console.log(name); // Output is Jack
And it works with arrays too. You may have seen this in React.
const arr = ["John", "Jack", "Jill"];
const [name1, name2, name3] = arr;
console.log(name1, name2, name3); // Output is John Jack Jill
The end
Thanks for reading this article! You can connect with me on Twitter and GitHub or Buy me a coffee if you liked it.
Comments (0)