DEV Community: Aayush Jain

What is Function Statement/Declarations in JavaScript?

Aayush Jain — Sat, 12 Feb 2022 14:07:04 +0000

Saved for later use = Declared function

A declared function is “saved for later use”, and will be executed later, when it is invoked (called).

What is a Function Expression?

A JavaScript function can also be defined using an expression.

A function expression can be stored in a variable:
var x = function (a, b) {return a * b};

After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

Function Expression VS. Function Statement

Example: Function Expression
alert(foo()); // ERROR! foo wasn't loaded yet var foo = function() { return 5; }

Function declarations load before any code is executed while Function expressions load only when the interpreter reaches that line of code.

Example: Function Declaration
alert(foo()); // Alerts 5. Declarations are loaded before any code can run. function foo() { return 5; }

Similar to the var statement, function declarations are hoisted to the top of other code.

Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context.

getName(); // Namaste JavaScript console.log(x); // undefined console.log(getName); // f getName(){ console.log("Namaste JavaScript); } function getName(){ console.log("Namaste JavaScript"); }
Function expressions aren’t hoisted, which allows them to retain a copy of the local variables from the scope where they were defined.

getName(); // Uncaught TypeError: getName is not a function console.log(getName); var getName = function () { console.log("Namaste JavaScript"); }
// The code won't execute as the first line itself throws an TypeError.

Benefits of Function Expressions

There are several different ways that function expressions become more useful than function declarations.

As closures - Function bundled along with it's lexical scope is closure.
As arguments to other functions
As Immediately Invoked Function Expressions (IIFE)

What is the Temporal dead zone?

Aayush Jain — Mon, 10 Jan 2022 05:54:44 +0000

In case of let and const variables, Basically, Temporal Dead Zone is a zone "before your variable is declared",
i.e where you can not access the value of these variables, it will throw an error.

ex.

let sum = a + 5;        //---------
//some other code       //         | ------>  this is TDZ for variable a
                        //         |
console.log(sum)        //---------
let a = 5;

above code gives an error

the same code will not give an error when we use var for variable 'a',

ex.

var sum = a;                            
console.log(sum)     //prints undefined
var a = 5;

let and const have two broad differences from var:

1.They are block scoped.
2.Accessing a var before it is declared has the result undefined; accessing a let or const before it is declared throws ReferenceError:

console.log(aVar); // undefined
console.log(aLet); // Causes ReferenceError: Cannot access 'aLet' before initialization

var aVar = 1;
let aLet = 2;

It appears from these examples that let declarations (and const, which works the same way) may not be hoisted, since aLet does not appear to exist before it is assigned a value.

That is not the case, however—let and const are hoisted (like var, class and function), but there is a period between entering scope and being declared where they cannot be accessed. This period is the temporal dead zone (TDZ).

To Summarize

Hoisting:
let,const,var are all get hoisted process.
(whats mean they go upper and declare in the top of the scope.)

hoisting process: var, let, const
Initialisation process: var

Thanks, and see you next time!

What is a Promise in JavaScript ?

Aayush Jain — Fri, 17 Sep 2021 09:10:19 +0000

What is a Promise?

*(in JavaScript)

A promise is an article that may 🌌 produce a solitary worth at some point 🕠 later on 📅 with either a settled 💯value or a cause 💬 that it's not 😐 resolved.*

How Promises Work

𝐈𝐭 𝐰𝐢𝐥𝐥 👏 𝐛𝐞 𝗳𝗮𝗹𝗹𝗶𝗻𝗴 𝗨𝗻𝗱𝗲𝗿 𝐨𝐧𝐞 ☝️ 𝐨𝐟 𝐭𝐡𝐞 𝟑 𝐩𝐨𝐬𝐬𝐢𝐛𝐥𝐞 𝐬𝐭𝐚𝐭𝐞𝐬:

👉𝐏𝐞𝐧𝐝𝐢𝐧𝐠: This is an initial stage of the Promise 🤞 previously 🤔 an operation 💁 starts.

👉𝐅𝐮𝐥𝐟𝐢𝐥𝐥𝐞𝐝: This state demonstrates that 🔀 the specified operation was finished. ✅

