Scope in Javascript refers to the accessibility/visibility of a variable or any other resource in Javascript.
Without wasting time let us dive into some examples to understand scope.
Global Scope
There is only one global scope in Javascript document. The area outside of all the functions is considered t be global scope. The variables declared in global scope can we accessed and altered in any other scope.
//global scope
var fruit = 'apple'
function printApple() {
console.log(fruit)
}
printApple()
In the above example the variable fruit
is declared in global scope and it can accessed any where inside the document. The answer does not change even if I use let
instead of var
.
Local Scope
The variables declared inside a function are said to be local to the function they are declared in. Every function has its own scope.
function a() {
// local scope a
function b() {
// local scope b
}
}
function c() {
// local scope c
}
Now, let us dive a bit into the local scope. Local scope is divided into two sections namely, block scope and function scope.
Function Scope
Whenever you declare a variable inside a function the variable is visible or accessible inside the function. The variables declared with the keyword var
are associated with functional scope.
function a() {
var fruit = 'apple'
console.log(fruit)
}
a() // apple
console.log(fruit) // error: fruit is not defined
Block Scope
In Javascript, the area within if
, for
, switch
and while
is considered to be a block. In simple terms whenever we use {}
(curly braces) a block is created and the variables declared inside it are considered to be block scoped to that particular block.
The variables declared with the var
keyword do not show the properties of block scope. The variables declared with let
and const
show the block scope properties.
function a() {
if (true) {
var x = 'hello'
let y = 'hey'
const z = 'bey'
}
console.log(x)
console.log(y)
console.log(z)
}
a()
// console.log(x) will print hello
// console.log(y) will throw error
// console.log(z) will throw error
Apart from all the scopes discussed above there is one more scope which needs a mention which is the Lexical Scope.
Lexical Scope
In simple terms it means that the variables declared in the parent can be accessed by the children. The children functions are lexically bound to the execution context of their parents.
function a() {
var x = 'hello'
let y = 'hey'
const z = 'bey'
function b() {
console.log(x)
console.log(y)
console.log(z)
}
return b
}
b = a()
b()
// console.log(x) will print hello
// console.log(y) will print hey
// console.log(z) will throw print
I hope this article sums up what exactly is scope in Javascript. Also, I would like to mention we need to know how exactly let
, const
and var
work in-order to take a much deeper dive into Scope.
Reach me out on Github and LinkedIn.
Follow me on Twitter
Have a nice day :)
Top comments (1)
Hello, thanks for making a beginners guide.
But i'd like to remind you that your tags should match your content. Else dev.to would become chaotic and tags become irrelevant.
So you should remove
react
andtypescript
tags.