SCOPE in JS

What is scope?

The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or expression is not in the current scope, it will not be available for use. But we'll revisit this part in a while with lexical scoping🙂.

Types of Scope in JS

Local Scope
- function Scope
- Block Scope
Global Scope

Local Scope : Variables that can be used in a specific part of the code are considered to be in a local scope.

Function Scope:
- The scope which is defined inside the function. Like all variables
  declared in function is only accessible inside the function.
- Function scope also behaves like block scope in 'strict mode'.
Block Scope:
- The scope which is defined by blocks (ES15) like in case of switch statement
  Variables that can be used in a specific part of the code are
  considered to be in a local scope.
- However, this only applies to let and const variables. Variables
  declared with var end up in the closest function scope (Global Scope).

Global Scope: All variables defined outside of the local scope then they are in global scope. All variables inside global scope can be accessed by inner function or block scope.

Interview prep assets.png

Scope Chain

In one scope there is another scope nested within and this nested one has access to all the variable and functions in outer scope or parent scope. This concept is called scope chain.

function outerFunction() {
  let one = 1;
  console.log(two, three);    // Reference Error

  function innerFunction1() {
    let two = 2;
    console.log(one);    // 1

    function innerFunction2() {
        let three = 3;
        console.log(one, two);    // 1 2
    };
  };
};

// inner scope can lookup for variables in outer scope but not vice-versa

scope chain.png

Lexical Scoping

lexical scoping tells how variable names will be resolved in nested functions, which means inner functions has the parent functions’ scope even if that (parent function) has returned.
Lexical Scope refers to the place or region in which the item is created.

Call Stack And Single Thread JS

mdn has an amazing explanation and I'll walk you through an example from mdn itself, so let's go.

Definition: A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

function greeting() {
   // [1] Some code here
   sayHi();
   // [2] Some code here
}
function sayHi() {
   return "Hi!";
}

// Invoke the `greeting` function
greeting();

Ignore all functions, until it reaches the greeting() function invocation.
As you Can see it is in the global execution context. JS engine run this function and at a line it meet with another function invocation. Then it adds this function execution context to the call stack.
It runs the function and execute it. After completing the execution result will be return to the same line which was invoking this function. And this function Execution Context will be popped out from call stack.
After that JS interpreter checks the call stack and if there is any function execution context pending it runs it.
At the end our call stack will be empty.
Whenever there is a function invoked a new Function Execution Context will be created and pushed to the top of call stack in a hierarchy manner.
In this way JS engine keeps track of which function is called in what manner and execute it accordingly.

If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.

Call Stack.png

Single Thread Concept

As you can see that JS engine executing the functions one by one in call stack, it is not running them all at once. And this behavior is known as Single Thread JS.

Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. The hoisting mechanism only moves the declaration not the initialization.

Let's see some key points to remember in Hoisting

All undeclared variables are global variables
Strict mode eliminated some silent JS errors, fixes mistakes that make it difficult for JS engines to perform optimisations.

"use strict"

console.log(kite); // Reference error: kite is not defined
kite = "triangle shape";

Variable declared with let keyword is block scoped and not function scoped. This ensures that we always declare our variable first unlike var keyword weird behavior which could generate bugs unknowingly.

console.log(kite);   // Reference error: kite is not defined
let kite = "triangle shape";

let kite2;
console.log(kite2);   // Undefined
kite2 = "rectangle shape";

With const, just as with let, the variable is hoisted to the top of the block. We can not reassign values to const and it have to be initialized at the time of declaration. Same as let it will give us reference error.
Function expressions are not hoisted.
Function declarations are hoisted completely to the top with reference in closest function execution(global). That's why we are able to call the function even before it's declaration.
JavaScript class declarations are hoisted. However, they remain uninitialised until evaluation. This effectively means that you have to declare a class before you can use it.
Class expressions are not hoisted.

We should make it a habit to declare and initialise JavaScript variables before use and using of strict mode in our javascript file

Thank you, I hope you liked the article. If yes then comment on it and give valuable feedback to improve. Peace...

Tools Used in Diagram making: Excalidraw

References:

Ish__talk