JavaScript Best Practices

JavaScript Best Practices — Newer Syntax, Formatting, and Promise Rejections

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.

Placing Object Properties on Separate Lines

We should place object properties on separate lines if we have many of them.

For instance, instead of writing:

const obj = {a: 1, b: [2, {c: 3, b: 4}]};

We write:

const obj = {
  a: 1,
  b: [2, {
    c: 3,
    b: 4

Now it won’t overflow the page.

Object Literal Shorthand Syntax

We should use the literal shorthand syntax to save typing and space.

For instance, instead of writing:”

const bar = {
  x: x,
  y: y,
  z: z,

We write:

const bar = {

For methods, instead of writing:

const bar = {
  x: function(){},
  y: function(){}

We write:

const bar = {

Newlines Around Variable Declarations

We want to add new lines to variable declarations if they’re long.

If we have:

var a, b;

Then we can leave it.

If it’s longer, then we break them into their own lines.

Linebreak Style for Operators

We can place the line breaks where we want as long as we’re consistent.

For instance, we can write:

const fullHeight = paddingTop +
  innerHeight +


const fullHeight = paddingTop
  + innerHeight
  + borderBottom;

No Padding within Blocks

We can skip paddinbg within blocks.

For instance, instead of writing:

if (a) {



We write:

if (a) {

Padding Lines Between Statements

We can add padding lines between statements to group them.

For instance, we can write:

function foo() {
  let a = 1;

  return a;

Using Arrow Functions for Callbacks

If we don’t need to reference their ownthis in our callback, then we should use arrow functions for callbacks.

For instance, instead of writing:

foo(function(a) { return a; });

We write:

foo(a => a);

Use const

We can declare constants with const .

We can’t assign them to a new value once we defined it.

For instance, we can write:

const a = 0;


for (const a of [1, 2, 3]) {

Prefer Destructuring from Arrays and Objects

We can use the destructuring assignment syntax for arrays of objects.

They let us break their entries into variables.

For instance, instead of writing:

const foo = array[0];

We write:

const [foo] = array;

And instead of writing:

const foo =;

We write:

const { foo } = object;

Replace Math.pow in favor of the ** Operator

We can do exponentiation with the ** operator instead of using Math.pow .

It’s shorter and we don’t have to call a method.

Instead of writing:

const foo = Math.pow(2, 8);

We write:

const foo = 2 ** 8;

Use Named Capture Group in Regular Expression

Since ES2018, we can name our capture groups.

This makes the pattern clearer for everyone.

For instance, instead of writing:

const regex = /(?d{4})/;

We write:

const regex = /(?<year>d{4})/;

Now we know we’re looking for the year number.

Replace parseInt() and Number.parseInt() with Binary, Octal, and Hexadecimal Literals

We can replace parseInt and Number.parseInt calls with the number literals instead.

For instance, instead of writing:

parseInt("1010101", 2)


Number.parseInt("1010101", 2)

We can write:


It’s much shorter.

Use Object Spread Over Object.assign

We can use the spread operator with objects,

Therefore, we should use them since it’s shorter.

For instance, instead of writing:

Object.assign({}, {foo: 'bar'})

We write:

const obj = {foo: 'bar'};
const copy = {...obj};

Use Error Objects as Promise Rejection Reasons

We should use Error instances for promise rejection reasons.

They include the stack trace, which tells us useful information for debugging.

We need it to find where the error comes from.

For instance, instead of writing:


We write:

Promise.reject(new Error("error"));


The Error instance tells us more information than other objects for errors.

We can also format our code with linebreaks and spaces.

With new syntax, we can write less code.

They include the object spread, exponentiation, and destructuring assignments syntax.

Also, we can use named capture groups for regex.

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 *