Scope

Scope is a range or accessible area of any value or expression. Values declared out of the scope, are not accessible, they will be unknown or undefined.

To understand it better, let us try to understand it with one scenario. Say that, you and your father stay in a nice Porsche society. These societies are under one campus called XYZ Society. As you are young and go to school, your father has not allowed you to go out of society without his permission or can go only under some elder guidance. But, your father as he is working has to go out of society to work for a living he has access to both outside and inside society.

So, with this simple scenario, we can clearly, see that for you outer world is not in your range or scope { }. But for your father, the outside world is accessible. He can enjoy going outside as well as inside society. But in your case, you have to enjoy inside society itself. For you outside scope is not accessible but for your father it is.

In code

let outsideAccess = 'father' // `insideAccess` variable is not accessible outside society function
// but `outsideAccess` varible is accessible inside society function

console.log(insideAccess); // ReferenceError: insideAccess is not defined,

function society() {
    let insideAccess = 'child' 
    console.log(outsideAccess); // father
}

we can see that the outsideAccess variable is accessible to both global and block level scope. We can also say that the child variable cannot have access to the parent scope and but the parent scope is accessible to the child.

Note

{ } any code written between these curly braces is treated as scope.

Type of scope?

Global Scope

Local Scope

Function Scope

1. Global Scope

The scope which is visible to another scope is called Global Scope.

Here name variable is global variable. Its scope is visible globally as well as inside functions also.

2. Local Scope

The scope of the variable which is accessible inside { } itself is called Local Scope.

3. Function Scope

Variable declared within the function can be only visible to the function and not visible outside the function. This is called Function Scope.

Single Thread

JavaScript is a single-threaded, non-blocking, asynchronous and concurrent programming language. Single-Threaded means that JavaScript code will execute line-by-line. That means any written code in JavaScript will first execute line 1, line 2, line3, ...so on. Because of this approach of JavaScript V8 engine, we call JavaScript a Single Thread.

Call Stack

Call Stack is a mechanism for the interpreter of JavaScript to keep track of its place in the script when multiple functions are being called and what functions are being called inside of that function.

Let us understand the concept of the call stack with an example

function One() {
    console.log(`Entered Function One`);
    Two()
    console.log(`Leave Function One`);
    // rest code here
}
function Two() {
    console.log(`Entered Function Two`);
    Three()
    console.log(`Leave Function Two`);
}
function Three() {
    console.log(`Entered Function Three`);
    console.log(`Leave Function Three`);
}

One()

Output

Entered function One Entered function Two Entered function Three Leave function Three Leave function Two Leave function One

From the above example and output, we can clearly understand that. As soon as the function One is being called, the function One is added to the call stack. in that function, it first printed Entered Function One then another function Two is called which will again add function Two in the call stack and it will print Entered Function Two on executing the next line of code it again encountered with function Three which is being added again to the call stack and it will print Entered Function Three.

In function Three no more addition function is being called so it will print the next line Leave Function Three. As soon as all the code gets executed in function Three the control gets back to function Two and it will print Leave Function Two and function Three is been removed from the call stack means function Three becomes empty. Similarly, after execution of all code in function Two, it is removed from the call stack. The same goes for function One.

Remember whenever we start executing any file in JavaScript Call Stack is empty and when the program ends Call Stack again becomes empty.

Note: whenever the stack variable or function is more than the space. It gives a `stack >overflow error.

Hosting

Hosting is a behaviour of JavaScript which allows you to access any variable or function before it is been declared. Although, it is been not recommended to access either of them before declaration still we have an option of that as well.

Accessing variable before initialization var hosting Declaring a variable with the var keyword shows output undefined when it's been called before declaring an initialization.

console.log(animal); // undefined -  Return undefined on calling before declaration 
var animal = 'tiger'; // declaration an initialization
console.log(animal); // tiger - Return tiger after declaration and initialization

There might be another case where you want to access a variable without declaration itself. It will throw an error to us as Reference Error.

For Example

console.log(animal); // ReferenceError: animal is not defined
animal = 'tiger'; // only initilisation happened

let and const hosting

Declaration of the variable with let and const is somewhat little different than var. If we try to access any variable declared with let and const it will throw us an error called // ReferenceError: Cannot access 'animal' before initialization. This is because both let and const works with block-level scope. That means the variable is not hoisted.

For Example

console.log(animal); // ReferenceError: Cannot access 'animal' before initialization
let animal = 'tiger'; // let initilisation and declaration.

Function Hosting The function can be called before or after the initialization of the function. No matter what you call it where the file function will be hoisted.

greet() // calling function before declaring greet function
function greet() { // initialising function
 console.log(`Good Morning`);
}
greet() // calling function after declaring greet function

Output

Good Morning Good Morning However, if try to assign a variable to a function then it will throw us an error.

For Example

greet() 
let greet = function() { // initialising function
 console.log(`Good Morning`);
}
greet()

Output

ReferenceError: Cannot access 'greet' before initialization

Generally hoisting gives you undesirable outcomes. So it's recommended to access the variable and function after its initialization for less buggy code and better outcome. It recommended to use let and const to declare a variable to avoid hoisting.

Hosting in JavaScript shows how execution contexts work.

In the end, if you like this article helpful for your interview preparation show some love 💓 and spread ☮️ peace.

Thank you!