Understanding Scope in JavaScript
Scope is one of the fundamental concepts of JavaScript. As a JavaScript developer you must be aware and have deep understanding of this concept. Let’s start.
A scope in JavaScript defines which variables and functions you have access to, It depends on from where you are trying to access.
Let’s understand this with an example. Can you guess what below three console.log prints?
Example1:
Output:
Note: curly braces in console.log print the value with it’s variable name.
Explanation:
JavaScript engine consider the variable athlete at line 1 and line 4 as two different variables because they both are in two different scopes. Different scopes? What are they? global scope and local scope.
What is global scope?
Global scope is the outermost scope which is created by the JavaScript engine even before executing a single line of code. The window object is the Global Object in the browser. Variables and functions defined on global scope can be accessed as properties of the window object.
In the above example the variable at line 1 is in global scope. And this variable will be added on window object. Below in fig3 the highlighted section shows how global variable athlete stored on global scope(window).
Global variables exists through out the code execution and can be accessed and modified from anywhere in the code.
What is local scope?
local scope is created when the function got invoked in the code. That means the variables which are defined inside the function are local variables and they are accessible only in this particular scope. When the function execution got over the local scope get destroyed and variables inside this scope get vanished.
In the above example when function printAthleteName() got invoked the local scope is created and variables of this function placed inside the local scope. You can observe this in fig4 highlighted section, How the local scope got created and the variables in it.
Now you might have understood fig2 the output of example1. And what is global scope and local scope.
Let’s see few more examples
Example2:
In the above example you can observe that global variable athlete is accessed and modified by the local scope.
Note: As mentioned earlier global variables can be accessed and modified from anywhere in the code.
Example3:
In the above example at line 7 JavaScript engine throws a reference error stating athlete is not defined. Because here the variable athlete is locally scoped and it is not available for the outer scope.
So far you have learned about scope, local scope and global scope. Now we will see how hoisting and scope are related.
If you don’t know how hoisting works in JavaScript. You can go through my posts variable hoisting and function hoisting.
Hoisting is a JavaScript behavior happens in Memory creation phase. In this phase JavaScript engine go through the code and assign memory to variable declarations and function declarations. After allocating the memory it assign those variables and functions with their default values. variable declarations assigned with undefined and function declarations with it’s function block. Because of this behavior we are able to access these variables and functions before it’s initialization.
So how hoisting and scope are related? The global variable declarations and global function declarations are hoisted to global scope where as local variable declarations and local function declarations are hoisted to it’s local scope. Let’s see this with examples.
Example4:
In the above example variable declaration a and function declaration b get hoisted to global scope. You can observe this in below fig8 highlighted section.
Example5:
Here when function b() is invoked the local scope get created and the JavaScript engine starts reading the function b() when it finds variable declaration c and function declaration d it will allocate memory to them inside the local scope. That means they get hoisted to local scope. You can see this in below fig10 highlighted section.
That’s it. In this post we have covered scope, different types of scopes and how hoisting and scope are related. Hope you have understood the concepts clearly.
Happy Reading:)
