Event Loop, hoisting, rest vs spread operator, data types and Cross Browser Testing

JavaScript is a single-threaded, non-blocking, asynchronous, concurrent language. So, what? What I have to do with all this terms?

Let’s explain Event Loop and in the end we will talk about data type,

Single Threaded:

Think of a restaurant which name is JavaScript. Assume that you sit in a table waiting for the waiter to take order from you. After sometime waiter takes order from you and goes to the kitchen told the chef to server your order. And the waiter goes to another table and take the order from customer.

This waiter is performing the task of taking order from customer. If there is only one waiter in this hotel then in the context of JavaScript it’s called single-threaded because one thread or waiter is performing the task of taking order. If there is many waiter or thread than it’s called multi-threaded. But JavaScript use one single thread to perform all tasks.

Concurrent:

It means one thing at a time not more than one. So, in JavaScript hotel if many customers are waiting for food one thread is used to take orders than the term ‘Concurrent’ tells that this thread or waiter takes one order at a time from customer not more than one. Which means single thread is used to perform only any one task like executing function or other thing at a time not to many execution.

Non-blocking:

What is meant by blocking? Blocking means which creates blockage what else more than that. Non-blocking means which don’t block anything.

Our journey in JavaScript hotel continued…

Scenario 1:

If you follow along to this point you will notice a problem with waiter (single thread) in the hotel. If the waiter takes order from you as a customer then go to kitchen to tell the chef for preparing the order for you. And the waiter waits until your food is ready to serve. And he waits and waits and waits.

If this is the scenario then other customer might never come to the hotel because waiter to too busy with my order to perform so that other customers who are waiting for giving order are neglected.

Scenario 2:

But this is not happening in our real life. A waiter doesn’t wait for prepared food in the kitchen rather he tells the chef to ready the food for serving and by this time he collects another orders. These orders get queued one after another and when food and all orders are taken form customer waiter serves the order. And further collect the order.

From the behavior of the waiter, we can say that he doesn’t block the execution of taking order while other task is processing behind. This waiter or single-thread executes every task which performs synchronously like serving ready-made food and put the task behind callback queue like preparing new food in the kitchen which is basically a asynchronous task. This nature of execution is called non-blocking.

Synchronous vs Asynchronous:

Synchronous means sequential execution of code. Synchronous code waits for the previous statement to be executed (Scenario 1 from above). Asynchronous means code execution of further statement don’t get stopped for the execution of previous statement (Scenario 2 from above).

Call Stack:

If you familiar with the Stack data structure you are already boss. But if you are not this photo is for you.

In this photo, if you put E on top of D and the left stack is formed(this is push operation to something on stack). When we want to remove something from stack that is called pop operation. In the right side stack we remove E.

Again we need to get back to our JavaScript hotel.

Scenario 3:

Now, again think of a waiter standing in front of you with a nodepad in his hand in hotel. You say two biriyanis (asynchronous call because waiter can’t serve this immediately). Waiter enlists 2 biriyanis in his nodepad. Then go to kitchen inform the chef for preparing 2 biriyanis and doesn’t wait in the kitchen and also don’t strike through the order in the nodepad(Relate this with a get request from server or setTimeout function)

Scenario 4:

Waiter goes to another customer and the waiter is asked for serving a burger(which is already ready made). Waiter enlists the order in his nodepad. Then, immediately server this customer with a burger from displayed ready-made food(synchronous call). Finally strike through the order when it is served.(Relate this with console.log(2)).

Listing of order from customer in the nodepad is like enlisting the a task to be performed in the call stack in JavaScript.

Event Loop:

If it is synchronous call, it push the task into the stack and performs it. Finally pop the task from the stack. If it is asynchronous call, it push this into the task. The task transferred to Web apis and pop the task from stack. The task execution completed in web api and go to the call back queue and waits their until stack is clear. When all synchronous call are executed and stack is cleared then callback queues are push on the stack and executed their. Execution of this asynchronous callbacks is event loop.

Example:

Look at this animation…

This animation executes the following code.

console.log( ) is synchronous call (like Scenario 3 from above) and setTimeout is asynchronous call (like Scenario 4 from above).

First, console.log(‘Hi’) is pushed ot the stack the executes ‘Hi’ on the console and popped from the stack. Then setTimeout is pushed to the stack and transferred it’s action to be completed in the web api. And setTimeout is popped form stack. console.log(‘Bye’) is pushed ot the stack the executes ‘Bye’ on the console and popped from the stack.

But behind the scene, when the task of setTimeout in the web api is completed, it is transferred to the callback queue and waits for the call stack to be cleared. When all synchronous tasks are done then callback queue tasks are pushed to the task. In our case console.log(‘cb1’) is push to the stack and ‘cb1’ is printed on the console and console.log(‘cb1’) is popped from the stack.

But finally alfter all this nonsense you get your 2 biriyanis are served on the table. One biriyani is for you. But other ??? who knows !!!

Data types:

There are two types of data in JavaScript. One is primitive type and one is reference type.

Primitive types are undefined, null, booleans, numbers, strings, symbols, BigInts. Reference types are object, array and function.

When we assign a value to a variable of primitive type, we can access it by it’s value itself. When we assign a value to a variable of reference type, we can access it by it’s reference.

Hoisting:

During parsing the JavaScript document before execution of code variable and function declarations bring upto the top. It is known as hoisting.

name variable is executed in the else block and outside if-else block because of hoisting. And under the hood code actually look like this.

Take a close look. name declaration is hoisted only not it’s value. That’s why name is ‘Amir’ in the if block and undefined in the else and outside if-else block.

Rest vs Spread Operator:

Rest operator collects all data that needs to be iterated as an array and spread operator spreads all data in a place where more than one arguments are needed.

Example of Spread Operator:

Example of Rest Operator:

Cross Browser Testing:

Why it is important?

1. Different browsers have different technological features of displaying things differently. A user may use any browser he/she want in the context of popular browsers.
2. Different devices show the same UI differently in terms of size and others things.
3. People with disabilities might use the final product may not use mouse usually or sometimes use keyboard only.

Workflows for cross-browser testing:

1. Intial planning:

Before starting the development process developer needs to be cleared about the features websites have, functionality, project deadline, amount to be paid and so on.

2. Development:

In this step developer may take approach depending on the situation and develop the whole thing not at a once but part by part.

3. Testing:

After each implementation developer needs to test it in the project’s defining area of context.

4. Fixes/Iteration:

If a bug is found on testing phase developer needs to fix the code and execute the iteration of same code.

In a summary, After initial planning last 3 steps needs to be repeatedly done for bringing the best output.