Forem: dev-ashishsethi

Hoisting and Temporal Dead Zone (TDZ) in JavaScript?

dev-ashishsethi — Thu, 12 May 2022 09:30:16 +0000

Hoisting and Temporal dead zone can be difficult to understand in the first try. I will try to make you understand in one of the simplest ways possible please be with me till the end.

First to understand hoisting we will have to understand how does a JS program runs.

A JS program runs in 2 phases:

Memory allocation phase
Code execution phase

Memory Allocation Phase

In a JS program all the variables are allocated only memory not their values and all the functions are allocated with their body.

Code Execution Phase

After memory allocation code execution is done. Code execution is done line by line

Hoisting

Meaning of hoisting in English dictionary: raise or haul up.

Hoisting in JS is also done in same way. When a variable or function is called before it is defined, this is known as hoisting.

Hoisting in case of let and const variables is different from hoisting with var variables

When a var variable is hoisted it gives undefined but when a let or const variable is hoisted it gives ReferenceError

code Example:
In case of var

console.log(bestFood); // returns undefined because bestFood’s TDZ does not exist here var bestFood = "Vegetable Fried Rice"; // bestFood’s TDZ does not exist here console.log(bestFood);

In case of let and const

console.log(bestFood); // returns ReferenceError because bestFood’s TDZ let bestFood = "Vegetable Fried Rice";

This happens because when memory allocation of var variable is done it allocates a placeholder "undefined" but in case of let and const no such thing happens

Temporal Dead Zone or TDZ occurs when a variable is not initialized and you attempt to access a variable before its complete initialization, then it gives a ReferenceError

TDZ ends when you initialize that variable

Functions can also be hoisted.

code example:

catName("Tiger"); function catName(name) { console.log("My cat's name is " + name); }

output: My cat's name is Tiger

As you already know that when functions are hoisted then whole body of function is copied in memory allocation phase. So, In case function hoisting it does not give any error.

Nullish coalescing operator (??) & Optional chaining operator (?.)

dev-ashishsethi — Wed, 11 May 2022 18:14:11 +0000

As a beginner when writing your JS code you may thought about how to handle null or undefined values especially if it is in a condition. Here Nullish coalescing comes into play.

Nullish coalescing operator (??)

Nullish coalescing operator (??) is a logical operator just like the OR(||) operator. If operation on left hand side returns null or undefined then right hand side operation is executed. If left hand side operation is not null or undefined then only left hand side operation is performed.

Code example:
example 1:

const testVariable= null ?? 'default string'; console.log(testVariable); // output: "default string"

example 2:
const testVariable2= 0 ?? 42; console.log(testVariable2); // output: 0

This operator cannot be used with OR or AND operator, if you use it then you will get a syntax error.

If you still want to use OR and AND operator with nullish coalescing operator then use parentheses around OR or AND operator

example:
(null || undefined) ?? "hello world!";

Optional chaining operator(?.)

When there are chances that the value of an object can be null or undefined then this operator is used.

code example:

let obj = { prop: "hi" }; console.log(obj.prop?.toUpperCase());

Promises in JS and its functions

dev-ashishsethi — Wed, 11 May 2022 07:34:57 +0000

While learning JavaScript everyone comes across this topic of "Promises", as a beginner it can be difficult to understand promises
I will try my best to make you understand about promises, just stay with me on this journey till the end.

Promises in JS are just like promises in real life, for example if some one has promised you something that they will perform some action upon your request then there is some probability that they will perform that and there is some probability that they will not perform that action.

Promises in JS are also similar. They have 3 states:

Pending
Rejected
Resolved a.k.a Fulfilled

Now, let's understand about these 3 states:

Pending: It is initial state of the promise when you don't know whether an action will be done or not 🤔.
Rejected: It is state after pending when it confirmed that the action is not performed or cannot be performed 🙁.
Resolved: It is state after pending when it confirmed that the action is performed 😎.

Promises are performed asynchronously but JS is a synchronous language, if didn't know about it before I would suggest you to read about this (Read about: Call stack, Web APIs, event loop, microtask queue).

