JavaScript Scope

Scope refers to the availability of variables and functions in certain parts of the code.

In simple words anything written inside { } brackets is scope.

In JavaScript, a variable has three types of scope:

Global Scope
Local Scope
Block Scope

Global Scope

A variable declared at the top of a program or outside of a function is considered a global scope variable.

Example:

In the above program, the variable 'name' is declared at the top of a program and is a global variable. It means the variable 'name' can be used anywhere in the program.

The value of a global variable can be changed inside a function. For example,

In the above program, the variable 'name' is a global variable. The value of 'name' variable is Ineuron. Then the variable 'name’ is accessed inside a function and the value changes to LCO.

In JavaScript, a variable can also be used without declaring it. If a variable is used without declaring it, that variable automatically becomes a global variable.

In the above program, the variable 'name’ is a global variable.

If the variable was declared using let name = "Ineuron", then the program would throw an error.

Local Sope

A variable can also have a local scope, i.e it can only be accessed within a function.

It is also called as Function Scope

In the above program, the variable name is a global variable and the variable child is a local variable. The variable child can be accessed only inside the function displayName. Hence, when we try to access a variable child outside of the function, an error occurs.

Block Scope

The let keyword is block-scoped (variable can be accessed only in the immediate block).

var variables, they can be scoped to the nearest pair of curly braces. That means, they can’t be accessed from outside that pair of curly braces.

Example:

In the above program, variable

name is a global variable. It can be accessed anywhere in the program.
child is a local variable. It can be accessed only inside the function displayName.
subchild is a block-scoped variable. It can be accessed only inside the if statement block.

Hence, in the above program, the first two console.log() work without any issue.

However, we are trying to access the block-scoped variable subchild outside of the block in the third console.log(). This will throw an error.

Nature of JavaScript

JavaScript is a Single-threaded, non-blocking, asynchronous, concurrent programming language with lots of flexibility.

Single Thread

A single-thread language is one with a single call stack and a single memory heap. It means that it runs only one thing at a time.

A stack is a continuous region of memory, allocating local context for each executed function.
A heap is a much larger region, storing everything allocated dynamically.
A call stack is a data structure that records where we are in the program.

JavaScript can do one single thing at a time because it has only one call stack.

When we execute a JS program a Global Execution Context is created internally by JavaScript. Global Execution Context acts as the 1ST automatically created Execution Context and this is the first item of the call stack.

When we execute the program function first will be called then the second will be called and both are pushed into the call stack.

when function second execution end then it popped out from the call stack and execution again comes at a function first and then the function first returns “a”.

As you can see function first popped from the call stack and now we have only a global execution context.

when program execution end, the call stack will empty.

At last, prints output 3

JavaScript Hoisting

Before Starting the concept of Hoisting , you have to understand the flow of “ How JavaScript Works “ , You can Go through this

Hoisting is JavaScript's default behavior of moving declarations to the top.

In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.

First, we'll examine the results of calling a function without first defining it.

Here, we define the displayName function to ensure that the output is written properly.

We'll use the same example moving forward, except this time we'll call the function before we declare it.

that is the concept of Hoisting because the JavaScript Interpreter will move all declarations to the top of the current scope. ( It means they pull the definition of the function at the top ).

Thanks for reading! ☺️

Pawan Thanay's Blog