DEV Community: Musfiqua haque

Asynchronous Behaviour In JavaScript

Musfiqua haque — Sun, 03 Mar 2024 19:33:06 +0000

Hello everyone!
Today I am describing the synchronous and asynchronous behavior of javascript. We all know about it but I want to discuss here the asynchronous behavior of javascript and JavaScript blocking behavior in the browser.
Before knowing about that we need to know how Javascript code works line by line in the browser.
Let's take 2 things that every developer needs to run the code.

Code Editor
Browser

In the browser, there is a mechanism that converts the javascript code to machine language. In that case, browser contains two things. One is the Runtime environment another is the browser's engine. This runtime environment indicates some objects.
For example window.alert(), console.log(), document.getElementById() and so on. These things are called runtime environments. And the engine that is responsible for converting the human-written code to machine language so that the machine can understand what to do.
In the browser engine, there are two things one is call stack.
let's talk about how call stack works in the code line by line.In the editor our code is

I wrote a simple code where there is a function and some console log and I added a while loop that functionality works after 5 second later. What happened there?
In the call Stack that I mentioned before it first calls a main function. You know every javascript starts from a main function.After that line by line, it called.
JavaScript starts from here console.log("process 1");
so in the stack after calling the main function it calls

process 1

so process 1 is executed.
After that, it called process() ** function.
When javascript goes to the **process function it finds another function which is console.log("process 2");.Then it calls

process 2

After the next line, javascript sees that there is a while loop which is for 5 second .In that time, javascript stops all the browser's activity for 5 second. Even users can not do anything in the browser. This is the JavaScript blocking behavior. After 5 second while the loop is finished, the next line is stored in the call stack console.log("process 3 after 2 sec");
and then printed in the browser.

process 3 after 2 sec

After that the last line is execute console.log("process completed"); and print

process completed

In this code, the problem is this while loop that prevents the activity of the browser for a predefined second. To remove this problem we use asynchronous javascript.

Now see the above code. Everything is the same here I just added the setTimeOut function instead of a while loop. For debugging purposes, I write to console something so that we can understand the execution.
Everything is the same as I described before. Firstly, in the call stack main function is called then the first console log is printed after that process function is called. and it prints the second console log but in the next line, it appears the setTimeOut function, and take it in the call stack but now the interesting thing is there. In previous, when javascript found the while loop it stopped the browser's activity and did not go forward. but now it doesn't do that because setTimeOut is a built-in asynchronous function. In that time javascript passes this function to web API which can handle this function's execution. web API is a part of the runtime environment. javascript just goes forward and passes this setTimeOut function to web API. It executes the next line console.log("process 3"); and prints

process 3
The timer that I set in the function is going on inside the web API. After that last console log goes into the call stack and print

process completed

