JavaScript Hoisting and Scope

Juliana Mercer Fogg
Apr 20 · 4 min read

In this article, I will talk about JavaScript hoisting and scope, two important concept that you need to be familiar with to avoid tricky JavaScript bugs and write better code.


Before diving into Scope and Hoisting it is good to understand how to declare variables in JavaScript.

Declaration, Initialization and Assignment

  1. Declaration: The variable is registered
  2. Initialization: When you declare a variable it is automatically initialized, which means memory is allocated for the variable
  3. Assignment: This is when a specific value is assigned to the variable

So now that we understand the difference of declaring and assigning it will make it easier to understand the below.

Scope

Scope in JavaScript defines which variables and functions you have access to, depending on where you are within your code.There are 3 kinds of scope — global scope , function scope and block scope.

- var is function scope

-let and const are block scope

-Function scope is within the function

-Block scope is within curly brackets

Global scope

If a variable is declared outside all functions or curly braces {}, it is said to be defined in the global scope. Although you can declare variables in the global scope, it is advised not to.

Global variables can be accessed and modified from any other scope.

Once you’ve declared a global variable, you can use that variable anywhere in your code, even in functions.

Function scope

When you declare a variable in a function, you can access this variable only within the function. You can’t get this variable once you get out of it.

If var is defined inside a function and I subsequently try to call it outside the function, it won’t work. This will cause an error ReferenceError: hello is not defined, as the variable hello is only available within the function sayHello.

Block scope

When you declare a variable with const or let within a curly brace {}, you can access this variable only within that curly brace.

In the example below, you can see that x is scoped to the curly brace:

The x = 2 is limited in scope to the block in which it was defined.

Variables declared with var do not have block scope.

This logs 2 because the var x statement within the block is in the same scope as the var x statement before the block.

Hoisting

Hoisting variable declarations and function declarations are processed before any code is executed. So declaring a variable or function anywhere in the code is equivalent to declaring it at the top — This behavior is called hoisting as it appears that the declaration is moved to the top.

One of the things I have learned after my JS project review is that JavaScript only hoists declarations, not initializations.

  • If a variable is declared and initialized after using it, the value will be undefined.
  • I you declare the variable after it is used, but initialize it beforehand, it will return the value.

Example from Mozzila:

NOTE

The difference between var and let/const relates to variable hoisting. A variable declaration will always internally be hoisted (moved) to the top of the current scope. This means the following:

is equivalent to :

An indication of this behavior is that both examples will log undefined to the console. If var hello; wouldn’t always be on the top it would throw a ReferenceError.

Accessing a var variable before its declaration will return undefined as this is the value JavaScript assigns when initializing it.

But accessing a let/const variable before its declaration will throw an error. This is due to the fact that they aren’t accessible before their declaration in the code. The period between entering the variable’s scope and reaching their declaration is called the Temporal Dead Zone – i.e. the period in which the variable isn’t accessible.

Conclusion

To reduce errors you should use const and let whenever possible. Be sure to move declarations to the top of the scope, as this avoids unwanted behavior related to hoisting.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade