By Carmen Salas
Scoping in JavaScript refers to what variables your program has access to at any given moment in time. So let’s start scooping into this scope stuff...
What are the different types of scopes?
- Global scope
- Function scope
- Block scope
By default, when coding in JavaScript, you start in the window scope or the root scope. This is the global scope. This means there is only one global scope in a JS document.
Global Variables
Declaring a variable outside of a function is creating a global variable. Global variables have a global scope. Variables in the global scope can be accessed anywhere else in your program, in any other scope.
Local Variables
Unlike global variables, local variables are only available inside an enclosed part of your program such as a function or block scope, like if statements or loops. A local variable has a local scope..
let globalVar = "This is a global variable";
console.log(globalVar);
// This will log ‘This is a global variable’
function localScope () {
let localVar = "This is a local variable";
console.log(localVar);
// This will log ‘This is a local variable’
console.log(globalVar);
// This will log ‘This is a global variable’
}
console.log(localVar);
// This will throw an error: ReferenceError: LocalVar is not defined
If you run this code, the global variable globalVar can be accessed inside the function localScope. However, the local variable localVar can only be accessed in the scope of the function localScope and not in the global scope.
You can think of local scopes as a diary. Pretend you are a child keeping a diary (a local scope). You can write whatever you want inside of your diary (i.e. create as many variables as you want in a function), and name events that took place outside of your diary (accessing global variables outside of your function or calling other functions). However, no one else can look inside your diary, ESPECIALLY not your parents...cough...cough...GLOBAL SCOPES. Similar to how a parent is not able to look inside a child’s diary, you are not able to access local variables in the global scope.
Function Scope
If you declare a variable inside of a function, the variable can only be accessed within that function creating a function scope.
function myMoney (){
let me = "This is my money"
console.log(me);
//This logs "This is my money"
}
function yourMoney (){
let you ="This is your money"
console.log(me);
//This will throw an error: ReferenceError: me is not defined
}
If you run this code, the variable me in the function myMoney is not accessible in the function ourMoney. When console logging me in yourMoney, an error is thrown.
Functions do not have access to each other’s scopes.
Block Scope
If you declare a variable inside curly brackets { } like in an if statement or for loop, you are creating a block scope.
Variable Keywords
Variables declared with the keywords let or const have a block scope.
Variables declared with the keyword var have a function scope. Variables declared with var can only be accessed within the function where they were declared (or globally, if they were declared in the global scope). Var only has a local scope when declared inside a function, meaning if a variable is declared within a block, it can be accessed outside of that block.
if(true){
let blockScope = "unavailable"
var onlyFunctionScope = "available"
}
console.log(blockScope);
//This will throw an error: ReferenceError: BlockScope is not defined
console.log(onlyFunctionScope); //This will log 'avaialable'
If you run this code, only the var keyword variable will log its value outside of the block scope of the if statement. This does not happen with the variable blockScope because it was declared with the keyword let.
However,
function varScope(){
var onlyFunctionScope = "available"
console.log(onlyFunctionScope);
}
console.log(onlyFunctionScope);
// This will throw an error: onlyFunctionScope is not defined
If you run this code, the variable onlyFunctionScope is not available outside of the function varScope because it was declared with var and this is a function scope keyword.
In conclusion, creating a new function or block statement (anything with curly brackets {}), you are creating a new scope. Overall, gaining an understanding of how scoping works in JavaScript, will help you track bugs and help you avoid creating collisions. Understanding variables and their scope will allow you to create more efficient programs that are properly named. You will be better at declaring variables and choosing what variables will go where. When creating the same global variable twice in a large program, you can easily run into bugs, but thanks to local scopes, you do not have to rely on global scopes to store data. Which can be confusing in the long run or when working on larger projects.
Top comments (1)
nice