JavaScript Scope and Hoisting

If you are new to JavaScript and struggling to understand the concepts of scope and hoisting, you are not abnormal. I remember how long it took me to get a firm grasp on these two tricky concepts. In this blog, we'll take a look at a simple example to help clear things up.

Check out this little write up on scope in JavaScript for a bit more on scope 👇

Scope in JavaScript(JS)

rwparrish ・ Aug 23 '20

#javascript

What will the browser's console show if the following code gets executed?

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

Stop. Don't scroll down and don't copy this into the DevTools Console, yet. Take a minute to look closely at the code and think about it.

Solution

The console will log undefined. To understand this, let's look at hoisting and scope in JavaScript.

Function-level scope

Functions create new scopes in JavaScript:

function setVar(){
    // inside this function we have a new scope
    // so this variable, declared in this function's scope, won't be available outside the function
    var varInFunction = 'inside a function';
}
setVar();
console.log(varInFunction);  // throws 'ReferenceError: varInFunction is not defined'

Blocks like if statements and for loops do not create a new scope:

if (true) {
    // this if statement doesn't create a new scope
    // so varInIf is available in the global scope
    var block = 'inside an if statement';
}
console.log(block);  // logs 'inside an if statement'

Declaration vs. assignment

A variable declaration simply tells the interpreter that a variable exists. By default it initializes the variable to undefined:

var dog;
console.log(dog);  // logs undefined (NOT a ReferenceError)

A variable assignment assigns a value to the variable:

dog = "Lino";

We can both declare and assign in the same line:

var dog = "Lino";

Hoisting

In Javascript, variable declarations are "hoisted" to the top of the current scope. Variable assignments, however, are not.

Returning to the original problem:

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

The declaration (but not the assignment) of text gets hoisted to the top of logIt(). So our code gets interpreted as though it were:

var text = 'outside';
function logIt(){
    var text;
    console.log(text);
    text = 'inside';
};
logIt();

So we have a new variable text inside of logIt() that is initialized to undefined, which is what it holds when we hit our log statement.

Recap

When you declare a variable in JavaScript (using "var"), that variable declaration is "hoisted" to the top of the current scope — meaning the top of the current function or the top of the script if the variable isn't in a function.

Next step

Try looking into the differences when using "let" and "const" instead of "var" to declare variables in JavaScript. Also, what is a lexical environment and what does it have to do with the concepts covered in this blog?

Happy coding!