Refactoring JavaScript code efficiently 🌳

Refactoring JavaScript code efficiently 🌳

Written by Posandu Mapa on Nov 8th, 2022 ・ Views ・ Report Post

Posandu Mapa Visit User Profile

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.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Use const and let instead of var

var is a global variable. It's considered a bad practice to use it. vars 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)