Understanding Local Scope in JavaScript
A JavaScript fundamentals series Scopes, Hoisting, Closures
In my previous article, we took a deep dive into Global Scope. 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 JavaScript code, you likely already created local scope by using a function. By creating a variable inside a function, you have created 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 is only allowed within that function.
Any variable created inside the yellow box is a local variable, just like any variable inside blue box is a global one. To make it super easy to understand, the blue box represents the global scope while yellow box represents the local scope.
Of course to understand a local variable/scope is not possible with one image and a description. Let’s take a look another image.
A local variable is different than a global variable and is more complicated to understand. This demo shows the basic behavior/concept of local scope. If you create different functions, you basically create different scopes for each of them. To understand the basic behavior, we can work with the 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 16console.log(localOne); // Uncaught ReferenceError: localOne is not definedconsole.log(globalOne); // 16
Since our variable globalOne is a global variable, and we can access it anywhere. However, the localOne variable is only accessible inside its scope. That’s why if we call the testingScope function, we can see both variables in the console.
In the global scope, we can only access global variables, which are stored in the 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 is called and are gone once it finishes. That’s why they are only accessible during the execution of their function. That is one of the key differences between global and local variables.
Differences 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 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 a subset of a function scope with a block scope.
If you use blocks anything between {}, such if, switch, for, while can make use of block scope only if you define a variable with let and const. This is a long description 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 definedconsole.log(otherLocalVariable) // 10
Do you see their behavior? localVariable, defined with let, is only visible inside the block. otherLocalVariable, defined with var, is visible outside the block. The different behavior is because of the difference between var, let, const. Therefore, it is important to know the differences between 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 the global scope and then in local scope, the local one takes precedence. Shadowing only happens when they share the same name. In the global scope, the variable retains its initial value, but in local scope, its value changes temporarily to whatever you reassigned. Let’s see an example:
let simpleVariable=’global scope’function testingVariableShadowing(){
simpleVariable=’local scope’; // reassignment
console.log(simpleVariable);
}testingVariableShadowing(); // local scopeconsole.log(simpleVariable); // global scope
In 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!!!
