Introduction
In this article, we'll learn about the scope and its type, single-threaded execution, call stack, and Hoisting Topic which are the common interview topics. Let's go
Scope
Scope refers to where something is available to us. It is defined by where variables are declared and where they are available for us to use. In JavaScript, there are 3 types of variable scope, namely: Global Scope, Local Scope: Function Scope, and Block Scope
Global Scope
The variables defined outside of any function or curly brackets are known as global variables and have global scope. Global scope means that the variables can be accessed from any part of that program, any function or conditional state can access that variable
Example
Local Scope
If you were to define some variables inside curly brackets {} or inside a specific function then those variables are called local variables with the release of ES6, the local scope was further broken down into two different scopes: Function scope and Block scope.
Function Scope
The function scope is the accessibility of the variables defined inside a function
Example
Block Scope
The block scope can be defined as the scope of the variables inside the curly brackets {}. Now, these curly brackets can be of loops, or conditional statements, or something else. The keywords let and const are used to define block variables.
Example
Single-Threaded execution in javascript
Javascript is a single-threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece of code before moving on to the next.
Call Stack
A call stack is a way for the Java 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… The call stack works based on the LIFO principle i.e., last-in-first-out.
When you execute a script, the JavaScript engine creates a global execution context and pushes it on top of the call stack.
Whenever a function is called, the JavaScript engine creates a function execution context for the function, pushes it on top of the call stack, and starts executing the function.
If a function calls another function, the JavaScript engine creates a new function execution context for the function that is being called and pushes it on top of the call stack.
When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it left off.
The script will stop when the call stack is empty.
Example
The following picture illustrates the overall status of the Call Stack in all steps:
Credit- JavascriptTutorial.net
Hoisting
When the JavaScript engine executes the JavaScript code, it creates the global execution context. The global execution context has two phases Creation and Execution During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code. This is known as hoisting in JavaScript.
Variable Hoisting
In terms of variables and constants, keyword var is hoisted, and let and const do not allow hoisting.
For variables declared with var, the hoisted variable declaration is initialized with undefined until the variable is later assigned with its actual value. Therefore when we try to access a variable declared with var before it’s actually defined, it returns undefined.
For variables declared with var, the hoisted variable declaration is initialized with undefined until the variable is later assigned with its actual value. Therefore when we try to access a variable declared with var before it’s actually defined, it returns undefined.
Function Hoisting
Similar to variable hoisting, in function hoisting the function declaration is put at the top of the script during the compilation phase or before the code execution. The function hoisting allows us to write the function call statement above the function declaration in the code
Note: The function hoisting is only available for function declaration not with function expression. Because in a function expression we initialize the function to a variable, and according to the variable hoisting the initialization can not be hoisted to the top of the script
