Scope

Scope determines the accessibility (visibility) of variables.

Variables declared within a JavaScript function, become LOCAL to the function whereas variables declared outside a function, become GLOBAL ie. all scripts and functions on a web page can access it.

The lifetime of a JavaScript variable starts when it is declared. Function (local) variables are deleted when the function is completed, global variables are deleted when you close the browser window (or tab).

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.

Lexical Scope

In a nested group of functions, accessing the variables which are declared outside the function call is lexical scoping also referred to as Static Scope.

In simple words, JavaScript looks for variables in such a way that if it can’t find a variable in its local Execution Context, it will look for it in its calling context and if not found in its calling context it will keep looking repeatedly until it reaches the global execution context. If it does not find there even, it’s declared undefined.

Scope Chain

Scope chaining establishes the scope for a given function. Each defined function has its own nested scope, and any function defined within another function has a local scope that is linked to the outer function - this link is called the chain.

Single Thread

"JavaScript is single-threaded", means only one statement is executed at a time. So a program is executed line by line, synchronously (sequentially). Each time a function is called, the program execution waits until that function returns before continuing to the next line of code. Single-threaded means it has "only one" call stack. Whatever is on the top of the stack runs first.

Call Stack

The call stack is a mechanism for an interpreter to keep track of multiple function calls. It is like a stack in data structures data is pushed and popped according to the Last In First Out (LIFO) principle.

• When a script calls a function, the interpreter adds it to the call stack and starts carrying out the function.

• Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.

• When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.

Hoisting

Hoisting is JavaScript's default behaviour of moving all declarations to the top of the current scope. So, a variable can be used before it has been declared.

When the interpreter hoists a variable declared with var, it initializes its value to undefined. Whereas using an undeclared variable will throw a ReferenceError instead.

Variable declared with let or const is hoisted but not initialized with a default value. Accessing a let or const variable before it's declared will result in a ReferenceError (as they fall under the Temporal Dead Zone).

Function declarations are hoisted too. Function hoisting allows us to call a function before it is defined (even though it will return a TypeError or ReferenceError).

So, how's hoisting helpful? It enforces us to use let and const and avoid using variables before they're declared. Function hoisting is useful because we can hide function implementation further down the file and let the reader focus on what the code is doing.