Who Else Wants to Write Clean JavaScript Code?

7 Tips to Make Your Coworkers Fall in Love With Your Code.

Amy J. Andrews
Jul 1, 2020 · 4 min read
Image for post
Image for post
Photo by Christopher Robin Ebbinghaus on Unsplash

Your college: “Who’s the author of this code?”

Expectation: “It’s me!” You answer proudly because that code is beautiful like a princess.

Reality: “Nah, it’s not me!” You lie because that code is ugly like a beast.

Now, if you want to make the expectation become the reality, keep reading.

1. Use meaningful Variable Names

Use meaningful names, which you know exactly what it is at first glance.

// Don't
let xyz = validate(‘amyjandrews’);
// Do
let isUsernameValid = validate(‘amyjandrews’);

It makes sense to name a collection type as plural. Thus, don’t forget the s:

// Don't
let number = [3, 5, 2, 1, 6];
// Do
let numbers = [3, 5, 2, 1, 6];

Functions do things. So, a function’s name should be a verb.

// Don't
function usernameValidation(username) {}
// Do
function validateUsername(username) {}

Start with is for boolean type:

let isValidName = validateName(‘amyjandrews’);

Don’t use constants directly because as time pass you will be like, “What the hell is this?” It’d better to name constants before using them:

// Don't
let area = 5 * 5 * 3.14;
// Do
const PI = 3.14;
let radius = 5;
let area = PI * radius * radius;

For callback functions, don’t be lazy to just name parameters as one character like h, j, d (maybe even you, the father of those name, don’t know what they mean). Long story short, if the parameter is a person, pass person; if it’s a book, pass book:

// Don't
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.forEach(function(b) {
// …
});
// Do
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.filter(function(book) {
// …
});

2. Throw Informative Errors

“An error occurs.”

Or just: “Error.”

What error?

Every time I see an error like that in some applications or websites, as a user, I hate it. What do I do wrong? I make that error? So what error? You don’t tell me, how can I know what I’m going to do next?

Your users probably have the same feeling as me. Sometimes they will uninstall your app and never get back.

Writing a clear error message is not hard at all.

If there’s no internet connection, then:

showMessage(‘No internet connection! Please check your connection and try again!’);

If the user forgets to input something, then:

showMessage(‘Please enter your username’);

More importantly, a clear error helps you debug quickly and save you a lot of development time.

if (error) {
throw new Error(‘validation.js:checkUser: special characters are now allowed’);
}

The above is the error message format you can refer to.

3. Return as Soon as Possible

Take a look at the code below:

function login(username, password) {
if (isValid(username)) {
// Log in
} else {
showMessage(‘Username is not valid’);
}
}

The else part is unnecessary. We should remove it by returning the message early:

function login(username, password) {
if (!isValid(username)) {
showMessage(‘Username is not valid’);
return;
}
// Log in
}

This makes your code clearer. Edge cases should be placed early followed by the longer part with more logic to handle.

4. Don’t Give too Much Power to a Function

Every function should only take one responsibility. Don’t make one the powerful function that does a lot of things.

function validateAndLogin() {
// Do a lot of things here
}

The “and” should not be a part of the function’s name. “And” add more responsibilities to a function, which does more harm than good in the long run.

Below are the best:

function validate() {
// Only validate
}
function login() {
// Only login
}

5. Avoid Side Effect

Anything outside a function is not its business. So the function should not touch any of them.

For example:

var number = 3;function changeNumber(add) {
number = 2 + add;
return number;
}
changeNumber();

When you call changeNumber function, the variable number will be changed to 6. This is a real problem because sometimes you have no clue about changes of a global variable. So, you should avoid this side effect in your projects.

How? By using pure function.

The example above can be changed to:

function addThree(summand) {
const constant = 3;
const sum = summand + constant;
return sum;
}

6. Create Modules

You create some functions. They seem to do a similar type of action. For example, validateUsername and validatePassword. You sense that they can be grouped into one module. Let’s call it validation module.

const validateUsername = function (username) {
// Validate username
};
const validatePassword = function (password) {
// Validate password
};
Module.exports = {
validateUsername,
validatePassword
};
const {
validateUsername,
validatePassword
} = require(‘./validation’);
let isUsernameValid = validateUsername(‘amyjandrews’);

7. Use a Code Formatting Plugin

I use VSCode for most of my projects. If you are using VSCode, make sure to install Prettier for the sake of beautiful code.

This plugin will save you some time of formatting code. Thanks to it, you can use that time to focus more on the quality of your code.

To sum up, you should think about the people who you will transfer your project to, “How to make them feel happy to continue on this project?” Because that’s also the thing you expect when someone hands a project over to you.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store