Categories
JavaScript Best Practices

JavaScript Best Practices — Shadowing Variables and Spacing

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.

No Variable Declarations from Shadowing Variables Declared in the Outer Scope

We shouldn’t have variable declarations from shadowing variables declared in the outer scope.

For instance, we shouldn’t write things like:

var a = 3;

function b() {
  var a = 10;
}

Instead, we write:

function b() {
  let a = 10;
}

We don’t want to declare them twice since the a outside the function is in the global scope, which means they cause confusion.

No Shadowing of Restricted Names

We shouldn’t assign anything to variables with restricted names.

For instance, we shouldn’t write statements like:

const undefined = "foo";

Instead, we write:

const foo = "foo";

No Spacing Between Function Identifiers and Their Applications

We shouldn’t have spacing between function identifiers and their invocation.

So we shouldn’t have things like:

fn ()

fn
()

Instead, we write:

fn()

No Sparse Arrays

Sparse arrays have empty slots.

These may be mistakes, so we may want to avoid them.

For instance, instead of writing:

const items = [,,];

We write:

const colors = [ "red", "green"];

Node Synchronous Methods

If we’re writing an app, we definitely shouldn’t be using synchronous methods.

They hold up the whole app with one operation since Node is single-threaded.

They’re still good for scripts.

So instead of writing:

function foo(path) {
  const contents = fs.readFileSync(path).toString();
}

We write;

async(function() {
  // ...
});

in apps.

No Tabs

Tabs aren’t as good as spaces for spacing since they may differ between text editors and platforms.

So instead of tabs, we write spaces.

We can replace tabs automatically with spaces.

No Template Literal Placeholder Syntax in Regular Strings

The template literal placeholder syntax in regular strings is useless.

Therefore, we should only use them in template strings.

For instance, instead of writing:

const greet = "Hello ${name}!";

We write:

const greet = `Hello ${name}!`;

Ternary Operators

Ternary operators are useful for conditionally returning data in line.

For instance, we can write:

const foo = isBar ? baz : bar;

It’s short and not too hard to read.

No Use of this/super Before Calling super() in Constructors

We should call super before assigning this properties in the subclass constructor.

For instance, instead of writing:

class A extends B {
  constructor() {
    this.a = 0;
    super();
  }
}

We write:

class A extends B {
  constructor() {
    super();
    this.a = 0;
  }
}

We’ll get an error with the first example.

Restrict What can be Thrown as an Exception

We show throw Error instances when using throw ,

For instance, instead of writing:

throw "error";

We write:

throw new Error("error");

The Error object has more useful things like the stack trace and message that isn’t in other objects or values.

Trailing Whitespace at the End of Lines

We shouldn’t have trailing whitespace at the end of the lines.

We should remove trailing whitespace if they’re there.

No Undeclared Variables

We shouldn’t use undeclared variables in our code.

Without strict mode, they’re treated as global variables.

If strict mode is on, it’ll be treated as an error.

So w shouldn’t write things like:

const bar = a + 1;

if a isn’t declared.

Instead, we write:

const a = 2;
const bar = a + 1;

No Initializing to undefined

Variables that are declared without a value are initialized to undefined by default, so we don’t need to set explicitly.

For instance, we shouldn’t need to write:

let foo = undefined;

Instead, we write:

let foo;

No Use of undefined Variable

We shouldn’t set a value to undefined .

It’ll throw an error under strict mode.

For instance, we shouldn’t write code like:

const undefined = "hi";

It makes no sense to assign undefined to a value.

Conclusion

We shouldn’t assign restricted identifiers with values.

Also, we should make sure that function calls and code are formatted in conventional ways to avoid confusion and other issues.

Node synchronous methods are good for scripts but not apps.

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 *