/this-vs-that GitHub 1316★

const vs let vs var

There are three keywords to declare a variable:

  • var
  • let and const which are only available in ES6


  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

    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;
    // 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

    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
  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[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"
Follow me on and to get more useful contents.