Scope, Hoisting, and this Keyword In JavaScript

Vinay Kumar
Jun 27 · 5 min read
Scope, Hoisting, and this Keyword In JavaScript
Scope, Hoisting, and this Keyword In JavaScript
Photo by Greg Rakozy on Unsplash

It means “where to look for things?”. What we are looking for means we are looking for variables, what variables we have access to. There are two kinds of javascript scope i.e global and local.

Global Scope

A variable declared outside a function becomes global. All functions have access to global variables. Declarations, where they are occurred will be processed before any code execution is done and there initial value is. This is called as and we will discuss that as well.

Local Scope

Variables that are available only in a specific part of our code are considered to be in the local scope. Local has two kinds of scope, function and block (will discuss it later).

Function scope is when a variable declared in function can be accessed only within the function and not outside.

Let’s take an example where we can understand how global and local scope works in the compilation and execution time. So you will have clear picture what’s the issue we had and what we should be doing to avoid.

Compilation Phase

First let’s start with how compilation goes. JavaScript doesn’t work a top-down approach like C or bash language. It is one the approach like while executing line 3 it doesn’t have an idea what’s there on line 4. So how JavaScript executes? First, in compilation process it will compile and function declarations.

So if we go line-by-line, in line 1 the variable gets registered in global scope. Next is line 2 with function bar gets registered. In this case, it's a function declaration, not a function expression so the compiler recognizes it's a function and we have to go ahead and recursive descent and compile the function bar. So now we are inside of the scope of the bar and we will start compiling line 3.

In the scope function bar it finds a variable to register under a scope and goes ahead and registers(yes foo has 2 declaration but it will start checking from inner scope i.e here it's from function ). Next is line 4, again in function bar scope there is a function named function baz which has to be registered under it goes ahead and registers. Again, in this case, it's a function declaration so the compiler recognizes it is a function and we have to go ahead and do a recursive descent and compile the function baz. So on line 4 and a half there is an implicit declaration called as, how it compiles is, under the scope of baz variable gets registers. So that ends the compilation phase. Below image shows the overall compilation.

Image for post
Image for post

Execution Phase

Now let’s start with the execution phase by taking the same piece of code which we took in the compilation phase. Let’s start with line 1, the assignment value which is Right Hand Side checks in that it has any reference for variable and it finds and RHS will be assigned to the LHS. The next function bar declaration will not come in the execution phase, so line 10 will be executed. So in line 10 it checks in the that has any reference for function declaration and it finds and starts executing the function. Next is line 3, equals to sign is there so RHS value checks in the scope of function bar that has any reference of variable declaration and it finds RHS value is assigned to LHS.

Next line 4–7 won’t be executed now. Line 8 function checks for the scope in function it finds the reference of function and will start executing. Line 5 has an equal to sign RHS checks in scope of function finds variable and value will be assigned to that. Next is line 6, this will be a little tricky, let see how this gone a execute. RHS value will check in function for a reference of variable it does not find. Next, it will go to the next scope which is the scope of function to check the reference but again it says couldn’t find. Next is but again it won’t be there so finally what it does is it creates a variable in the global and value “yay” is assigned.

And the final line will throw an error because it does not find in the global scope.

Block Scope in ES5

Above we explained how scope works but we didn’t discuss one type from local scope that is block scope. We will first explain in ES5 syntax and then we will see how it happens in ES6. Let's see with example.

Just to give an overview of what’s happening in the code. Line 1 is declaration and line 6 is logging the foo. But in between those lines, there are a couple of lines, it is called Immediately Invoked Function Expression (IIFE). What it does is in line 4, the variable is working like block scope means it will be accessed only inside the block. We could have created a new function and place line 3 and 4 inside the function and call the function on line 6 or line 7, but we don't want to pollute the outer scope.

Block Scope in ES6

In ES6 there is and keywords to maintain the scope within the block. The keyword is similar to for declaring variables but it will attach the variable specific to the block rather than the function. When the compiler finds it will attach the variable to function and when it finds it will attach variable to the block. Let’s take an example.

Just to clarify the things, let’s change the keyword for the above example, and let’s see what output it will print.

Let’s think for moment v1 we are declaring on line 4, but when we console on line 2 it is printing undefined. It should throw error right? No, because it hoists the variables. Let’s see what hoisting is. Scope, hoisting, and this keyword in JavaScript Part-2.

Originally published at https://www.allaboutjavascriptworld.com on June 27, 2020.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Vinay Kumar

Written by

Writing code with JavaScript

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Vinay Kumar

Written by

Writing code with JavaScript

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store