Event Loop, hoisting, rest vs spread operator, data types and Cross Browser Testing
Let’s explain Event Loop and in the end we will talk about data type,
What is meant by blocking? Blocking means which creates blockage what else more than that. Non-blocking means which don’t block anything.
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.
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).
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.
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)
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)).
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.
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 !!!
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.
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?
- 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.
- Different devices show the same UI differently in terms of size and others things.
- People with disabilities might use the final product may not use mouse usually or sometimes use keyboard only.
Workflows for cross-browser testing:
- 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.
In this step developer may take approach depending on the situation and develop the whole thing not at a once but part by part.
After each implementation developer needs to test it in the project’s defining area of context.
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.