scope

The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or phrase is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

local scope

Variables declared within a JavaScript function, become LOCAL to the function.

function myFunction() {
  let carName = "Volvo";
}

block scope

• Before ES6 (2015), JavaScript had only Global Scope and Function Scope.
• ES6 introduced two important new JavaScript keywords: let and const.
• These two keywords provide Block Scope in JavaScript.
• Variables declared inside a { } block cannot be accessed from outside the block:

{
  let x = 2;
}
// x can NOT be used here

function scope

• JavaScript has function scope: Each function creates a new scope.
• Variables defined inside a function are not accessible (visible) from outside the function.
• Variables declared with var, let and const are quite similar when declared inside a function.

function myFunction() {
  var carName = "Volvo";   // Function Scope
}

global scope

• Variables declared Globally (outside any function) have Global Scope.
  • Global variables can be accessed from anywhere in a JavaScript program.
  • Variables declared with var, let and const are quite similar when declared outside a block.

  var x = 2;
  let x = 2;
  const x = 2;

lexical scope

When a function is defined inside another function, the inner function can access the variables of the outer function. This operation is called Lexical scoping.

  function init() {
    var name = 'Mozilla'; // name is a local variable created by init
    function displayName() {
      // displayName() is the inner function, a closure
      console.log(name); // use variable declared in the parent function
    }
    displayName();
  }
  init();

---

single thread

JavaScript is a single-threaded language because while running code on a single thread, it can be really easy to implement as we don't have to deal with the complicated scenarios that arise in the multi-threaded environment like deadlock

  <script>
  console.log('A');
  setTimeout(() => {
      console.log('B');
  }, 3000);    
  console.log('C');
  </script>

---

call stack

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();
  // [3] Some code here

---

hosting JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

---

resources

• w3school
• mdn docs
• gfg