Now another thing is coming which is callback queue also a part of the runtime environment. Previously we know about the call stack that works like ** Last In First Come*. Now this callback queue works as a queue like **First In First Come.
So callback means that called after some time. here the function that we set in the **setTimeOut* function is a callback function because it will call after the end of the period.
So, when the setTimeOut function calls it after 5 second, the function is stored in the callback queue.Then it goes to another line and execute the console.log("process completed) and print

Process completed

However, now the function that I write inside the setTimeOut function is stored from callback queue to call stack.This time browser is not block for doing the particular work rather it works and execute the another line. Now from the call stack the last code is executed console.log("process called after 5 sec") and print

Process called after 5 sec

So, this is the process about synchronous and asynchronous JavaScript.
In conclusion, asynchronous JavaScript helps us to work without blocking the browser.Here I just write something inside the setTimeOut function but it could be data fetching,a large file read or to bring some data from the largest database. That time it need more time to bring this data. Asynchronous JavaScript help us to do this work using web API and go forward to execute the the code with blocking the browser.

That's all for today.Thanks for your patience to stay with me. Please comments below if you like it.

"HOC" The Design Pattern

Musfiqua haque — Mon, 27 Nov 2023 17:13:21 +0000

Hello friends, today I am here to share another topic which name is Higher-Order-Component. In short, we name it HOC.
HOC is nothing but all about the design pattern and how you organize your components so that they can used multiple times. This reduces the amount of writing code and creates a smooth data flow from parent to child.

HOC is quite an advanced topic but we need to follow this pattern in our regular react code.

Here inside the src file, I take a folder named HOC for our understanding purpose. Inside the HOC folder, we take 2 files: Counter.jsx and Hover.jsx.

let's create a class component in Counter.jsx. Add a button named "Click X times".

`import React, { Component } from 'react'

export default class Counter extends Component {

state = {
    count: 0,
};
handleClick =()=>{
    this.setState((prevState)=>({count:prevState.count + 1}))
}

`
As it is a class component we take the state and initialize a value count = 0. To activate the button I called a function that is handleClick inside the button.

the handleClick button is declared with an arrow function and inside the function, we take the previous value named prevState as an anonymous function. To increment the count value we need the previous count value and add 1 with every increment.
After that pass the count state inside the button using curly brackets.

Another component we designed is Hover.jsx and the functionality is as same as the counter.jsx component.

`import React, { Component } from 'react'

export default class Counter extends Component {

state = {
    count: 0,
};
handleClick =()=>{
    this.setState((prevState)=>({count:prevState.count + 1}))
}

`
These two component works when we over the mouse in the text and click on the button.

you can find the output in the picture above.
Up to this, all is working well but what happens if you have to design 10 or 20 components using the same functionality?
What happens if you need to change the state or add some interactivity inside the function?

It breaks down the react rules so that you can't write the same code again and again rather you can use the same code multiple times.

So from this concept react introduced the HOC pattern. This pattern creates a function that passes the original component as a parameter and returns a new component.

You can think like that by wearing a new dress you are becoming a pretty person.
const LookingPretty = HigherOrderComponent(MeWithNewDress);

Let's move on to using code. As we see in both components the functionality is the same. So we take another component named WithHoc.jsx. It's the naming convention that you start your component using (with).

const WithHoc(originalComponent){ return <NewComponent />
}
From this, we can see that WithHoc is just a function that takes a component as a parameter.

const WithHoc=(OriginalComponent)=>{ class NewComponent extends React. Component{ state = { count: 0, }; handleClick =()=>{ this.setState((prevState)=>({count:prevState.count + 1})) } render() { const {count} = this.state; return <OriginalComponent count={count} handleClick={this.handleClick} /> } }; return NewComponent; } export default WithHoc;

WithHoc function just takes an original component as a prop and inside the component, it puts its state and handleClick function.
As the original component, we use a class component so it renders a method and returns the original component. The returned component passes the state and the function using the props and sends to hover and counter components.
and this OriginalComponent with pros (state value, function) is returned as a NewComponent of the WithHoc function.

That's all about today. I just want to share the knowledge that I have so far and I gained my knowledge from the most efficient channel (LWS) which is conducted by Sumit Saha, sir. You can also follow this, he is an outstanding person and out of this world who continuously shares his knowledge in the Dev community. If you people take it as a beneficial thing and read the article then take my warm welcome.

All About JavaScript Scope

Musfiqua haque — Thu, 23 Nov 2023 09:07:29 +0000

Hi there. It is easier to share knowledge than to learn anything from resources. I will therefore be sharing my knowledge on scope today, a crucial JavaScript topic.
Now let's proceed.

Scope dictates the level of visibility and accessibility. Because programming languages specify which parts of a variable can be accessed, that is how it works..

Basically 3 scope we have but sometimes learners faces an contradictory situation in between them.

Block Scope
Function Scope
Global Scope

We can infer from the term "Block Scope" that access is restricted to a specific portion.Following the introduction of ES6, function scope and global scope are added to the block scope.
In ES6, the terms "let" and "const" are introduced to help us grasp the block scope.

Let's have a look.

{
let language = "JavaScript";
}

{
var language = "JavaScript";
}

Do you notice a difference? Indeed, there are differences in the variable types; one uses let, while the other uses var.
Since no one has the authority to call the let outside of the {} block, let is our block scope here rather than the var type.

And var can be access able from the outside of the block so it doesn't create the block scope.

Now let's discuss local scope.
The variable that is granted permission just within the function is referred to as local scope, meaning that it can only be accessed from within its immediate surroundings.

// Not allow to use the code
function myFunction(){
let carName: "Toyota";
// allow to use the code//
}
// Not allow to use the code

Local scope life time is very limited. With the end of function lifetime the local scope lifetime is also end.

Time to learn about function scope. From the name it's quite simple to recognize that scope.
Those variable have the permission to call them from inside the function only rather then outside of the function.

In that case var, let and const are doing same thing. When they declared in the function the function scope is created and after end of the performance of the function the scope is finished.

For understand the global scope it's necessary to have knowledge about global variables.

The variable that can decalear outside of the function is always a global variable. It's accessible from anywhere of your code.

So where global variable is declare global scope is start from there and in that case the let,const and var are same.

var fruit = "Apple"; // Global scope

const fruit = "Apple"; // Global scope

let fruit = "Apple"; // Global scope

There another thing is that "Automatically Global"

If you assign value in a variable without declare the variable that's consider automatically global variable rather if it stay inside the function.

programming();
// can accessible from anywhere

function programming(){
language = "JavaScript";
}

The language is inside the function but it can accessible from anywhere of the script because it's not declarer using vat let const. so it declared automatically global.

However, That's the end of today's discussion. Hopefully You will enjoy it.