A Beginner's Intro to Scope in Javascript
The definition of scope is,
“the extent of the area or subject matter that something deals with or to which it is relevant.” — Oxford Languages and Google English
So scope in JavaScript (or other programming languages for that matter) is the “area” in which “something” is relevant or dealt with. Ok so let's define “area” and “something” in programming terms.
The “something” will be a variable or a function.
The “area” will be where that “something” is defined.
Where?
There are only so many places where we can define things when writing code. The “largest” area we can use is the global scope. If we define a variable outside of ALL functions, or we use the var keyword, such as var something = "this thing" within a function, it will be included within the global scope, everything and anything will be able to access it.
Another area is within a function. Now technically this is where scope can become more complex, but for practicality, I will focus on two levels of scope within functions to get the ball rolling; function and block level scope.
Function scope is pretty simple to understand, with one caveat. If we define something within a function, that function can access it.
function checkScope(){
let something = "this varible is in scope"
console.log(something) // -> this varible is in scope
}This function checkScope()would have access to the variable something defined within it. But what if it was written like this?
function checkScope(){
function newScope(){
let something = "is this variable in scope?"
console.log(something) // -> is this variable in scope
}
console.log(something) // -> will return undefined
}If checkScope() was written this way the variable something would not be accessible to the checkScope() function, it would be part of the function scope of thenewScope() function. So again, if we define something within a function, that function can access it… UNLESS it is inside another function.
The second level of scope I want to take about is block scope. In programming, we write code in chunks, each chunk does something and is referred to as a block of code. Blocks can be functions or conditionals within a function, these blocks and their scope work very similarly to the function scope.
If something is defined within a block, we can access it within that block, UNLESS it is defined within a function within the block.
function checkScope(){
let x = 1 if(x == 2){
let something = "true"
console.log(something) // -> true
}
console.log(something)// -> undefined
}
checkScope() does not have access to the variables inside the if statement above, so when we try to console.log(something) we will only get undefined, but when the condition is met something is set within that block and can be accessed, so the console.log(something) will return true.
This block has its own scope, and until that scope is entered the definition given to something do not exist and are not accessible. This makes sense from a functional standpoint. I don’t want to mix up what something means if one condition is met, with what it means if another condition is met, that would defeat the point of having conditions.
Two Final Terms
So far we have looked at three levels of scope
Global
Function
Block
These three levels have access to variables within them and can be separated further by functions, and then separated further by blocks. This level of separation allows for us to have access to the values we want only when we want them and not before, it allows us to use the same variable name and apply a value to it conditionally, and it makes it much harder to unintentionally change a variable’s value. But there is one more thing that we need to know to really be able to use scope effectively; the terms inner and outer.
function checkScope(){
let outerVar = "Outer scope variable"fucntion innerScope(){
let innerVar = "Inner scope variable"
console.log(outerVar)// -> Outer scope variable
console.log(innerVar)// -> Inner scope variable
}
console.log(outerVar)// -> Outer scope variable
console.log(innerVar)// -> undefiend
}
In our checkScope() function above we can see that the outerVar is defined in the scope of thecheckScope() function, and when we use console.log(outerVar) we will get the value of the variable back, but cosole.log(innerVar) returns undefined. So checkScope() does not have access to innerVar.
On the other hand, we can see that both of the console.log() statements return the value of the variable in the innerScope() function, showing that the innerScope() function has access to the variable defined within itself, as well as the variable defined outside of it in the checkScope() function. This is the heart of the inner and outer scope.
If you are in a function, any variable defined will be accessible by any blocks or functions defined within that original function. I like to think of a Russian doll, each function or block nested inside gets access to all the variables defined already.
To put it another way, each function or block of code that is inside of another function or block of code will have access to all of the variables defined in the functions/blocks that it is contained in.
Conclusion
Like most things in programming this will make more sense the more you use it and the more bugs you solve involving it. I think that having this basic understanding of the three levels of scope, global, function, and block as well as an understanding of inner and outer scope, you can really just go forth into the unknown and learn the intricacies as you go. If you are interested in learning more about the deeper aspects of scope check out this article, it goes into things like execution context, lexical scope, and methods like call() and bind() which can change the context of your functions. Until next time, Happy Coding!
