7 Tips to Write Clean JavaScript Code

7 Tips to Write Clean JavaScript Code

Who Else Wants to Write Clean JavaScript Code? In this Javascript tutorial, you'll see 7 Tips to Make Your Coworkers Fall in Love With Your Code.

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...

javascript javascript tips coding

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Top 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

Don’t waste time writing long code while you can make it short, yet clearer and easier to read. In this Javascript tutorial, we'll discuss 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.

Top 9 Great JavaScript Extensions for Visual Studio Code

Who want to code faster and easier? In this post, you'll see Top 9 Great JavaScript Extensions for Visual Studio Code to Speed Up Your Development

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview