JavaScript Best Practices

JavaScript Best Practices — Arrays, Todos, and Callbacks

Spread the love

To make code easy to read and maintain, we should follow some best practices.

In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.

Add Expiration Conditions to TODO Comments

If we have todo comments, we can add expiration conditions to it so that ESLint will pick them up and throw an error if they expired.

For instance, we can write:

// TODO [2019-11-15]: fix this

We have the date in ISO 8601 format and the task description.

Explicitly Comparing the length Property of a Value

Explicitly comparing the length property of value is clearer than not.

For instance, instead of writing:

if (string.length) {}
if (array.length) {}

We write:

if (string.length > 0) {}
if (array.length > 0) {}

to compare them against 0 explicitly.

Case Style for Filenames

The case style for filenames should be consistent.

For instance, we can use kebab case for everything:


Or we can use camel case.

For instance, we can write:


Or we can use snake case:


Or we can use pascal case:


Importing Index Files with .

If we’re importing an index.js file, we don’t need to write the file name explicitly.

For instance, instead of writing:

const module = require('./index');


const module= require('./');

We write:

const m = require('.');


const m = require('./foo');

Usenew for all Built-in Constructors, Except String, Number and Boolean

Almost all constructors need the new keyword except for the String , Number , and Boolean ,

We shouldn’t use constructors top create primitive values

Instead, we use them without new :

const str = String(123);

But we write:

const list = new Array(10);

This is because using new with String , Number , or Boolean create objects instead of primitive values.

Use Array.isArray() instead of instanceof Array

Array.isArray is more robust that instanceof Array .

instanceof Array doesn’t work across realms or context.

It doesn’t work between different frames or windows in browsers or the vm module in Node.

For instance, instead of writing:

array instanceof Array;

We write:


No Leading Space Between console.log Parameters

We don’t need leading space between console.log parameters.

We just put the trailing space.

So instead of writing:

console.log('abc' , 'def');

We write:

console.log('abc', 'def');

Passing a Function Reference Directly to Iterator Methods

We should create our own callback instead of passing the function reference it directly.

For instance, instead of writing:

[1, 2, 3].map(fn);

We write:

[1, 2, 3].map(c => fn(c)));

This way, we can control what parameters are passed in to fn instead of always passing the array entry as the first argument, the index as the 2nd argument, and the array as the 3rd argument.

This also applies to any other function call that takes callbacks.

We want to control the arguments we pass in by creating our own function,

Do not use a for Loop that can be Replaced with a for-of Loop

If we can use a for-of loop to iterate through an object, then we should do so.

For instance, instead of writing:

for (let index = 0; index < arr.length; index++) {
  const element = arr[index];

We write:

for (const element of array) {

It’s much cleaner.

Use Unicode Escapes Instead of Hexadecimal Escapes

We should use Unicode escapes instead of hex escapes for clarity and consistency.

For instance, instead of writing:

const foo = 'x1B';

We write:

const foo = 'u001B';

No Nested Ternary Expressions

Nested ternary expressions are hard to read, so we shouldn’t have them.

For instance, instead of writing:

const foo = i > 39 ? i < 100 ? true : true: false;

We wrote:

const foo = (x === 1) ? 'foo' : 'bar';


We should use Unicode escapes instead of hex escapes in a regex.

Ternary expressions are hard to read, so we shouldn’t have them.

ESLint can check for the expiration date of todo comments.

File names casing should be consistent.

We should define our own callbacks instead of passing in a function reference.

The for-of loop is much better than a for loop for looping through iterable objects.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *