Javascript fundamentals series Scopes, Hoisting, Closures
In previous article, we have gone deep into the Global Scope, first part of understanding scopes in Javascript. If you feel insecure, or want to take a quick look, I encourage you to read it first since we will be referring to global scope in this article.
If you have ever written any piece of Javascript code, you probably already created local scope and exploited its benefits since it is almost impossible not to. I am saying that because if you ever create a variable inside a function, you just create a local scope, not a global one.
Local Scope occurs when you create a variable inside a function. By doing that, the visibility and accessibility of the variable changes significantly.
Any variable created inside yellow box is a local variable, just like any variable inside blue box is a global one. To make it super easy to understand, blue box represents the global scope while yellow box represents the local scope.
Of course to understand local variable/scope is not possible with one image and a description. Let’s take a look another image.
Yes, local scope is different than global variable and more complicated to understand. This demo shows the basic behavior/concept about local scope. If you create different functions, you basically create different scopes for every one of them. To understand the basic behavior, we can work with console and see the errors and accessibility of variables in different scopes.
var globalOne=16;
function testingScope(){
var localOne=12;
console.log(localOne); // 12
console.log(globalOne); // 16
}
testingScope() // 12 and 16
console.log(localOne); // Uncaught ReferenceError: localOne is not defined
console.log(globalOne); // 16Since our variable globalOne is a global variable, we can access it anywhere. However, localOne variable is only accessible inside its scope. That’s why, if we call testingScope function, we can see both variables in the console.
In global scope, we can only access global variables, stored in window object. Unlike global variables, local variables are not accessible and are destroyed as soon as their scope ends. They stay in memory when their function, which they are created in, is called. That’s why they are only accessible during execution of their function. That is one of the key differences between global and local variables.
Difference between function scope and block scope
Up to now, we have seen local scope but actually I was not super clear. In reality, local scope can be divided into two scopes: Function Scope and Block Scope. Until ES6, Javascript only had function scope which is actually what I have been explaining so far.
Function Scope occurs when a variable is defined inside of a function.
It is simple as that. Block Scope, on the other hand, is introduced with ES6 and is a little bit of different. You can create subset of a function scope with a block scope.
If you use blocks, anything between {}, like if, switch, for, while, you can make use of block scope only if you define variable with let and const. It is a long sentence and I think I can explain better if I show it in the console.
if(‘anything returning true’){
let localVariable=12;
var otherLocalVariable=10;
console.log(localVariable); // 12
console.log(otherLocalVariable); // 10
}
console.log(localVariable) // Uncaught ReferenceError: localVariable is not defined
console.log(otherLocalVariable) // 10Do you see their behavior? localVariable, defined with let, is only visible inside the block. otherLocalVariable, defined with var, is visible outside the block. Different behavior is because of the difference between var, let, const. Therefore, it is important to know the differences of them to understand block scope.
Variable Shadowing
If you are going to reassign a variable in a function, there is a concept you should know about: Variable Shadowing.
In Javascript, when you define a variable in global scope and then in local scope, local one takes precedence. Of course they have to share the same name. In global scope, variable stays with its initial value, but in local scope, its value changes to whatever you reassigned. Let’s see an example:
let simpleVariable=’global scope’
function testingVariableShadowing(){
simpleVariable=’local scope’; // reassignment
console.log(simpleVariable);
}
testingVariableShadowing(); // local scope
console.log(simpleVariable); // global scopeIn global scope, simpleVariable’s value is still ‘global scope’ while when it is called in function scope, it changes to ‘local scope’.
If you would like to read more about Javascript Fundamentals, please take a look at the Learn Javascript Fundamentals Series.
Happy Coding!!!