DEV Community: Sarthak

This keyword in Javascript

Sarthak — Tue, 15 Jun 2021 09:32:50 +0000

The this keyword in javascript behaves a bit differently than other languages. That is why it confuses a lot of people. If you are one of them, then this post is a great start for you to know about it.

So what is this and what is its value?

This is a property of an execution context (global, function, or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.

In most cases, the value of this is determined by how a function is called(runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called.

Let’s now see what is the value of this in different contexts -

Global Context

In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.

Function Context

For Functions, the value of this is determined by how they are called.

For functions called directly without setting the value of this, this defaults to the global object, which in the browser is the window object.

However, in strict mode, the value of this is set to undefined if it is not set while entering an execution context.

Calling a function with a particular value of this

We can call a function with a specific this value using the call and apply method.

Call()
The call() method calls a function with a given this value and arguments provided individually.

Apply()
The call() method calls a function with a given this value and arguments provided as an array.

Bind()
The bind method creates a new function with the same body and scope as the function on which it is called, but this of the new function is permanently bound to the first argument of the bind method.

Arrow Functions

In arrow functions, the value of this is equal to the enclosing lexical context’s this value. So, In global code, it will be set to the global object.

Note: We cannot set this value of arrow functions even using call, apply and bind methods.

As an object method

When a function is called as a method of an object, its this is set to the object the method is called on.

I hope this post gives you a fair amount of idea about how this works in JavaScript.

Macrotasks and Microtasks in JavaScript

Sarthak — Mon, 14 Jun 2021 09:47:56 +0000

Do you get confused between why promises are executed first rather than setTimeout or setInterval? Or you messed up an interview because of this. Let's find out why this happens

First check your understanding of microtask and macrotask using an output question. So, What would be the output of this code snippet?

If you were able to answer this correctly, Congratulations! You have a good idea about event loop and, task queues. This post is not for you.

So let’s forget about microtasks and just look at this simple code snippet-

The output of code snippet would be -

Please notice that "Good Night" will be logged after at least 5 seconds. So what happens behind the scenes?

Step by Step:

Entire script is added to call stack.
console.log(“Good Morning”) is executed, and then logged on console.
setTimeout(() => ..) is executed and passed on to the web api.
console.log(“Good Afternoon”) is executed, and then logged on console.
The call stack is being checked: if it’s empty, the event loop pops and event from the callback queue (in our case the callback function) and push it to call stack.
console.log(“Good Night”) is executed, and then logged on console.

Since ES6 (JavaScript Standard) was released, it turned to be a big player for async executions in JS. It provided a different way of executing async code, adding a concept called "Microtask Queue" (also called "Job Queue"). We can now call the callback queue "Macrotask Queue", and assign a new layer on top of it.
At the end of every tick of the JavaScript Event Loop, the tasks inside the microtask queue are executed. This new functionality assures us that certain async actions will be added to the microtask queue, therefore executed right after the tick, before the next task in the macro queue.

Now let’s come to queueMicrotask. This function will explicitly put a task in microtask queue. This is what happens when a promise resolves. If you chain multiple then() statements, they will all be put in the microtask queue and are guaranteed to be executed before handling control back to browser’s event loop. So if you keep queuing tasks in the microtask queue forever, your browser will become unresponsive. You can’t click a button, can’t scroll, nothing…, GIFs stop, animations stop etc. The control will never be passed to browser renderer.

Now let’s try original question again.

The output of above code snippet would be -

Step by Step Explanation:

The entire script is added to the call stack.
console.log(1) is executed and then logged on the console.
setInterval(() => {..}, 0) is executed and passed on to the web API. The callback function would be added to the task queue after every 0 seconds.
settimeout(() => ..) is executed and passed on to the web API. The callback function would be added to the task queue after 0 seconds.
Promise.resolve().then(() => ..); is executed and since the promise is resolved directly, the callback would be pushed to job queue.
queueMicrotask(() => …) is executed and it also adds the callback to the job queue.
console.log(8) is executed and then logged on the console.
Now, the job queue is checked and all the pending tasks are pushed onto the call stack one by one.
() => console.log(5) is pushed onto stack and executed.
() => {
console.log(6);
queueMicrotask(() => ..);
} is executed logging 6 on console and adding another callback to job queue.
() => console.log(7) is pushed onto stack and executed.
Now since the job queue is empty, the task queue is checked again to see if any task is pending.
So () => { console.log('interval') } is pushed onto stack and executed.
queueMicrotask(() => ..) is executed adding callback function to job queue.
console.log(4); is pushed onto stack and executed.
() => {
console.log(2);
setTimeout( () => {
console.log(3);
clearInterval(interval);
}, 0);
} is executed logging 2 on console and adding another task to task queue.
() => { console.log('interval') } is pushed onto stack and executed.
() => {
console.log(3);
clearInterval(timer);
} is executed logging 3 on console and clearing the interval.

The important points are:

Tasks are taken from the Task Queue and is called macrotask.
Microtasks are processed when the current task ends and the microtask queue is cleared before the next macrotask cycle.
Microtasks can enqueue other microtasks. All are executed before the next task inline.
UI rendering is run after all microtasks execution.

Javascript Concurrency Model

Sarthak — Thu, 10 Dec 2020 15:27:31 +0000

Concurreny Model in Javascript

In this article we are going to find out how Javascript implements concurrency and what is event loop and much more...

So first of all what we all know about Javascrpit is that it is -

single-threaded which means 2 statements cannot be executed simultaneously,
non-blocking which means execution of some code should not stop the execution of program because its too slow making the browser unresponsive,
asynchronous which means that 2 or more tasks can be done simultaneously,
concurrent means multiple computations can happen at same time.

Since Javascript is single-threaded, then how does it execute statements asynchronously?

Example code:

    console.log("Hello");
    setTimeout( () => {
        console.log("Hello inside setTimeout");
    }, 1000);
    console.log("Bye");

After executing above statements, browser prints "Hello" and "Bye" first and then "Hello inside setTimeout".

To find out the answer we need to learn Event Loop first...

Event Loop Visualisation

Fig: Image src: freecodecamp.org

Heap: This is where memory allocation for all your variables take place.

Stack: This is where all the javascript code is pushed and gets executed line by line and is popped out after its execution. Javascript maintain the order of execution contexts using this stack only. It is also known as program stack or execution context stack.

Callback Queue: This is the place where all the asynchronous code goes. The callback functions from setTimeout, setInterval, HTML events and ajax requests are pushed into this queue when they are ready for execution.

Event Loop: The main function of event loop is to check the program stack and find if it is empty. If the stack is empty, then it checks the callback queue. If the callback queue is not empty then it pushes the code block from callback queue to main stack and executes it sequentially.

Now lets try to understand what is happening when the above program is getting executed.

The program execution starts. Since Javascript is single threaded only 1 line can be executed at a time.
So, First line of code is pushed onto stack.
The console.log is executed printing "Hello". So this line is now popped out of stack.
Now next line to be executed is setTimeout and it gets pushed onto stack. Now the javascript runtime can only execute single statement but the browser comes with a whole lot of other things which are web apis. This is when concurrency comes into picture. Now on the execution of setTimeout, a call to setTimeout api is made and the setTimeout is now popped of from stack.
The third statement is pushed onto stack and then executed. This prints "Bye" as output.
Now when the setTimeout api ( and all other apis ) are completed, the callback is pushed into callback queue simultaneously. These apis cannot interact directly with the stack.
Now is the time when event loop comes into picture. Event loops jobs is to monitor call stack and task queue. If the call stack is empty, it has to take the first thing from the callback queue and push it onto the stack. So now callback from the timeout is pushed onto the stack which then gets executed and prints "Hello inside setTimeout".

Exercise Time

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

The output of the above code snippet is -
1

timerStart

timerEnd

success

Brief Explanation of output

First of all console.log(1) is executed printing "1".
Then setTimeout is executed and anonymous function is pushed to Stack and executed.
Then console.log("timerStart") is executed printing "timerStart".
Then resolve() is executed thus resolving the promise and the anonymous function from line 66 - 68 is added to callback queue.
Then console.log(2) is executed.
Then console.log(4) is pushed to stack and executed.
Lastly, after the stack is empty the anonymous function from callback queue is pushed to stack and executed.

Some Important facts about event queue-

All the asynchronous code is always executed after the execution of main stack code.
That is the good part: Your current statements/functions in the stack will run to completion. Async code can not interrupt them. Once your async code is ready to execute, it will wait for main stack to be empty.

When will you utilize event loop?

When you need to do heavy computation which is not required sequentially. In such a case, you would not want to block the main thread.
When a certain piece of code is to be executed after all the other functions and statements are executed.