Scoping in JavaScript: The Basics

The Goal: Understanding the difference between lexical and block scoping

Motivation: These are subtle differences that newer devs (like myself) may not know or be aware of since we've never really used the

var

Let's start with an example using the below code sample.

function logTenOrFifteen() {

    if (true) {
        let x = 10
        processVar(x)
    } else {
        let x = 15;
        processVar(x)
    }

}

function processVar(param) {
    console.log(param);
}

logTenOrFifteen();

Like every good developer, your instinct cries out to remove the duplication. We should only call

processVar

x

Being a clever engineer, you refactor the above block to

function logTenOrFifteen() {

    let x;

    if (true) {
        x = 10;
    } else {
        x = 15;
    }

    processVar(x)

}

function processVar(param) {
    console.log(param);
}

logTenOrFifteen();

With this clean implementation you give yourself a pat on the back and a 🌟. Now there's only one call to

processVar

Except, you might have a little voice in the back of your head nagging you about the

x

let x;

if/else

This is where the difference between block scoping and lexical scoping matters. Since we're using

let

x

1. A single call to

   processVar

2. Keeping the variable assignment only in the

   if

   and

   else

   blocks

For #2 we'd ideally like to move the

let x;

if/else

processVar

Block scoped variables only exist through the use of

let

or

const

when variables are declared.

Quite the conundrum we have...

A (bad) Solution

If block scoping is the problem, how would lexical scoping help? Lexical scoping (using the

var

Here's how

function logTenOrFifteen() {

    if (true) {
        var x = 10
    } else {
        x = 15;
    }

    processVar(x)

}

function processVar(param) {
    console.log(param);
}

logTenOrFifteen();

Now we have the variable initialization limited to just the

if/else

processVar

This solution works due to how javascript processes the function and how it hoists, initializes, and allows for the redefining of variables that are lexically scoped.

When we use the example above, the declaration of

x

undefined

10

15

if/else

function logTenOrFifteen() {

    var x;
    if (true) {
        x = 10
    } else {
        x = 15;
    }

    processVar(x)

}

function processVar(param) {
    console.log(param);
}

logTenOrFifteen();

This is the same as our initial refactor where we moved the

let

if/else

var

let

Odd Behaviors

This is something you should NOT do. For one, the end result is the same. Except now since we used

var

var

function foo() {
    let x = 10;

    if (true) {
        let x = 12;
        console.log(x); // outputs 12;
    }

    console.log(x); // outputs 10

}

function foo() {
    var x = 10;

    if (true) {
        var x = 12;
        console.log(x); // outputs 12
    }

    console.log(x); // outputs 12

}

The first

foo

x

x = 12

The second

foo

var

Lastly given this example

function foo() {
    let x = 5;
    let x = 10;
}

function foo() {
    var x = 5; 
    var x = 10;
}

the first function will throw an error that x cannot be redeclared. In contrast, the second

foo

let

function foo() {
    var x;
    x = 5; 
    x = 10;
}

since its lexically scoped.

Key Takeaways

1. Block scoped variables cannot be redeclared to a new value in the same scope as one another
2. Lexically scoped variables can be redeclared to a new value in the same scope as one another
3. Both lexically and block scoped variables are hoisted,
4. Lexically scoped variables, when hoisted, are given a default value of

   undefiend

   making them accessible before they're defined. Ex:

   console.log(foo); var foo = 'hello'; // This would log undefined

5. Block scoped variables, when accessed before assignment, throw a

   ReferenceError

   . Ex:

   console.log(foo); let foo = 12; // This would throw an error

This was quite a deep dive but I hope it helped. I recommend reading Will Vincent's article for more insight into some of these differences.