var, let and const: the definitive guide

Chances are that in your career you have probably come across var, let and const as ways to define variables when looking through various codebases. Depending on how long you have been in the game, is likely to determine how familiar you are with each. Before going into the more detailed points, we will first look at the primary differences.

var

In the beginning the way to set variable was using the var keyword. You can either define individual variables on a single line, or if you prefer you can define multiple at once, separated by a comma. In the following example a, b and c will be defined as undefined and then later on we set a with the string hello.

var ten = 10;

var a,b,c;

a = 'hello';

console.log(ten, a, b, c);
// 10 undefined undefined hello

Unless you are working on a legacy codebase, it's recommended to use let and const going forward.

let and const

Introduced in the ES2015 (ES6) specification, let and const make several distinctions between variables, namely whether they can be reassigned or not.

// Perfectly legal
let a = 'hello';
a = 'goodbye';

// Uncaught TypeError: Assignment to constant variable.
const b = 'hello';
b = 'goodbye';

Although these are probably the biggest differences most developers would be able to give you without too much thinking, there are in fact a couple of other things which need to be mentioned for completeness.

Scopes and redeclaration

For the var keyword, variables are globally scoped when defined outside a function. That means that you can access them anywhere.

var someGlobalVar = 'Test';

const myFunction = () => {
    console.log(someGlobalVar);
    // Test
};

As we saw previously, similarly to let it's also possible to update a variable once defined. However, with var, it's also possible to redeclare a variable without triggering an error.

var test = 'Some variable.';
var test = 'Redeclare me.';

In the following example we are able to redeclare the let and const variables because they are within different scopes.

// Global scope
const myConst = 'test';
let myLet = 'test';

// Outer block scope
const someFunction = () => {
    const myConst = 'test';
    let myLet = 'test';

    // Inner block scope
    const someInnerFunction = () => {
        const myConst = 'test';
        let myLet = 'test';
    };
};

Hoisting

In this context, hoisting is where a variable is lifted to the top of the execution context in the given scope. So for example, var this will be either global or function and with let or const it will be global or block. The key takeaway here is that, if you try and access a var before it's been defined you will get undefined, however, with let and const this will result in an uninitialised error instead.

console.log(myVar);
var myVar = 'test';
// undefined

console.log(myOtherVar);
let myOtherVar = 'test'; // Same result for const too
// Uncaught ReferenceError: myOtherVar is not defined

Conclusion

Hopefully this article has taught you something new about defining variables in javascript. In short, try to use let and const where possible unless you are restrained to some legacy project, and then var might be your only option. Do be careful though if you are updating an existing project to migrate away from var, because you might run into some scoping issues depending on how the project was originally setup. You more than likely want to consider adding / updating your unit tests to help combat against any potential bugs which could make themselves apparent.