Promise Chaining
Promise chaining is a way of executing two or more aysnc tasks which are related to previous output received

Code Example:

fetch(myRequest) .then((response) => { if (!response.ok) { throw new Error(HTTP error! Status: ${ response.status }); } return response.blob(); }) .then((response) => { myImage.src = URL.createObjectURL(response); })

In the above example you can see there are 2 then() method being used here the last then() is working on previous then() response

There are a few methods by which you can perform some actions from any output. Some of the methods are:

then()
catch()
finally()
all()
allsettled()
any()
race()
reject()
resolve()

then(): This method is used in promise chaining. It takes 2 callbacks as arguments first is for resolve and second one is for reject. If immediate action on rejection is not needed then we can omit second callback and instead of second callback catch() can be used.
catch(): This method is for handling rejections occurred in a promise. It is similar to then() but the only difference is that it does not accept any callback for resolve. It only accepts callback for rejection
finally(): This method works when a promise is rejected or resolved. For this method it does not matter whether a promise is rejected or resolved this will run when a promise is settled( a state when a promise is rejected or resolved )
all(): This method works on any iterable of promises(for example an array). It method resolves when all of the promises given are resolved. It rejects when any of the promises is rejected. In case of rejection it will give error related to the first promise that got rejected and will not check further.
allsettled(): This method also works on iterable promises. this method waits for all the promises for being resolved or rejected, it checks every promise for the same. It is appropriate to use when all of the promises in the iterable is independent of each other but if there are dependent on each other all() method would be appropriate.
any(): This method also works on iterable promises. It returns a single promise that resolves as soon as any of the promises is resolved. if no promises is resolved then AggregateError(group of errors) is thrown
race(): This method also works on iterable promises. It returns a promise as soon as a any of the promise is rejected or resolved whereas any() would check all the promises for rejection.
reject(): It returns a new promise that is rejected with a given reason
resolve(): It returns a promise that is resolved with a given value

How to use Margin in CSS?

dev-ashishsethi — Fri, 03 Dec 2021 08:41:21 +0000

According to box model in CSS margin is the outer most edge of any element, it can be set on all the four sides of the element. It can be written in shorthand or assigning different values to individual margin properties for example, margin-top:10px, margin-right:20px, margin-left:2px, margin-bottom:8px.

Writing margin in shorthand

For writing margin in shorthand there are some things to learn first, let me tell what those are.

In shorthand you can specify only one value or two values or three values or four values.

One Value

example-> margin: 2rem;
It applies same measurement(2rem here) to all the four sides.

Two Values

example-> margin: 2rem 4rem
First value gets applied to top and bottom and second value gets
applied to left and right of element.

Three Values

example-> margin: 2rem 4rem 1rem;
First value applies to top, second value applies to right and
left and third value applies to bottom.

Four Values

example-> margin: 2rem 4rem 3rem 1rem;
First value gets assigned to top, second values is assigned to
right, third values gets assigned to bottom and fourth value gets
assigned to left.

What is CSS box model?

dev-ashishsethi — Fri, 03 Dec 2021 06:10:30 +0000

Each element in a document is represented by a rectangular box. Its has four parts:-

Content Area
Padding Area
Border Area
Margin Area

Content Area

Represented by content edge(blue colored area). It is the area that is actually taken by the content for example any text or image or any video. Its has its width and height.

Padding Area

Represented by padding edge(green colored area). It is actually the space between content's area and border. Using shorthand padding property of CSS or padding-top, padding-right, padding-bottom, padding-left of CSS its width and height can be set.

Border Area

Represented by border edge(yellow colored area). After Padding area border area is present is holds border of the element, if any. border-width property of CSS can determine thickness of border

Margin Area

Represented by margin edge(dark orange colored area). The outer most area of any element is margin area, as you may know margin can be used to keep distance between two different elements. Its sizing can be done using margin property for shorthand or margin-top, margin-right, margin-bottom, margin-left CSS properties