DEV Community: Sanket Jadhav

Prototype & prototype inheritance

Sanket Jadhav — Sat, 24 Sep 2022 18:24:36 +0000

demo post

JavaScript Closures

Sanket Jadhav — Sat, 24 Sep 2022 18:22:21 +0000

What is closure?

A closure is a function that accesses the scope of its outer function even after the outer function returns. This means that a closure can remember and access its outer function's variables and arguments even after the function has finished.closure is a function that references variables in its outer scope from its inner scope. The closure keeps the outer scope inside its inner scope.

example-

function OuterFunction() {

var extern variable = 100;

function InnerFunction() {
    alert(externalVariable);
}

return InnerFunction;

}
var innerFunc = OuterFunction();

innerFunc();

In the example above, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). The innerFunc variable only refers to InnerFunction(), not OuterFunction(). as the call innerFunc() it can still access the externalVariable that is declared in OuterFunction(). This is called closure.
One important property of closures is that external variables can retain their state between multiple calls. Remember that the inner function does not keep a separate copy of the outer variables, but refers to the outer variables, that is, the value of the outer variables will change if you change it using the inner function.

What is lexical scope?

Lexical scope in JavaScript refers to the availability of variables, functions, and objects based on their physical location in the source code. Lexical scope defines the scope of a variable according to the position of the variable declared in the source code.
In this example:

let name = 'John';

function greeting() {
let message = 'Hi';
console.log(message + ' '+ name);
}

The variable name is a global variable. It is accessible from anywhere, including the greeting() function.
The message variable is a local variable that is only accessible within the greeting() function.
If we access the message variable outside the greeting() function, you will get an error.

So the Js engine uses a scope to manage variable accessibility.

According to the lexical scope, scopes can be nested and an inner function can access variables declared in its outer scope.
example-

function greeting()
{
let message = 'Hi';

function sayHi() {
    console.log(message);
}

sayHi();

}

greeting();

The greeting() function makes a local variable named message and a function named sayHi().

SayHi() is an internal function that is only available in the body of the greeting() function.

The sayHi() function can access external function variables, such as the message variable of the hello() function.

Inside the greet() function, we call the sayHi() function to display the Hello message.

Take a look at this code snippet:

function person() {
let name = 'Peter';

return function displayName() {
console.log(name);
};
}
let peter = person();
Peter(); // prints 'Peter'
When the person function is invoked, the JavaScript engine creates a new execution context and lexical environment for the function. After this function is finished, it returns the displayName function and assigns it to the peter variable.
the lexical environment will look like this:

personLexicalEnvironment = {
EnvironmentRecord: {
name: 'Peter',
displayName:
}
external:
}
When a person's function completes, its execution context is removed from the stack. But its lexical environment is still in memory because its lexical environment is referenced by the lexical environment of its internal displayName function. So its variables are still available in memory.

Please note that when a personLexicalEnvironment is created, the JavaScript engine attaches the personLexicalEnvironment to all function definitions in that lexical environment. So that later, if any of the internal functions are called, the JavaScript engine can set the external lexical environment to the lexical environment attached to that function definition.

When the peter function (which is actually a reference to the displayName function) is executed, the Js engine makes a new execution context and lexical environment for that function.

The lexical environment will be-

displayNameLexicalEnvironment = {
EnvironmentRecord: {

}
outer:
}
Since there is no variable in the displayName function, its environment record will be empty. During the execution of this function, the JavaScript engine tries to find the variable name in the lexical environment of the function.

Since there are no variables in the lexical environment of the displayName function, it looks in the external lexical environment, i.e. the lexical environment of the person function, which is still in memory. The JavaScript engine finds the variable and prints its name to the console.

Call Stack in JavaScript

Sanket Jadhav — Sat, 24 Sep 2022 18:19:26 +0000

What is a call stack ?
A call stack is a mechanism for an interpreter (such as a JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions - which function is currently running and which functions are being called from that function, etc. — MDN Web Docs

The call stack keeps record of the all functions to be executed. When a function is called , it is added on to top of the call stack. When the function returns, it is removed or removed from the call stack. Any asynchronous functions (fetch, setTimeout, async, etc.) are moved to the event queue (more on that later).

How does the call stack work?
As JavaScript is single-threaded. This means that it has only one call stack and can only handle one command at a time. The call stack follows the LIFO (Last In, First Out) principle, which means that it always processes the call at the top of the stack first.

When a function is called, it is added to the stack. When a function calls another function, it is added to the calling function.

Callback queue

When the browser is done with the timer (or any other API which it provides for JS), it doesn't transfer the codes to be executed back to Javascript immediately. When the browser finishes, it adds the code in a callback queue. As the name implies, it is a queue containing some functions or codes which would be called back at a later time.

The callback which was passed as an argument to setTimeout is written in JavaScript. So the JavaScript interpreter needs to run the code, which means it needs to use the call stack, which again means we have to wait for the call stack to be empty to make the callback.

The setTimeout call triggers the Web API execution, which adds the callback to the callback queue. The event loop then takes the callbacks from the queue and adds them to the stack once it's empty.
Event Loop: This is followed by an Event Loop which runs continuously and checks the main stack if it has any frames to execute, if not it checks the callback queue, if the callback queue has codes to execute then it pushes the message from it to the main stack for execution .

Job Queue: In addition to the Callback Queue, browsers have introduced one more queue, which is the "Job Queue", reserved only for the new Promise() function. So when you use promises in your code, you add a .then() method, which is a callback method.