👉𝐑𝐞𝐣𝐞𝐜𝐭𝐞𝐝: 🚫 This state 🇺🇸 demonstrates that 👉 the operation 💁 didn't finish. In 😩 this case, a blunder 🚫 esteem 👇 will be thrown🙀.

𝐖𝐡𝐲 🤔𝐝𝐨 𝐲𝐨𝐮 𝐧𝐞𝐞𝐝 😬 𝐚 𝐩𝐫𝐨𝐦𝐢𝐬𝐞?

Promises are utilized 🚟 to deal with nonconcurrent activities.

They give 👋 an another way to deal with callbacks by lessening ⏬ the callback hell and composing the cleaner code💻.

𝐖𝐡𝐚𝐭 🙌 𝐚𝐫𝐞 𝐭𝐡𝐞 𝐦𝐚𝐢𝐧 𝐫𝐮𝐥𝐞𝐬 𝐨𝐟 𝐩𝐫𝐨𝐦𝐢𝐬𝐞?

🤞 A promise is an item that 🍜 supplies a standard-consistent .then() method

🤞A forthcoming promise might change into 🤓 either satisfied or dismissed by the state.

🤞A satisfied or dismissed 🚫 promise 🤞 is settled and it should not ⚙️ change into 👉 any 🕺 other state.

👆Once a promise 🤞 is settled, the worth 💵 should not ✖️ change.

Promise Chaining

Since .then() consistently returns another promise, it's feasible to chain promises with exact power over how and where blunders are taken care of. Promises permit you to imitate typical simultaneous code's attempt/get conduct.

What is the contrast among Callbacks and Promises?

A callback function is a function passed into 🚟👉 one more function as a contention.

This capacity is conjured inside 💠 the external function to finish an activity. 🎬

The principle Difference between Callback-functions and Promises is that we Attach a Callback-function to a Promise instead of passing it.

So we actually use callback functions with Promises, yet in an unexpected way (chaining).

Hope you found it useful...

Scopes and Hoisting in JavaScript

Aayush Jain — Thu, 16 Sep 2021 12:26:44 +0000

The scope manages the accessibility of variables.

The Scope decides how far the JavaScript will go to look 🧐 for a variable. In the event that it's doesn't exist in the current extension, 🤪 it'll look 👀 in the external Scope .

Scope in JavaScript is the area where we have 😒 Correct ✅ access to a variable / function.

kinds of scopes in JavaScript —

𝐁𝐥𝐨𝐜𝐤 𝐒𝐜𝐨𝐩𝐞{...} :- 💯

Block scoped variables are only accessible inside a block brackets. Which can be, inside an if block({....}), function-block, loop(for,while...), or an seperately defined block. Anything in between by curly braces is a block.

A code block in JavaScript defines a scope for variable declare using let / const as-

if (true) { // "if" block scope const message = 'Aayu'; console.log(message); // 'Aayu' } console.log(message); // throws ReferenceError

Standalone code blocks. The standalone code blocks also creates a scope:

{ // block scope Let message = 'Aayush'; console.log(message); // 'Aayush' } console.log(message); // throws ReferenceError

Note: var is not block scoped

𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐬𝐜𝐨𝐩𝐞 𝐟(){.....}, 💥

Variables Scoped inside a function are only available inside a function.

function walk() { // "Walk" function scope var message = 'Walk, fast, walk!'; console.log(message); // 'Walk, fast, walk!' } Walk(); console.log(message); // throws Reference Error

𝐆𝐥𝐨𝐛𝐚𝐥 𝐬𝐜𝐨𝐩𝐞 |......| :-

The Variables / functions Which have global scope can be accessed everywhere in the Code-Block or module file.

A variable announced inside the worldwide extension is named worldwide variable. Worldwide factors are available from any extension.

Lexical scope

A lexical scope Contains outer scopes declared constantly.
Let’s define 2 functions, having the function inner() is nested inside outer().

function outer() { // the outer scope let outerVar = 'I am from outside!'; function inner() { // the inner scope console.log(outerVar); // 'I am from outside!' } return inner; } const inner = outer(); inner();