In programming, the scope of a variable determines its lifetime. The scope describes if a variable, a function or an object is accessible or inaccessible by different parts of the program during runtime. In this article, we will see examples to cover briefly the global, local and block scopes in JavaScript.
Wat are these blocks?
Before diving in the scope categories that exist in JS, we have to define first what a block is. A block is a piece of code inside a set of curly braces {} and groups code statements together. An example of a block could be a function, like this:
The Global scope
A variable exists inside or outside a block. If a variable is declared outside all functions or curly braces ({}), it exists in the global scope. The global variables can be accessed by any line of code in the program, including inside blocks.
The Local scope
In contrast to global variables, locally scoped ones are only visible within the function they are declared. Each function written in JavaScript creates a new local scope and every variable declared in this scope is a local variable. That means that variables with the same name can be used in different functions. However, any effort to reference a local variable outside its scope will result in a Reference Error:
The Block scope
So far, we’ve seen variables defined with the var keyword. Var can declare a variable either in the global or local scope. The variables that are declared within the block scope are comparable to local ones. They are available within the block that they are defined.
The main difference between the local scope and block scope is that the block statements (e.g. if conditions or for loops), don't create a new scope. So the var keyword will not have an effect, because the variables are still in the same scope.
ES6 introduced block scope by using the let and const keywords. These two keywords are scoped within the block which are defined.
Why Scoping?
So, why having scopes and limit the visibility of variables? Firstly, security reasons. The variables are only accessible when they are needed. Secondly, the scope solves the namespace collisions problem, which happens when variables with the same name but with different scopes exist. Finally, It will save memory in your code because the block variables will stop to exist after the block finishes running.
Sum up
-> Global variables last as long as the application is running.
-> Local variables last as long as a function is running.
-> Block statements don't create a new scope and the block scope does not apply to var keyword.
-> Const and Let can define scope to block statements.
References:
JavaScript: A Basic Guide to Scope
Top comments (3)
Love this. I'm writing a similar article rn and I came across yours while researching; great work!! I'm curious if const can also be used to declare global variables? I thought yes since that would guard against mutating global variables by accident, but I could be mistaken.
Also, I really like how you formatted your code blocks!! I def want to figure out how to make my code blocks interesting and colorful like yours :)
This is an amazing writeup, with great code examples. With this, my confusion about scopes in JavaScript has been cleared. Thank you so much for taking out the time to write this article. It is indeed horror-scopes, lolzzz.
The content given is clear and understandable..
Love this..