What is Scope in JavaScript...??

"The scope is a policy that manages the accessibility of variables. A variable defined inside content is accessible only within that scope, but inaccessible outside. In short, we call scope as visibility of a variable in a program depending on the declaration of a variable "

Example :

In the above example, the firstName variable is accessed only in the If statement and if we tried to access outside the scope it would give an error this situation is called the scope there are three types of Scope available in javascript

Types of Scope available in javascript

• Global Scope
• Function Scope / Local Scope
• Block Scope

Global scope

Global scope is a simple scope as the name 'global' it was defined globally like the top of the code or outside of any function, the global is visible throughout the program

The variables in the global scope can be accessed from anywhere in the program

example:

here let firstName is the global scope and can be accessed from inside and outside the function but the condition is that we have to declare it globally or outside the function or outside { } that the rule to define the global scope

Function Scope / Local Scope

Function Scope means that the variables are only accessible in the function in which they are declared.

A function in JavaScript defines a scope for variables declared using var, let, and const.

let's understand with the help of the example

In this program, we are not able to access the variable let lastName because it was declared inside a function so it's visible only in that function and we cannot access it outside, or else it will give an error as shown in the above screenshot because its scope/visibility lies only into that function

Block Scope

The block scope means that the variable is accessible within the block that is between the curly braces.

let and const introduced in the ES6 version of javascript, unlike '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 example we can access the 'var' variable outside the { } curly braces but we can't access the 'let' or 'const' variable outside curly braces because its a block scope variable in javascript and if we do so then it will give you the error of Uncaught ReferenceError: firstName is not defined

Lexical Scope

Now we know what is scope so we can understand lexical scope better

• Lexical scope is the ability of a function scope to access variables from the parent scope.*We call the child function to be lexically bound by that of the parent function.

Note - lexical scope is also called static scope

Example :

In the above example, 'a' is accessible by all function scopes since it is in the global scope. and b is only accessible within the func brackets because it is a function scope variable but the inner function or child function can access b so the inner function is lexically bounded by the outer function is called lexical scoping

Single Thread

javascript is a synchronous single-threaded language

So what is meant by single-thread language ????

Single thread means it will execute one task at a time and it will not execute the next task until the current task is finished or executed

Now, JavaScript is a single-threaded language, which means it has only one call stack that is used to execute the program. The call stack is the same as the stack in data structure that you might read in Data structures.

Example

in this example, the line is executed step by step or single line first, it will execute one statement at a time and pop out from the stack and the same happens for each statement in the program this scenario is called a single thread language

Call Stack

A call stack is a way for the JavaScript engine to keep track of its place in code that calls multiple functions. It has the information on what function is currently being run and what functions are invoked from within that function…

Call stack Follow the LIFO principle i.e Last In First Out

function add(a, b) {
    return a + b;
}

function average(a, b) {
    return add(a, b) / 2;
}

let x = average(10, 20);

let's understand it with a diagram

Step 1: When execution begins it adds global execution context on top of the stack

Step 2: it will call the average and put it on top of the call stack

Step 3: average() function calling the add() function so it will place add() function on top of stack

step 4: execute the add() function and pop out from the stack

step 5: Now the average() function is top on the stack so it will execute it and pop out from the call stack

Javascript uses a Call stack to manage execution context