Differences Between Local Scope and Global Scope Variable In JavaScript
The scope of a variable defines where it’s accessible in a program based off of where it was created. Just because we create a variable in one place in our program doesn’t mean it’s going to be accessible from anywhere in our script. In this article, we will discuss the two types of variable scope — local and global, and their differences. To know about what a variable is and how it can be created, you can read my article here → https://bit.ly/JavaScript-var-let-const
There are two types of scope in JavaScript.These are:
- Global scope — Global scope contains all of the things defined outside of all code blocks. A code block simply consists of grouped statements inside curly braces ({ }). if statement, loops, function are examples of structure that create a code block. A global variable has global scope. A global variable is accessible from anywhere in the code.
- Local Scope — Local scope contains things defined inside code blocks. A local variable has local scope. A local variable is only accessible where it’s declared.
let variableName = "A string"; //global scopeif (condition) {
block of code to be executed //local scope
}let anotherVariable = "something else"; //global scope
In a scope, you can access variables defined in that scope, or in any parent/ancestor scope. Example:
For more visibility, let’s break the code down step by step, explaining each step, what each console.log() will print and why it’s so
At index 1, we have our first variable which is a global variable. From what we’ve learned, we know that a global variable is accessible not just where it’s declared but everywhere else.
From index 3 - 12, we have if statement in which there is another if statement inside it, making the first if statement(at index 3)a parent to the second if statement(at index 7). Therefore, the local variable at index 4 is not only accessible in the if statement at index 3 but also accessible anywhere inside the if statement at index 7 because, in a scope, you can access variables defined in that scope, or in any parent/ancestor scope (in our case, the first if statement is the parent). We also have another local variable at index 8 which only belongs to the second if statement and is therefore only accessible inside it.
The console.log(varTwo) at index 5 will print two because varTwo is a local variable and we are accessing it at that same scope it’s declared. The console.log(varOne) at index 9 will print one because varOne is a global variable and we can access it outside its scope. The console.log(varTwo) at index 10 will print two because the if statement at index 3 is a parent to the if statement at index 7.
After the first two if statement, we have another variable declared at index 14. This is also a global variable because it is not declared inside any of the curly braces (code block) but outside. Therefore, it’s also accessible anywhere from its point of declaration.
After the global variable, we have another if statement in which a local variable is declared in it(index 17) and we have console.log(varThree) in it as well (remember that the varThree we are trying to access here is a local variable that belongs to the if statement at index 7). Therefore the console.log(varThree) at index 18 will throw a ReferenceError: varThree is not defined because it cannot be accessed except where it was defined.
The console.log(varFour) at index 21 will throw ReferenceError: varFour is not defined because varFour is a local variable and it is not accessible outside its scope. While the console.log(varOne) at index 22 and console.log(varFive) at index 23 print one and five respectively because both varOne and varFive are global variables.
When we have different scopes, we can define variables with the same name in each scope. Example:
In this example, we have three variables declared with the same variable name(firstName). We know this will throw an error if we defined them in the same scope. But since they are all declared in different scopes, it is allowed. This is known as variable shadowing in JavaScript. It’s is when a variable in a local scope uses its value instead of the value of a variable in parent scope. So each local variable is shadowing over the parent’s, basically hiding it from existence. That is why the console.log(firstName) at index 5, 9 and 13 will print Dasola, Tolani, Rukayat respectively without throwing an error. Note: the last console (index 13) prints Rukayat because the only variable it has access to is the global scope variable.
Let’s check this out:
if (10 == 10) {
firstName = "Rukayat";
console.log(firstName);
}console.log(firstName);
What did you from this code? The first console.log(firstName) should print Rukayat? And the second one outside the scope should throw an error?
Well, both will print Rukayat without throwing any error. Why? This is a “leaking” into the global scope. Assigning a value to a variable when the variable was never explicitly defined, causes it to be leaked into the global scope. So in the above example, when we assign a value (Rukayat) to firstName, we are actually creating a global variable, making it accessible everywhere. That is why it prints Rukayat in both cases.
So to avoid leaked global, a variable should be bound to a specific scope using the appropriate keyword(let, const, var). But note that var is a function-based scope and not block-based scope (read my article on the difference between var, let and const for more clarifications → https://bit.ly/JavaScript-var-let-const)
How scope works with function in JavaScript
The examples we’ve been using so far was the if statement, so we know how scope works with if statement in JavaScript. But what about function?
The only difference is that in function, the local scope doesn't only include everything created in the code block (inside curly braces) but also includes the function arguments. While the function name is a global scope
function tempConverter (fahrenheit) {
let celsius = (fahrenheit-32)*5/9;
return celsius;
}console.log (tempConverter(32));console.log(fahrenheit);
console.log(celsius);
So our global variable in this example is the function name (tempConverter) while the local variables are; the function argument (fahrenheit) and celsius. Therefore, console.log (tempConverter(32)) will print 0 on execution while console.log(fahrenheit) and console.log(celsius will throw a ReferenceError: fahrenheit is not defined and ReferenceError: celsius is not defined respectively. This is because tempConverter is a global variable (accessible outside its scope) while fahrenheit and celsius are local variables (only accessible in its scope)
This brings us to the end of this article. Thanks for reading.
