Clean JavaScript: A Quick Guide to Better Code Quality

Writing cleaner and more understandable code is essential, whether you are working on a project as a team, or just in general if someone wants to review your code.

I'll list several hacks that have helped me write clean and maintainable code. Just to inform you, I made a project 3 years back, and I can still understand the working and logic of the code to this day.

Also, the better your code, the more respect you get as a developer 😉.

Variable naming

The meaning and logic behind each of your variables should be evident when someone reads through your code. Avoid using vague variable names and stick to a particular naming format, preferably camelCase. However, don't make them so long that the person reading your code has to check both edges of the code file!

// Bad
const suiiii = 'My text'
const inconsistentnamingofVariable

// Good
const importantText = 'My text'
const consistentNamingofVariable

Writing functions

Use lesser parameters in your functions. If a function does require more parameters, consider destructuring them as an object or array, though it is not necessary.

Also, avoid making too many functions. This will result in the functions being scattered all over your code file. Remember, the point of functions is to keep yourself DRY (don't repeat yourself).

// Bad
function logStrings(firstString, secondString, thirdString, fourthString) {
    console.log(firstString, secondString, thirdString, fourthString)
}

// Good
// Notice the array destructuring
function logStrings(...strings) {
    console.log(...strings)
}

Avoid nested switch/if statements ❌

Nesting your code like in switch or if statements make it difficult for the reader to understand the control flow of the code. The best practice is to use guard clauses.

// Bad
function understandBadCode(param, num) {
    if (param == 'Bad code') {
        if (num > 0) {
            return true
        } else {
            return false
        }
    } else {
        return true
    }
}

// Good
function veryGoodCode(param, num) {
    if (param !== 'Bad code') return true
    if (num <= 0) return false
    return true
}

Use lookup maps instead of nested conditionals

Lookup maps help make your code a lot more understandable as you already have an object of some sort that acts as a reference to the conditional expressions. This article goes into lookup maps in depth.

// Bad
function excessiveConditionals(color) {
    if (color == 'red') return 'happy'
    if (color == 'yellow') return 'afraid'
    if (color == 'blue') return 'sad'
}

// Good
function betterObjectMapping(color) {
    const colorMoods = {red: 'happy', yellow: 'afraid', blue: 'sad'}
    return colorMoods[color]
}

Use ES6 Features

ES6, introduced in 2015, made JavaScript much easier to write and added a bunch of features such as array and object destructuring, nullish coalescing, promises, template literals, arrow functions and many more. This article goes into the most important ES6 features that will help boost your JavaScript skills.

Comments

Commenting on your code helps other people to understand the complex logic behind your applications and makes it easier for others to collaborate with you on your code.

Using a language style guide

Using language style guides helps all of the members of your team to stay on the same track when it comes to code formatting. This helps reduce unnecessary confusion and makes it easier for your team members to focus on reading and writing code efficiently. This repo is a great starting place if you are completely new to language style guides.