Event loop and queue

Satvik — Fri, 25 Jun 2021 04:59:18 +0000

JavaScript is a single threaded language so how does it handle processes that require multi threads?
LETS FIND OUT

Why do people say JS isn't a stand alone language?

The first thing that comes to our mind is JS needs an environment to run (node or browser), so we call it dependent language.

So basically JS is a single threaded language so how can it perform api or any processes that require another thread?

IT CAN'T

But when its run on browser or node environment, it takes help of something called event loop.

What is event loop?

Before we get into the understanding of event loop. It's ideal to understand how call stack works. (will make another blog on call stack or please refer to another blog on call stack).

Any process that is async goes into the call stack. It is directly thrown into the event loop and new call stack is formed to call the next process.

What happens in the event loop?

The event loop is something that is at core done by c++ and c to do the non-blocking I/O operations that couldn't be done with vanilla JS.

It would be easier to understand doing it with an example.

Let's take the most basic function of asynchronous call which is setTimeout().

Step 1:
setTimeout() first goes into the call stack.

Step 2: Since setTimeout is an async call it gets put in the event loop immediately.

Step 3: Now the call stack looks for the next process while the setTimeout() process is happening in the event loop. This is what they call async programming. Doing multiple tasks at the same time.

Once the process in the event loop is done. It goes to the event queue so that the call stack can pick it up once there are no more processes left for the call stack to read.

Once no more processes are left for the call stack, the event queue then pushes the call backs to the call stack so that the script can finally end.

ES6 Array Helper methods

Satvik — Fri, 11 Jun 2021 01:46:34 +0000

Array methods can be the most confusing thing one can think of in the language of JS. They are so useful that almost every framework is based on array methods, eg: REACT.JS.

Why are they so useful?

The main reason why they are used is the clean syntax they can provide while using it in a complex code.
We will be covering forEach, map, filter, find, findIndex, reduce.

I'll be giving an example with arrow function, plain function and also with for loop.

forEach

This is probably the first method you can think of when you hear the word array methods.

Suppose you want to print each element in a array, generally you would want to make a for loop from zero to length-1 and print right? But in case of forEach thats not how it works. Let's see some examples.

You might say this doesn't look so shabby but well imagine writing the same statement millions of times for iterating? It gets real boring lmaoo. Let's see an example using forEach.

Thats an example using plain function, let's see how it looks after changing it into arrow function.

Surprised? How small you can make your code?

Note: if you statement is more than one line you would want to use {}

map

If you have tried understanding what maps are previously you would question yourself what is the difference between a map and forEach method. But by base both map and forEach method are similar, they both iterate through every element in the array but the biggest difference is, maps return a brand new array while forEach doesn't. Lets look at some examples.

Why is it giving us undefined?

What is the definition of undefined? not defined? since the variable isn't initialized to something it's giving us undefined. By this we can conclude that forEach doesn't return anything to us

Let's look at maps

The same code I changed it to maps, look what the output is, we got an array since map returns an array.

AMAZING FACTS

When accessing the forEach and map method, there is actually a second parameter which is index, it not quite used but it's good to know

The screenshot can be confusing since I had to show both arrow function and also normal function, but observe how I was able to access the index value and print it. You can name it anything not only index

I think this should conclude the description about forEach and map. Let me remind you again, though forEach and map are similar, use the right one depending on the situation. forEach doesn't return a brand new array while map returns an array

Filter

Taking any framework in JS, you might see filter occurring as much as map or forEach.

Suppose you have an array and you only want a fresh array that has only the values that are 0 or over 0, how do we do that with the old school for loop? lets see.

Wanna be amazed by the filter method now?

Using arrow function or no is completely your choice, but I would say using arrow function would be better thanks to the clear syntax.
You can also do this filter methods on objects

Suppose you have an array of objects (books) and you only want the books that cost less than 10$, lets see how we can implement that.

Well seriously its that simple.

find & findIndex

Find and FindIndex can be very similar, also similar to how you would normally use them with primitive data types. Lets find out how it works with objects.

Suppose you have a array of books(objects), You want to find a book with particular id, how do we do that? You can do them iterating through the entire array and compare each object's id? Yepp thats about it, so lets see how we do that using array methods and for loop

So that how we do it using for loop, we iterate through the entire loop, when we find object we return it back. Same goes for findIndex as well

Let's see how we do it using array methods

Not you can't do something like Array.find(object)
since objects are compared with hash code and not how the structure and values look like.

With this I think we can wrap up the topic:) .
I hope you got a better understanding about this topic.

Let me know what other article you want me to write in the comments below. Peace.

DEV Community: Satvik