Front-End Insights

Single var pattern – does it still make sense in ES6?

ES6Programming

Before I started working using ES6 (the new version of JavaScript also known as ECMAScript 6 or ECMAScript 2015) I was always an advocate of a single var pattern. Now, when I can declare variables in a modern way using let and const I started wondering if it is still meaningful to move the rule I was always applying to var's on these new statements…

The single var pattern

First, let’s think about the single var pattern – what it is and why we use it. Well, the best answer why this rule was introduced was given to us by Douglas Crockford, the creator of JSLint (one of the most popular JavaScript code analysis tools):

[…] because JavaScript does not have block scope, it is wiser to declare all of a function’s variables at the top of the function. It is recommended that a single var statement be used per function.

Yes, that’s true because in ES5 we didn’t have block scope – the only scope in the language was the function scope, so even if we declared a variable inside the if statement, it was available outside its block:

(function () {
  var a = 1;
  
  if (true) {
   var b = 2;
  }
  
  console.log('a = ' + a); // a = 1
  console.log('b = ' + b); // b = 2
}());

Another reason for using a single var pattern is hoisting which means that all variable declarations (but not initialisations) are moved to the top of the function. This may cause unexpected behaviours:

(function () {
  var a = 1;
  
  console.log('a = ' + a); // a = 1
  console.log('b = ' + b); // b = undefined
  
  if (true) {
   var b = 2;
  }
}());

As you can see in line number five, the b variable is undefined which means that it exists but it is not initialised yet (initialisation will be made in line number eight) – perhaps someone who didn’t know about hoisting may expect an error here.

All of this makes JavaScript a very flexible language but might also cause unexpected behaviours which is why declaring all variables at the top was recommended in ES5:

(function () {
  var a = 1, 
        b;
  
  if (true) {
   b = 2;
  }
  
  console.log('a = ' + a); // a = 1
  console.log('b = ' + b); // b = 2
}());

This prevented us from being suprised by an unexpected variable’s values.

Is a single var pattern still relevant in ES6/ES2015?

Ok so now, besides var, we have two other ways to declare variables.

The let statement gives us the ability to declare a variable which is limited to the surrounding block. We also have the const statement which behaves in the same way – if it’s declared inside the block, it’s invisible outside of it. Additionally, a variable declared this way can’t be changed after its initialisation. Let’s see an example:

(function () {
  if (true) {
    const a = 1;
    let b = 2;
    
    a = 2 // syntax error: 'a' is read-only
  }
  
  console.log(a); // reference error: can't find variable: 'a'
  console.log(b); // reference error: can't find variable: 'b'
}());

As you can see, now it’s more predictable so what about the single var pattern? I think that for variables declared using let and const it is completely unnecessary. This way we will lose their whole power. They are designed to introduce block scope to the language and we should use them according to their specification.

Hence I can’t see the case where the var statement would be needed any more and its presence in the language is only required for backward compatibility… So, let’s use let and const and forget about single var pattern!!

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.