const vs let vs var

There are three keywords to declare a variable:
  • var
  • let and const which are only available in ES6

Differences

  1. It's not possible to access the let variable outside of the nearest enclosing block where it is declared.
    {
        let foo;
    }
    
    // ReferenceError: foo is not defined
    console.log(foo);
    The sample code above works if we replace the let with var declaration.
  2. A let variable can't be used before it's declared. The sample code below throws a ReferenceError:
    {
        foo = 'hello';
        let foo;
        console.log(foo);
    }
    // ReferenceError: Cannot access 'foo' before initialization
    We will see hello in the Console if we use var in the sample code above.
  3. It's not possible to re-declare variables with let.
    // There is no problems if variables are re-declared with the same name
    var foo, foo;
    var bar;
    var bar;
    
    let baz;
    let baz;
    // Throw the following error
    // SyntaxError: Identifier 'baz' has already been declared
  4. At the top level, global let variables aren't attached to the global window object.
    let foo = 'hello';
    window.foo;     // undefined
    
    var bar = 'world';
    window.bar;     // 'world'
  5. Using let can avoid the problem with closures that var has.
    To demonstrate the problem, let's assume that we have a list of rows. In each row, we have a button for removing the associate item in the row.
    We loop over the items, and handle the click event of the button in each row:
    for (var i = 0; i < 10; i++) {
        document.getElementById(`button-${i}`).addEventListener('click', function() {
            // Remove the item
            console.log(i);
        });
    }
    It doesn't work as we expect. We always see the last item index (9 in this case) in the Console when clicking any button. The variable i in the closure of event handler will refer to the same object, which is the last index when looping over the indexes.
    The problem can be fixed by using let:
    for (let i = 0; i < 10; i++) {
        document.getElementById(`button-${i}`).addEventListener('click', function() {
            // It's safe to use the index `i` here
            console.log(i);
        });
    }
  6. The const keyword behaves same as let, except the variable can't be changed.
    // Throw the following error
    // SyntaxError: Missing initializer in const declaration
    const a;
    You also have to specific a value for a constant.
    const a = 'hello';
    
    // Throw the following error
    // TypeError: Assignment to constant variable
    a = 'world';
    It's worth noting that using const doesn't mean that the variable is immutable. You can change the properties of an object:
    const person = {};
    person.age = 20;
    And add more items to an array:
    const arr = [];
    arr.push('foo');
    arr[1] = 'bar';
    console.log(arr);       // ['foo', 'bar']

Good practice

Don't use var unless you have to support old browsers which don't support let and const keywords.

Good to know

Each programming language use different keywords to declare a variable and constant. The following table list out some examples:
LanguageVariable declarationConstant declaration
C#string s = "hello"const string s = "hello"
JavaString s = "hello"final String s = "Hello"
Scalavar s = "hello"val s = "hello"
Swiftvar s = "hello"let s = "hello"
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved