DEV Community: himanshuc11

Hoisting and Temporal Dead Zone

himanshuc11 — Wed, 02 Feb 2022 06:27:23 +0000

Hoisting is effectively the result of JavaScript Engine's 2 phase Execution of the program(https://dev.to/himanshuc11/working-of-js-engine-258h).

What is hoisting?

When variables are encountered during the program run, during the first pass they are given space in memory and initialized with undefined

The variables are updated with their actual values only when the thread of execution reaches the line of code, where they are initialized.

So effectively during hoisting we feel as if the variables are "hoisted" to the top, but actually during the first pass, all variables are assigned undefined and stored in memory.

What is hoisted?

Although all three types of declaration, let, const and var are hoisted, var behaves differently from let and const. var declarations are initialized with undefined, but let and const are not initialized with a default value, instead an exception will be thrown when we try to access let and const before its initialization from the thread of execution inside from the source file.

// The first pass occurs and thread of execution starts from here
// Here vx stores undefined
var dev = "dev"    // vx now stores "dev"

// The first pass is over
// Here the Engine knows about cx and lx, but cannot assign a value to them
const cx = 'dev' // now cx has its value as 'dev'
const lx = 'dev' // now lx has its value as 'dev'

Temporal Dead Zone

When trying to access let and const variables, before its initialization from the source file's thread of execution, will result in a reference error. The variable is in the Temporal Dead Zone from the start of its initialization in the first pass, till the thread of execution assigns some value to it. Here JavaScript knows that a variable exists, but doesn't know what it data/value it holds

// Line 1, here Engine knows about x, but not its value, start of temporal dead zone
.
.
.
let x = 'dev'
// After assigning x some value, temporal dead zone is over, as its declaration is complete

Common Confusion

undefined refers to something that doesn't exist yet, or doesn't exist anymore
null refers to an empty value
not defined refers to an exception in which JavaScript Engine doesn't know about the identifier requested
reference error refers to an exception in which, let or const is accessed before its declaration is complete

To get a video tutorial on the concept
https://www.youtube.com/watch?v=wtBbanu-kUY

References
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Working of JS Engine

himanshuc11 — Tue, 01 Feb 2022 13:07:33 +0000

JavaScript runs through the code it needs to execute, twice. This results in two phase execution of code

The two phases are popularly referred as
1) Creation Phase
2) Execution Phase

Creation Phase

In the creation phase, the JavaScript Engine goes through the code to

Create a special object called activation object. This object is used to hold all the variables and functions
Create a scope chain, which is an array of lexical environments.(Will be discussed in detail in later blogs)
Determine the value of 'this', which is a special keyword in JavaScript which refers to the object calling the function

Execution Phase

In this phase, the JavaScript Engine goes through the code line by line(in the order dictated by the thread of execution) and executes each line of code, and updates the values of variables as needed

Advantages of 2 Phase Execution Process

As we can see, during the creation phase, JavaScript has access to all the variables and functions, we can get access to those functions. Hence we can now call a function before its definition.

// Function call before, definition is valid
dev()
function dev() {
// Some Code
}

Hence call before definition is now possible in JavaScript Engine

JavaScript now also knows all your variables and sets a initial value 'undefined' to it. This way if some identifier is not declared, the error message would give 'not defined' instead of 'undefined'

console.log(x)  // This gives undefined
let x = "dev"
console.log(x) // This gives "dev", as it is updated on the line above

console.log(y) // This is not defined as 'y' is not a valid identifier that JavaScript knows about
let x = "dev"

To get a video tutorial on the concept
https://www.youtube.com/watch?v=wtBbanu-kUY

References:
https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c

https://medium.com/@sudhakarsp06/creation-phase-and-execution-phase-in-javascript-32fcdbef60f4

Variable Declarations and Scoping in JavaScript

himanshuc11 — Mon, 31 Jan 2022 13:07:24 +0000

There are only three types of variable declaration inside JavaScript. These are
let, const and var declarations

Before we understand these declarations we need to know about scoping.Scoping simply answers the basic question, "Where is this variable name valid?". This can also be thought of where can I, access this variable from.

There are 2 types of scoping

Block Scoping

In this type of scoping, the variables are valid only to the nearest enclosing block and not outside it. They are essentially valid only from "{" to the "}". So we simply look for the innermost "{" in which the identifier is present. It is now valid until it's corresponding "}" is not encountered.

{
// Block Scope of a variable 
}

1{
   // Variables declared here are valid from 1  to 1' and even valid inside 2 to 2' as its enclosing block is 1'
    2{
        // Variables declared here valid only from 2 to 2'
    2'}
1'}

Lexical Scoping

Lexical scoping allows variables to be valid inside the whole function inside which they are declared and ignore all block level scoping. Here the variable once declared inside the function can be accessed inside any level of the function

function dev() 1{
// Lexically scoped variables, are valid from 1-1' 
1'}

function dev1() 1{
    2{
        // Lexically declared variable x
    2'}
    // x is valid here as it is lexically valid from 1-1' 
1'}

Now we understand scoping so we can discuss let, const and var in detail.

let and const are block level scoped and var is lexically scoped.

Difference between let and const

let is used to refer to variables that may change in the future.

const is used to declare a read-only reference to the value. A const statement does not allow re declaration or re-assignment of variables

Common confusion

Using const in objects makes a constant reference to the object, not the object constant. The object is still mutable

// This is valid JS as we are mutating the object, not the reference
const obj = {}
obj.key = "value"

// This is invalid JS, as we are mutating the reference itself
const obj1 = {}
obj1 = {"key": "value"}

Another common confusion is that var creates global variables, which is not entirely true.
var is used to create variables with lexical/functional scope, so var becomes a global variable only when it is declared outside any function

// variables declared here are globally scoped

function dev() {
// variables declared here are not globally scoped, and are restricted to the dev
}

To get a video tutorial on this concept,
https://www.youtube.com/watch?v=wtBbanu-kUY

References:
https://developer.mozilla.org/en-US/docs/Glossary/Scope
https://javascript.info/closure