Variable Declarations

Declaring a variable should be done using the let keyword:

let a = 10;

`var` vs `let`

Declaring a variable in JavaScript has always traditionally been done with the var keyword.

var a = 10;

The var construct has some problems, which is why let statements were introduced. Apart from the keyword used, let statements are written the same way var statements are.

let a = 10;

The key difference is not in the syntax, but in the semantics, which we'll now dive into.

~hint

Use `let` instead of `var` to introduce a new variable.

~

Block-scoping

When a variable is declared using let, it uses what some call lexical-scoping or block-scoping. Unlike variables declared with var whose scopes leak out to their containing function, block-scoped variables are not visible outside of their nearest containing block or for-loop.

function f(input: boolean) {
    let a = 100;

    if (input) {
        // Still okay to reference 'a'
        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here
    return b;
}

Here, we have two local variables a and b. a's scope is limited to the body of f while b's scope is limited to the containing if statement's block.

Another property of block-scoped variables is that they can't be read or written to before they're actually declared. While these variables are "present" throughout their scope, all points up until their declaration are part of their temporal dead zone. This is just a sophisticated way of saying you can't access them before the let statement, and luckily TypeScript will let you know that.

a++; // illegal to use 'a' before it's declared;
let a;

Re-declarations

With var declarations, it doesn't matter how many times you declare your variables, you just get one:

var x = 10;
var x = 20;

In the above example, all declarations of x actually refer to the same x, and this is perfectly valid. This often ends up being a source of bugs. Thankfully, let declarations are not as forgiving.

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope

Shadowing

The act of introducing a new name in a more deeply nested scope is called shadowing. It is a bit of a double-edged sword in that it can introduce certain bugs on its own in the event of accidental shadowing, while also preventing certain bugs. For instance, imagine a sumMatrix function using let variables.

function sumMatrix(matrix: number[][]) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (let i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

This version of the loop will actually perform the summation correctly because the inner loop's i shadows i from the outer loop. Shadowing should usually be avoided in the interest of write clearer code, such as

function sumMatrix(matrix: number[][]) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (let j = 0; j < currentRow.length; j++) {
            sum += currentRow[j];
        }
    }

    return sum;
}

While there are some scenarios where it may be fitting to take advantage of it, you should use your best judgement.

`const` declarations

const declarations are another way of declaring variables.

const numLivesForCat = 9;

They are like let declarations but, as their name implies, their value cannot be changed once they are bound. In other words, they have the same scoping rules as let, but you can't re-assign to them.

~button /js/operators

NEXT: Operators

3.9 KiB Raw Blame History

Variable Declarations

var vs let