Forem: manismk

Hoisting and Temporal Dead Zone in Javascript

manismk — Mon, 06 Jun 2022 08:48:06 +0000

Before getting into the details of hoisting and temporal dead zone, Let's see a code snippet to see the pitfalls of hoisting. So that we can handle it in a better way. In the below code snippet we trying to clear the cart when the noOfProducts is empty

if(!noOfProducts) clearCart()
var noOfProducts = 5;
function clearCart(){
    console.log("All products are deleted")
}
//Output is: All products are deleted

But when you run this code you will see the clearCart function will be executed and the console log will be printed All products are deleted. This happens because of hoisting. Now let's see about hoisting and the temporal dead zone in this blog.

What is Hoisting?

Hoisting is nothing but making some types of variables accessible/usable in the code before they are
actually declared. Let's see in a detailed way.

In javascript, the execution takes place in two phases,

Memory creation phase
Code execution phase

In the memory execution phase, every variable and function is assigned to memory with some values for it. This phenomenon is called hoisting. Let's dig deep and see what is that some value for each in the case of variables and functions.

Hoisting in Var

When you declare a variable with var,

In the memory creation phase the special keyword called undefined will be assigned to the variable.
so when you try to access the variable before the declaration undefined will be printed and after the initialization, the value is printed
If we fail to initialize the variable in the whole program, then the variable will have the value as undefined till the end of the program.

Let's see with an example code.

console.log(a) // undefined
console.log(b) //undefined
var a=10;
var b;
console.log(a) // 10
console.log(b) //undefined

Hoisting with function declaration

In the case of function declaration,

In the memory creation phase, the memory for the function is allocated with the whole code in the function.
This makes the ability to call the function before its declaration in javascript.

Let's see with an example code.

console.log(printName) 
//function printName {
//   console.log("Manikandan");
//}
console.log(printName()) //Manikandan
function printName(){
   console.log("Manikandan");
}

Temporal dead zone

In the case of a variable declared with const and let,

These variables are hoisted but can't be accessed by us until the declaration happens.
When we try to access these variables we will get the error ReferenceError: Cannot access 'variableName' before initialization
The place in between where we try to access the variable before its declaration and till the line of declaration is said to be that the variable is in a temporal dead zone.

Let's see with an example code.

1. console.log(a) //ReferenceError: Cannot access 'a' before initialization
2. console.log(b) //ReferenceError: Cannot access 'b' before initialization
3. let a =10;
4. const b=20;
5. console.log(a) //10
6. console.log(b) //20

The place in between line 1 and line 3 is said as a temporal dead zone of the variable a
The place in between line 2 and line 4 is said as a temporal dead zone of the variable b

Hoisting with a function expression and arrow functions

Hoisting with a function expression and arrow function happens based on the variable type it is assigned to,

If functions are assigned to var and if we try to access the function before declaration we get undefined
If functions are assigned to let and const and if we try to access the function before declaration we get an error and it will be in the Temporal dead zone.

Let's see with an example code.

//Function expression
console.log(printFirstName) //undefined
printFirstName() //TypeError : printFirstName is not a function
var printFirstName = function (){
console.log("Manikandan")
}
printFirstName() //Manikandan

//Arrow function
console.log(printLastName) //ReferenceError: Cannot access 'printLastName' before initialization
const printLastName= ()=>{
console.log("Subramaniam")
}
printLastName() //Subramaniam

Practice to be followed to avoid hoisting pitfalls

As we saw initially hoisting can cause some serious issues if not handled properly to avoid that,

Access variables only after their initialization
Call the function only after its declaration
If Both function and variable need to be accessed before then handle with caution

Conclusion

Summary

Hoisting is nothing but making some types of variables accessible/usable in the code before they are actually declared
Hoisting Summary table

	Hoisted	Initial value
function declarations	yes	actually function
var variables	yes	undefined
let and const variables	yes	TDZ (temporal dead zone)
function expression and arrow functions	Based on variables it assigned to var/let,const

Resourses

MDN Hoisting

Client-side Web Storage APIs

manismk — Tue, 31 May 2022 05:01:55 +0000

As a developer, we all know that making a request from the server for every data will take time, and also it will be costly. To overcome this web browsers provide an API to store the user-specific data in the browser. Let's see about the client side storage APIs provided by the browsers in this blog

What is Client-side Web Storage?

Clent-side Web storage is nothing but the storage provided by the web browsers to store the user data in browsers. Client-side web storage follows the same origin policy to store the user data.

What Is the same origin policy?

The same origin policy is a security mechanism for which the site should have the same Protocol, Host, and Port to obey these rules. Let's see some examples to understand the same origin policy.

Let's take https://example.com to understand the same origin policy

https://example.com/home.html - obeys the same origin policy since only the path changes.
http://example.com - Fails the same origin policy since the protocol changes
https://blog.example.com - Fails the same origin policy since the host changes
https://example.com:8080- Fails the same origin policy since the port changes

Client-side web storage types

There are two types of Client-side web storage. They are

Local Storage
Session Storage

Let's see the similarities and differences between them.

Local Storage and Session Storage

Local storage and session storage have some similarities like

Both are an object of the window object.
Both are used to store the data.
Both have the same type of methods to use.
Both are browser independent (i.e data stored in Chrome can't be accessed by firefox)
Both store the data in key-value pair.
Both persist the data on page refresh.

Local Storage vs Session storage

In Local Storage,

The data stored in local storage can be accessed on different tabs and even after closing the browser and reopening it.
The data will be persisted until the user clears the data.

In Session Storage,

The data stored in the session storage will be available only for a session. i.e The data is stored only till the tab/browser is closed
If more no of tabs are opened for the same site, the new session storage is created for each tab.

How to use?

Both Local and Session storage have the same four methods to handle data. Let's see the example for each

To use Local Storage,

//For setting the data: 
localStorage.setItem('name', ' Manikandan')

//For getting the data:
localStorage.getItem('name')

//For removing the data:
localStorage.removeItem('name')

//For clearing all the data
localStorage.clear()

To use Session Storage,

//For setting the data: 
sessionStorage.setItem('name', ' Manikandan')

//For getting the data:
sessionStorage.getItem('name')

//For removing the data:
sessionStorage.removeItem('name')

//For clearing all the data
sessionStorage.clear()

Points to be noted

While storing string

When you try to store objects in web storage API, You will get the output as follows

//For setting the data: 
localStorage.setItem('name',{firstName:"Manikandan",lastName:"Subramaniam"})

//For getting the data:
localStorage.getItem('name')
// The output will be 
[object Object]

This happens because web storage APIs can only store the strings so it tries to convert the object into a string and store it as [object Object]. So while storing the object you have to stringify the object and while reading you have to parse it back to the object. Let's see the example for it.

//For setting the data: 
localStorage.setItem('name',JSON.stringify({firstName:"Manikandan",lastName:"Subramaniam"}))

//For getting the data:
JSON.parse(localStorage.getItem('name'))
// The output will be 
{
    "firstName": "Manikandan",
    "lastName": "Subramaniam"
}

Behaviour in incognito/private mode

In incognito/private mode the local storage data will be persisted only till the incognito window is closed. Session storage behaves the same when the tab closes the data is no longer persisted.

Summary

We saw about Client-side web storage
Same origin policy.
Local storage and session storage.
How to use and points to be noted.

Resources

I hope that this blog helped you in understanding Client-side Web storage APIs. Please share your feedback.