Scope and Hoisting

Posted by amandarebecca89 on October 3, 2018

Below is my post which will explain Scope and Hoisting in JS. Let’s get to it!

What is “hoisting” in JS?

Hoisting is a mechanism in JS where variable and function declarations are physically moved to the top of your code. But what does that mean exactly?

Here is an example to show you what I am talking about. When we put the code below into the console (in chrome dev tools) we get “Uncaught TypeError: food is not a function” (see picture below) but we want it to output “I want to order nachos”.

We are getting the “Uncaught TypeError: food is not a function” because it is a function expression. You’re probably asking yourself: “Well, okay. But, what is a function expression?” And if you were asking that, then fret no more. A function expression is when the function is defined as part of a larger expression syntax and must always start with the word “function”, like in the above example var food = function() {}. More specifically, we get the “food is not a function” because there isn’t function hoisting but there is variable hoisting. So essentially, food gets declared at the top, but the value is not defined therefore giving us that error.

How do we get what we want? We change it to a function declaration. A function declaration is where you define a named function variable without requiring variable assignment. So this plays out in our code by adding in food() to the console log like so(picture below) . This makes it so the function food is being hoisted to the top of the scope orderFood. If you don’t understand what scopes are, then you are in luck! I explain what they are below this picture.

What is “scope” in JS?

There are two types of scope, global and local. Global means that the variables are defined outside a function and local means the variables are defined inside a function. var mood = ‘sad’ is global and var mood = ‘happy’ is local. In the example below we see that the first output says “My mood is undefined” because no value is assigned to the variable and will only change when we re-assign it (“my new mood is happy”) during the execution phase. The mood variable ‘sad’ does not console.log because var mood = ‘sad’ is defined outside of the function and does not get hoisted.

What is “context” in JS? How/when does the keyword this receive its value?

From my studying and reading countless of blogs I see that devs, including myself at times, confuse scope and context to mean the same thing. They are in fact, different. When you speak about context you are referring to the value of this. Here is an example:

In the above example we get undefined because that’s the return value when you define a function but you haven’t called it yet. Moreover, this is the difference between a function declaration and a function expression. To go back to where I started, a function declaration gets hoisted while a function expression does not. When you call it by doing it says ‘storms’. Therefore this is referring to the day.

How do ES6 syntaxes such as let and const affect hoisting and scope, compared to var?

ES6 Syntaxes have changed to where the best practice is to use let and const. Let and const are not not initialized with a value of undefined. Here is an example where I play with changing var to let and const. Let’s look at what we output:

Var is undefined because of hoisting. Let and const are being hoisted, BUT you get the reference error because they won’t be initialized until they are assigned.

I hope this helps you navigate through the scary but fun world of JS!