Maintainable JavaScript — Function Invocation and Equality

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at variables and functions.

Function Invocation

We should wrap our immediate function invocations with parentheses so that we can tell them apart from function declarations.

For instance, we should write:

const doSomething = (function() {
  //...
  return {
    message: "hello"
  }
})();

We surround the functions with parentheses so that we know we’re calling it.

Strict Mode

ES5 introduced strict mode, which changes how JavaScript is executed and parsed to reduce errors.

To enable strict mode, we add 'use strict' above the code we want to enable strict mode on.

It’s a common recommendation to avoid placing 'use strict' in the global scope.

This is because if we’re concatenating multiple files into one, then we enable strict mode in all of them.

There’s a good chance that we’ll have errors in our old code if we have strict mode on all the code.

So before we fix all the code to follow strict mode, we should enable strict mode partially.

For instance, instead of writing:

"use strict";

function doSomething() {
  // ...
}

We should write:

function doSomething() {
  "use strict";
  // ...
}

If we want to enable strict mode on multiple functions, we should write:

(function() {
  "use strict";

  function doSomething() {
    // ...
  }

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

This is good since we keep strict mode within the function.

New code should always have strict mode on.

It corrects many mistakes like accidentally assigning to built-in global variables and other things.

Modules always have strict mode by default, so we always have to follow it.

Arrow Functions

Arrow functions are a newer kind of function introduced with ES6.

It’s great for defining functions that aren’t constructors since they don’t bind to their own this and doesn’t have its own instance methods.

Another benefit is that it doesn’t bind to the arguments object so that we can’t use it to get the arguments of the function call.

For instance, we can write:

const doSomething = () => {
  // ...
}

to define an arrow function.

Since they don’t bind to their own this value, they’re great for callbacks.

Equality

Equality with == or != is tricky because of type coercion.

Type coercion causes variables of a specific type to be converted automatically for an operation to succeed.

This can lead to some unexpected results.

== and != will do type coercion to its operands when we use them.

If the values don’t have the same data type, then type coercion will be done to one or both operands.

There’re many cases where they don’t do what we expect.

For example, we have:

console.log(5 == "5");

and logs true .

And:

console.log(25 == "0x19");

also returns true .

This is because type coercion is done with the Number function.

The strings are converted to numbers before doing the comparison.

This is one reason to avoid using == and != for comparisons.

Instead, we use === and !== .

Conclusion

We should be careful with function invocations.

Also, arrow functions are great for callbacks.

And comparisons should be done with === and !== .