DEV Community: Zahidul Islam

Topic: JS Promise vs Async await

Zahidul Islam — Thu, 30 Dec 2021 11:51:32 +0000

As JavaScript is an Asynchronous(behaves synchronously), we need to use callbacks, promises and async await. You need to learn what is async-await, what is promise, how to use promise and async-await in javascript and where to use it.

Promise

What is Promise? A Promise is a rejected value or succeeded value of asynchronous function and when the operation is not fulfilled or fulfilled and thus promise is created.

Promise have three states.

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

How to use Promise? See the example below

const calculate = (a,b,c) => { 
  return new Promise((resolve, reject) => {
  setTimeout(() => {
    if(a<0 || b<0 || c||0){
       reject("no number can be negative.")
    }
    resolve('Calculation: ', a+b+c);
  }, 1000);
 }
}

calculate(5,7,8);
.then((reolveOfCalculate)=>{
  console.log(reolveOfCalculate);
}.catch((rejectOfCalculate)=>{
  console.log("rejectOfCalculate");
})

From above example, I am trying to give a little explanation about promise. A promise is created in calculate function. When the operation of the function is fulfilled then, it calls a callBack function and the success value is kept in resolve argument. Similarly, a callBack function is called, and the failure value is kept in reject argument when the operation is not fulfilled.
The success and rejected value is consoled by taking an argument respectively reolveOfCalculate, rejectOfCalculate.

Promise can be written in chaining. See below...

const calculate = (a,b,c) => { 
  return new Promise((resolve, reject) => {
  setTimeout(() => {
    if(a<0 || b<0 || c||0){
       reject("no number can be negative.")
    }
    resolve('Calculation: ', a+b+c);
  }, 1000);
 }
}

calculate(5,7,8);
.then((reolveOfCalculate)=>{
  console.log(reolveOfCalculate);
  return (reolveOfCalculate, 3, 2);
}.then((chaining1)=>{
  console.log(chaining1);
}).catch((rejectOfCalculate)=>{
  console.log("rejectOfCalculate");
})

Async await

Async await is the lighter version of promises. Because, basically promises works behind the await methods. The await operator is used to wait for a Promise. It can only be used inside an async function within regular JavaScript code.

Return value:

Returns the fulfilled value of the promise, or the value itself if it's not a Promise.

const calculate = (a,b,c) => { 
  return new Promise((resolve, reject) => {
  setTimeout(() => {
    if(a<0 || b<0 || c||0){
       reject("no number can be negative.")
    }
    resolve('Calculation: ', a+b+c);
  }, 1000);
 }
}

const add = () => {
   const sum1 = await calculate(1,2,3);
   const sum2 = await calculate(sum1,2,3);
   return sum2;
}
add().then((result)=>{console.log(result)}).catch((error)=>{console.log(error)};

Why to use Async await:

Async await is cleaner than promises. So, most of the programmers suggest to use async await to make our code readable and cleaner.

Topic: JS Array Methods and their differences- forEach vs map vs filter vs find vs reduce vs slice vs splice

Zahidul Islam — Wed, 29 Dec 2021 21:25:36 +0000

We all know about JavaScript array methods and their use cases also. But sometimes, there will create a bit of confusion among map, forEach, filter, find and reduce. Because, all of them work in array element and gives similar output also. But a question is where are the differences ? Now I am going to write my a short research about them and their use cases.

Before writing my explanation, I need to clarify a thing shortly that what the higher order function in JavaScript is. Because, in which topic I am going to write, all of them are a higher order function. Basically, The function will be a higher function when it takes a function as a parameter. The parameter function can be anonymous function or arrow function.

- forEach()

forEach() is nothing but a traditional for loop. It works like a for loop. It gives an array looping over each array element of our existing array and perform operation on them. One thing is point to be noted, that forEach doesn't return an array. It returns undefined.

Syntax:

// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

- map()

map() works on array object like forEach() method. But there is a little difference is that map creates a new array like the given array transforming and modifying existing array element. It returns array that is created.

Syntax:

// Arrow function
array.map((element) => { /* ... */ })
array.map((element, index) => { /* ... */ })
array.map((element, index, array) => { /* ... */ })

// Callback function
array.map(callbackFn)
array.map(callbackFn, thisArg)

// Inline callback function
array.map(function(element) { /* ... */ })
array.map(function(element, index) { /* ... */ })
array.map(function(element, index, array){ /* ... */ })
array.map(function(element, index, array) { /* ... */ }, thisArg)

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

- filter()

filter() works on array object or element, but the difference is that it only works on condition based. In a simple word, filter returns creating a subset of array according to your condition given in a callback function.
For example, When you need to some elements or objects that are not needed and wanted to remove them, then need to use filter method. see more

Syntax:

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

elem :element value
index :index in each traversal, moving from left to right
array :original array invoking the method
thisArg :(Optional) object that will be referred to as this in callback

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

- find()

find() method also works on array element but the difference is, it returns the value or existing array element when the condition of the given callback function is true otherwise it will return undefined. see more

Syntax:

// Arrow function
find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function(element) { /* ... */ })
find(function(element, index) { /* ... */ })
find(function(element, index, array){ /* ... */ })
find(function(element, index, array) { /* ... */ }, thisArg)

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

- reduce()

reduce() method is used to reduce the array into a single value. see more

Syntax:

/ Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

- slice()

slice() method is used to copy a specific portion of an array. see more

Syntax:

slice() slice(start) slice(start, end)

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

- splice()

splice() method is used when we need to delete or replace a specific index of an array. see more

Syntax:

splice(start) splice(start, deleteCount) splice(start, deleteCount, item1) splice(start, deleteCount, item1, item2, itemN)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Topic: Node Emit

Zahidul Islam — Tue, 28 Dec 2021 20:41:16 +0000

Node Js has built in event module to handle event. I expect that we all know what the event is. Actually, event create an action when user triggered. Events can be user-generated, such as keystrokes and mouse clicks. But these events are built in. We can't make our event as our choice. In node js, we can make our event. Node Event by clicking this you can get the official docs.

Node Event

One of the core concepts of Node.js is events. Event Emitter plays a vital role in Node.js Event-Driven Architecture.

How does it work?

Node Emit works in three ways.

Event Emitter emits the data in an event called message
A Listened is registered on the event message
when the message event emits some data, the listener will get the data.

EventEmitter methods and description

on(): on(event, listener), by this method we can add event listener. It is just like 'addListener' keyword in JavaScript.
emit(): emit(event, arg1, arg2), by this event we call the specified event listener. It is just like 'onclick' keyword in JavaScript.
once(): once(event, listener), by this method the event is called for one time and after that it will be removed.
addListener(): addListener(event, listener), by this method the event is checked if it is registered or not.
removeListener(): removeListener(event, listener), by this method the event is removed for listener.

Example:

const EventEmitter = require("events")
const emitter = new EventEmitter()
emitter.on("message", (arg) => {
  console.log("subsribed", message)
})
emitter.emit("message", "Welcome to my blog.")

From the above example, we can say that EventEmitter is a built-in class of event in Node JS. Normally, we declare our variable name with lower case at start, but here we should start with upper case letter in declaring event emitter. When we import 'events' class where methods are written. After creating an object, we can access these methods. So, 'emitter' is a object of that particular class, and it accesses the on() method and emit() method over there.

Use Case

At first, create a file named "timer.js". The code will be the following example given below.

const EventEmitter = require("events")
class Timer extends EventEmitter {
  closeIt('close', msg) {
    this.emit('close', msg)
  }
}
module.exports = Timer

Here, we can see, Timer extends the EventEmitter class and the method called closeIt takes event and message as an argument.

Now create 'app.js' file and write this code.

const Timer = require("./Timer")
const timer = new Timer()
timer.on("close", arg => {
  console.log("Listened value: ", arg)
})
timer.closeIt("close: ", 'Time out ! Server will be closing soon...')

Here, it requires the module Timer and instantiates the class as a timer. closeIt() function emits event called 'close'. The listener will listen for the event and close it.

Topic: React Hook and Custom React Hook

Zahidul Islam — Tue, 28 Dec 2021 10:32:10 +0000

When I was learning to React, some parts seemed to me difficult. Today, I have decided to write some of my learnings and ideas about react hook and custom react hook.

- What is hook, basically?

In real life, hook means a one kind of ring that holds something. In react, hook works basically based on this following concept such as if we use React hook, there will be a state that stores data and provides data in any component during setting the states in a component or multiple component using the same state. As we can use the same state in many components, so it is thought that it holds data like a ring and can be linked in any component. But there have some rules and guidelines to use react hooks.

Hook must be declared at the top of the return functions and inside the React function.
Don’t declare hooks in loop, conditions and nested functions.
Hook can be written in functional component only.

Example:

// imported hooks to use from react
import React, { useEffect, useState } from "react";

//react function
const MyOrder = () => {

// setting react hook
const [order, setMyOrder] = useState(‘’ ”) / useState(null);

    retrun(
       // code contents in JSX format.
    );
}
export default MyOrder;

From, above example, we can say that, this is a React functional component. Now I am going to give explanation.
Firstly, we create a ‘MyOrder.js’ file as a component that handles order related task. The component name must be started with an uppercase letter.
Secondly, export the created component for further use in other component. If it isn’t exported, it can’t be imported in another component.
Thirdly, we need to define our hook. Hook always start ‘use’ key word. In the above example, there is used useState hook. Now, come to the main point that how to set our state and how to store data in state? In state, data is stored in array format. So, at first we take two elements inside an array [order, setOrder]. Here, setOrder sets our data into an order element. When, setOrder element is first called, it renders the React component and store the data in a memory cell in order element. When it is rendered again, it will create another memory call to store the data. But when it is rendering again and again, it returns the previous stored data serially except creating a new cell. So, we should set hook serially to reduce creating bugs.

- What is useEffect hook, basically?

useEffect is also a hook and one kind of function. It is a call back function. Because Each time it passes a call back function after rendering a component. It can pass an array with call back function. This call back function will be called with the first render of the component and after that it will be called with the changing of the array. But if there is no array element, then it will be called once for the first time of rendering of the component. One thing is to be noted that, the array element is called dependency of useEffect.
Example:

useEffect(() => {
    fetch(`http://localhost:8000/premium-autos/select-now/${id}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setOrder(data);
      });
  }, [id]);

Here, after the render of the component, the useEffect hook is called and fetch the URL and send a response. Basically, this hook is used to fetch data from API. When, we need to set some dependency that data will be fetched with a specific id or email, then we can set a dependency in array. Here, [id] is the dependency.

- Benefits of Hooks

We can write many function in hooks, and use in other components easily.
It makes our component easy for reusability, readability and testing.

- What is custom hook, basically?

Custom hook is nothing but a function. When we need to write a specific logic for any project and need to use same logic in other components, then custom hook plays an important role. Just we need to create a JS file named ‘useAuth.js’ as an example, here we can write any name also but writing ‘use’ at first it looks quite good. It’s just a convention of naming a custom hook. In custom hook, there will be written necessary function. Here, I have given an example ‘useAuth.js’ Because authentication is needed in every component
Example:

import React, { useEffect, useState } from "react";

//react function and it will be our custom hook
const useAuth = ( ) => {

// setting react hook
const [userName, setUserName] = useState(‘’ ”) / useState(null);

const handleInputField = ( ) => {
    // code contents
}

const handleForm = ( ) => {
    // code contents
}

// returning function so that these function can be accessed in other components when custom hook will be called
    retrun(
          handleInputField,
          handleForm
    );
}
export default useAuth;