The Best JavaScript Practices

Avoid global variables, avoid new, avoid ==, avoid eval()

Avoid Global Variables

Minimize the use of global variables.

This includes all data types, objects, and functions. Global variables and functions can be overwritten by other scripts. And also, use local variables instead, and learn how to use closures too.

Always Declare Local Variables

All variables used in a function should be declared as local variables. Local variables must be declared with the var keyword, otherwise they will become global variables.

Note: Strict mode does not allow undeclared variables.

Declarations on Top

It is a good coding practice to put all declarations at the top of each script or function.

• This will give cleaner code

• It will provide a single place to look for local variables

• It will make it easier to avoid unwanted (implied) global variables

• Lastly, this will reduce the possibility of unwanted re-declarations

Code Sample:

// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

Note: This also work for loop variables.

Code Sample:

// Declare at the beginning
var i;

// Use later
for (i = 0; i < 5; i++) {}

Also note that, by default, JavaScript moves all declarations to the top.

Initialize Variables

It is a good coding practice to initialize variables when you declare them.

• This will give cleaner code

• This will provide a single place to initialize variables

• This will avoid undefined values

Code Sample:

// Declare and initiate at the beginning
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};

Note: Initializing variables provides an idea of the intended use (and intended data type).

Never Declare Number, String, or Boolean Objects

Please make sure you always treat numbers, strings, or booleans as primitive values. Not as objects.

Declaring these types as objects, slows down execution speed, and produces nasty side effects.

Code Sample:

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.

or even worse:

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.

Don't Use new Object()

• Use {} instead of new Object()

• Use "" instead of new String()

• Use "" instead of new String()

• Use 0 instead of new Number()

• Use false instead of new Boolean()

• Use [] instead of new Array()

• Use /()/ instead of new RegExp()

• Use function (){} instead of new Function()

Code Sample:

var x1 = {};           // new object
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array object
var x6 = /()/;         // new regexp object
var x7 = function(){}; // new function object

Beware of Automatic Type Conversions

Beware that numbers can accidentally be converted to strings or NaN (Not a Number). JavaScript is loosely typed. A variable can contain different data types, and a variable can change its data type.

Code Sample:

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

When doing mathematical operations, JavaScript can convert numbers to strings:

Code Sample:

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Note: Subtracting a string from a string, does not generate an error but returns NaN (Not a Number).

Code Sample:

"Hello" - "Dolly"    // returns NaN

Use === (strictly equal) Comparison

The == (equal) comparison operator always converts (to matching types) before comparison. The === (strictly equal) operator forces comparison of values and type.

Code Sample:

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Use Parameter Defaults

If a function is called with a missing argument, the value of the missing argument is set to undefined. Note: Undefined values can break your code. It is a good habit to assign default values to arguments.

Code Sample:

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 allows default parameters in the function call.

Code Sample:

function (a=1, b=1) { // function code }

End Your Switches with Defaults

Always end your switch statements with a default. Even if you think there is no need for it.

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Avoid Using eval()

The eval() function is used to run text as code. In almost all cases, it should not be necessary to use it. Because it allows arbitrary code to be run, it also represents a security problem.

Thanks for reading...

Happy Coding!