DEV Community: Oluwatobi Adedeji

Sending Notifications In Your Web Apps

Oluwatobi Adedeji — Tue, 17 Oct 2023 15:50:12 +0000

Ever wondered how YouTube,x, or any of your favorite apps you use on your browser sends you notifications? Well it's not magic, there are ways to get it done and in this article, I will be illustrating one of the ways.

In the world of web development, with the introduction of some Web APIs, it's now much easier to get things done that may take having to use Mobile Apps to achieve one of them which is sending notifications. Sending notifications on the Web Browser is now much easier than ever with the Notification API and Push API using service workers.

In this article, I will be explaining how to send notifications in your website/web application and I will be doing this using Javascript. Let's go

Notifications can be of two types:

Local Notification: This is generated by your app itself.
Push Notification: This is generated by a server(backend) via a push event, an example of a push notification you get is when your favorite YouTuber just posted a video and you get notified even when you are not currently on the YouTube web app and when your internet comes up you get notified.

I will be covering each of these in the course of this article. What do we need to know before getting started?

Components needed for Sending Notification:
⦁ Service Workers: Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take appropriate action based on whether the network is available. They will also allow access to push notifications and background sync APIs. A good explanation of a service worker at work is when you are offline but push notifications are being sent to your browser from a YouTube notification server, you do not get notifications until you are connected back to the internet.

⦁ Notification API: This API is used to show a notification prompt to the user just like in the case of mobile devices directly from your web app, for instance when a user clicks a button or performs an action in your app.

⦁ Push API: This API is used to get the push message from the server.

Sending Local Notifications

There are 3 steps we will be taking in sending local notifications in your web app.
⦁ We need to ask for the user's permission to send notifications via the Notification API using the requestPermission method.

⦁ If permission is granted, our Service Worker now listens for push events. On arrival of a push event, the service worker awakens and uses the information from the message to show a notification using notification API.

⦁ If permission is not granted you should also handle that properly in your code

Let's start by writing sample code for a simple page that implements local notifications on clicking the "Notify Me" button



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="notify">Notify Me</button>
</body>
<script src="./script.js"></script>
</html>

Now let's have our Javascript code...



const Notifybtn = document.querySelector(".notify");
const sendNotification = ()=>{
    if(!("Notification" in window)){
        throw new Error("Your browser does not support push notification");
    }
    Notification.requestPermission().then((Permission)=>{
        const notificationOptions = {
            body:"Welcome to Javascript Push Notification",
            icon:"./image.png"
        }
        new Notification("Push Notification",notificationOptions);
    })
};
Notifybtn.addEventListener("click", sendNotification);

In the code above, we have the sendNotification function where we are first checking if the user's browser supports notification, then we request permission from the user to send notification, if the permission is not granted, we will be unable to send notification.
To send the notification, we use the Notification constructor passing the notification title as the first argument and the notification options as the second argument. Running this you get something like this

Let's step it up a little bit, we want to send a more interactive notification where users have a button to click on or whatever kind of interaction we want to have. Let's try to modify our code to fit this need.



const sendNotification = ()=>{
    if(!("Notification" in window)){
        throw new Error("Your browser does not support push notification");
    }
    Notification.requestPermission().then((Permission)=>{
        const notificationOptions = {
            body:"Welcome to Javascript Push Notification",
            icon:"./image.png",
            actions: [
      {
        action: "thanks",
        title: "Thanks",
      },
      {
        action: "view_profile",
        title: "View Profile",
      },
    ],
        }
        new Notification("Push Notification",notificationOptions);
    })
};

Here we added actions property to the notification options where users have buttons on the notification to interact with.. When you run this, you get an error like this :

Quite an explicit error message, actions are only supported while using service workers, how do we do this?

Using Service Workers To Send Notifications

First, we need to have our service worker file and register the service worker. Let's have our serviceWorker.js file with just a simple console.log there.



//serviceWorker.js
console.log("Hello, welcome to service worker")

We can now go ahead to register our service worker.



const registerServiceWorker = async () => {
  if ("serviceWorker" in navigator) {
    try {
      const registration = await navigator.serviceWorker.register(
        "serviceWorker.js",
        {
          scope: "./",
        }
      );
      return registration;
    } catch (error) {
      console.error(`Registration failed with ${error}`);
    }
  }
};

So it's time to create a notification that has interactive actions, by modifying our sendNotification function...



// script.js
const sendNotification = async () => {
  let notificationOptions = {
    body: "Elon Musk sent you a friend request",
    icon: "./image.png",
   data: {
      requestId: "1234",
      username: "elonmusk"
    },
    actions: [
      {
        action: "accept",
        title: "Accept",
      },
      {
        action: "view_profile",
        title: "View Profile",
      },
    ],
    tag: "friend_request",
  };
  const sw = await registerServiceWorker();
  sw.showNotification("Friend Request", notificationOptions);
};

And here you have it

When you click nothing seems to be happening :) Let's step further by listening to the notificationclick event in our serviceWorker.



// serviceWorker.js

self.addEventListener("notificationclick", (event) => {
  event.notification.close();

  switch (event.notification.tag) {
  case "friend_request":{
    switch (event.action) {
      case "accept": {
        console.log("accept request API call.. with ", event.notification.data);
      }

      case "view_profile":
        {
          // direct to profile page
          event.waitUntil(
            clients
              .matchAll({
                type: "window",
                includeUncontrolled: true,
              })
              .then((windowClients) => {
                const matchingClient = windowClients.find(
                  (wc) => wc.url === urlToOpen
                );

                if (matchingClient) {
                  return matchingClient.focus();
                } else {
                  return clients.openWindow(event.notification.data.username);
                }
              })
          );
        }

        break;
      // Handle other actions ...
    }
  }
  }
});

Here you see we have two actions Accept Request and View Profile, and we perform that when the tag for the notification is "friend_request", and we are basically passing data around in our notification which is an important thing to take note of.

Sending Push Notification

So far we have been able to send Local notifications within our web app, which is pretty cool right? But most times when building a real-world application what you will need is push notifications; notifications that are generated from a server. In this section, we are going to have our backend server in ExpressJS.. Let's set up our server.



// app.js

const express = require("express");
const cors = require("cors");
require("dotenv").config();

const { API_PREFIX } = process.env;
const app = express();
const { models } = require("./config/db");
const { sendNotification } = require("./utils/helper");
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(
  cors({
    origin: "*",
  })
);
app.disable("x-powered-by");
module.exports = app



// index.js
const app = require("./app");
const { PORT } = process.env;
const connection = require("./config/db");
(async () => {
    await connection
      .sync()
      .then(() => {
        console.log("Database successfully connected");
      })
      .catch((err) => {
        console.log(err.message);
        return process.exit(1);
      });
    app.listen(PORT, () => {
        console.log(
          `<<<<<<<<<<<<<<<< Yeeeep,Server running on port ${PORT}..>>>>>>>>>>>`
        );
    });
  })();

With this, our backend server is up and running(P.S: this code snippet won't work properly as it ought to because of some imports, at the end of this article, you have a link to the GitHub repository for all the codes at the end of the article"

Let's move fallback to the front end again... For us to be able to send push notifications, we need to have the following:
⦁ VAPID keys
⦁ The web app must subscribe to the push service through the service worker

VAPID: Voluntary Application Server Identification for Web Push is a spec that allows a backend server to identify itself to the Push Service(browser-specific service). It is a security measure that prevents anyone else from sending messages to an application’s users.

How do VAPID keys enable security?
In short:
You generate a set of private and public keys (VAPID keys) at the application server.
A public key will be sent to the push service when the frontend app tries to subscribe to the push service. Now the push service knows the public key from your application server(backend). The subscribe method will return a unique endpoint for your frontend web app. You will store this unique endpoint at the backend application server.
From the application server, you will hit an API request to the unique push service endpoint that you just saved. In this API request, you will sign some information in the Authorization header with the private key. This allows the push service to verify that the request came from the correct application server.
After validating the header, the push service will send the message to the frontend web app.

Let's go ahead to generate our VAPID keys, we need to install the "web-push" dendency on your backend or globally...



npm i web-push

After installing you can run



npx web-push generate-vapid-keys

And you have something like this



Public Key:
<YOUR_PUBLIC_KEY>

Private Key:
<YOUR_PRIVATE_KEY>

You need to only generate this once. You have to Keep your private key safe.

Now let's fall to our serviceWorker.js file
We need to subscribe to the push service when the service worker registers...



//serviceWorker.js
const urlB64ToUint8Array = (base64String) => {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, "+")
    .replace(/_/g, "/");
  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
};

self.addEventListener("activate", async () => {
  try {
    const applicationServerKey = urlB64ToUint8Array(
      "<YOUR_PUBLIC_KEY>"
    );
    const options = { applicationServerKey, userVisibleOnly: true };
    const subscription = await self.registration.pushManager.subscribe(options);
    console.log(JSON.stringify(subscription))
  } catch (err) {
    console.log("Error", err);
  }
});

Here we are listening to when the service worker registers and activates, we make use of the VAPID Public Key, converting it from a base64 string into to Array buffer which is needed by the subscription option, and we also have the userVisibleOnly in the property which is set to true. You need to send userVisibleOnly as true always. This parameter restricts the developer to use push messages for notifications. That is the developer will not be able to use the push messages to send data to the server silently without showing a notification. Currently, it has to be set to true otherwise you get a permission denied error. In essence, silent push messages are not supported at the moment due to privacy and security concerns.

When this runs successfully you have something like this:



{
"endpoint":"https://fcm.googleapis.com/fcm/send/<some_strange_id>",
"expirationTime":null,
"keys":{"p256dh":"<some_key>","auth":"<some_id>"}
}

This response we got, we ought to save in a database on our backend, so let's create two endpoints on our backend, one to save the subscription and another to send notifications.



//app.js

app.post(`/${API_PREFIX}save-subscription`, async (req, res) => {

  try {
    const subscription = JSON.stringify(req.body);
    console.log(subscription);
    const sub = await models.subscriptions.create({ subsription:subscription });
    res.status(201).json({ message: "Subscription Successful" });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

app.post(`/${API_PREFIX}send-notification`, async (req, res) => {
  try {
    const { id } = req.body;
    const sub = await models.subscriptions.findOne({where:{id}});
    const message = {
      body: "Elon Musk sent you a friend request",
      icon: "https://media.npr.org/assets/img/2022/06/01/ap22146727679490-6b4aeaa7fd9c9b23d41bbdf9711ba54ba1e7b3ae-s800-c85.webp",
      data: {
        requestId: "1234",
        username: "elonmusk"
      },
      actions: [
        {
          action: "accept",
          title: "Accept",
        },
        {
          action: "view_profile",
          title: "View Profile",
        },
      ],
      tag: "friend_request",
    };
    await sendNotification(sub.subsription, message);
    res.json({ message: "message sent" });    
  } catch (error) {
    res.status(500).json({ message: error.message });

  }

});

We also need to create the import utilily function that helps to send the push notification.



// utils/helper.js
const webpush = require("web-push");
const { VAPID_PRIVATE_KEY, VAPID_PUBLIC_KEY } = process.env;
//setting our previously generated VAPID keys
webpush.setVapidDetails(
  "mailto:<your_email>",
  VAPID_PUBLIC_KEY,
  VAPID_PRIVATE_KEY
);
//function to send the notification to the subscribed device
const sendNotification = async (subscription, dataToSend) => {
  try {
   await webpush.sendNotification(subscription, JSON.stringify(dataToSend)); //string or Node Buffer
  } catch (error) {
    console.log(error); 
    throw new Error(error.message);
  }
};
module.exports = { sendNotification };

We have an endpoint to save the subscriptions and also another to send notifications (P.S: this is just a sample/ demo project, in real life scenarios you are most likely not going to have an endpoint to send notifications, rather it will be a utility service (class or function that can be triggered when certain actions occur).
Now let's go back to our front end to sync things up, we start by saving the push service subscription to the database by calling the endpoint.



   // serviceWorker.js
const saveSubscription = async (subscription) => {
  const SERVER_URL = "http://localhost:5005/api/save-subscription";
  const response = await fetch(SERVER_URL, {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(subscription),
  });
  return response.json();
};
self.addEventListener("activate", async () => {
  try {
    const applicationServerKey = urlB64ToUint8Array(
      "<YOUR_VAPID_PUBLIC_KEY>"
    );
    const options = { applicationServerKey, userVisibleOnly: true };
    const subscription = await self.registration.pushManager.subscribe(options);
    const response = await saveSubscription(subscription);
  } catch (err) {
    console.log("Error", err);
  }
});

We are just a few steps away!! Now let's have the showNotification function that displays the push notification when it's received



// serviceWorker.js
const showLocalNotification = (title, data, swRegistration) => {
  swRegistration.showNotification(title, data);
};

The function takes in three arguments; the title of the push notification, the notificationOption, and the service worker registration. Finally, we need to listen to the push event, when a push notification is made.



 // serviceWorker.js
self.addEventListener("push", function (event) {
  if (event.data) {
    console.log("Push event!! ", JSON.parse(event.data.text()));
    showLocalNotification(
      "Notification ",
      JSON.parse(event.data.text()),
      self.registration
    );
  } else {
    console.log("Push event but no data");
  }
});

Take a look at what we have:

We must also take note that when the page or browser is refreshed/restarted the service worker still remains registered, and you may need to change some things in the service worker file, you can invoke this function




const unregisterServiceWorkers = ()=>{
  if (window.navigator && navigator.serviceWorker) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.unregister();
      }
    });
  }
}

Whenever we hit the send-notification endpoint with the ID generated by the db, we get the push notification on your device, isn't that cool?? If you are looking to build a mobile app because of push notifications, you could consider building a web app instead, if there are no "trade-offs"...

Thanks for reading through this article, I really hope you have learned one thing or the other, I have pushed the code samples of this article to this repo, enjoy!!

Mastering Asynchronous Programming in JavaScript: Unraveling the Magic of async/await, Promises, and More

Oluwatobi Adedeji — Sat, 23 Sep 2023 22:06:19 +0000

Picture this: You're at a bustling coffee shop, eagerly awaiting your favorite brew. As you stand in line, you notice a peculiar sight. Instead of waiting their turn, people are multitasking effortlessly. Some chat with friends, others read newspapers, and a few even engage in a friendly game of chess—all while their coffee orders are processed behind the scenes. In this coffee shop, everyone is in perfect sync with their caffeine fix, but what if I told you that JavaScript, your trusty programming language, could function in much the same way? Welcome to the world of asynchronous programming in JavaScript, where code can juggle multiple tasks without missing a beat. It's a bit like a coffee shop where your code can chat with databases, read files, and fetch data from the web—all while serving up a delightful user experience.

Introduction:

In the realm of modern web development, where user expectations are higher than ever, the ability to handle multiple tasks simultaneously is crucial. Enter asynchronous programming in JavaScript, a paradigm that has revolutionized how we write code for the web. At its core, asynchronous programming allows your JavaScript code to efficiently manage tasks that might take time to complete, such as fetching data from an API, reading files, or performing database operations, all without blocking the main execution thread.

In this article, we embark on a journey to demystify the intricacies of asynchronous programming in JavaScript. We'll explore the power duo of async/await functions and the ever-reliable Promises, diving deep into their workings and real-world applications. Whether you're a seasoned JavaScript developer looking to sharpen your skills or a newcomer eager to grasp the fundamentals, you'll find valuable insights here to help you master the art of asynchronous programming.

So, grab your favorite beverage, settle in, and get ready to unlock the true potential of JavaScript's asynchronous capabilities. By the end of this article, you'll be equipped with the knowledge and confidence to harness the magic of async/await, conquer Promises, and navigate the nitty-gritty of asynchronous programming in JavaScript with ease.

What is Asynchronous Programming ?

Asynchronous programming is a programming paradigm and technique that allows tasks or operations to be executed independently and concurrently, without waiting for the previous task to complete before starting the next one. In asynchronous programming, a program can initiate a task and then continue executing other tasks without blocking, or waiting for, the completion of the initial task. This approach is particularly valuable in scenarios where certain tasks may take a variable amount of time to finish, such as network requests, file I/O operations, or user interactions. By performing these tasks asynchronously, a program can remain responsive and efficient, ensuring that it doesn't freeze or become unresponsive while waiting for time-consuming operations to finish.

Implementing Asynchronous Programming in Javascript

Javascript in particular uses asynchronous programming extensively, making use of mechanisms like Promises, async/await, and callback functions to manage asynchronous tasks and maintain a responsive user experience. I will start by using promises, then to async/await then back to promises for some use cases.

Promises

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
A Promise is in one of these states:
⦁ Pending: initial state, neither fulfilled nor rejected.
⦁ Fulfilled: meaning that the operation was completed successfully.
⦁ Rejected: meaning that the operation failed.

The eventual state of a pending promise can either be fulfilled with a value or rejected with a reason (error). When either of these options occurs, the associated handlers queued up by a promise's .then method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached. A promise is said to be settled if it is either fulfilled or rejected, but not pending.

First, let's create a promise object using the new keyword..

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("resolved");
  }, 300);
});

The promise constructor takes in a callback function with two arguments, the first is called when the promise is fulfilled while the second is for when the promise is rejected(note that the naming of the arguments is for readability, you can use any naming of your choice).. In both arguments, the message you want to pass in is what is received on fulfillment or rejection.

Now let's move to chained promises..
The methods Promise.prototype.then(), Promise.prototype.catch(), and Promise.prototype.finally() are used to associate further action with a promise that becomes settled. As these methods return promises, they can be chained. Meaning .then() returns a newly generated promise object, which can optionally be used for chaining; for example:

myPromise
  .then(handleFulfilledA, handleRejectedA)
  .then(handleFulfilledB, handleRejectedB)
  .then(handleFulfilledC, handleRejectedC);

Processing continues to the next link of the chain even when a .then() lacks a callback function that returns a Promise object. Therefore, a chain can safely omit every rejection callback function until the final .catch() and we have .finally(). So we can have something like

myPromise
.then((value)=> console.log(`${value} is in then`))
.catch((error)=> console.log(`Error message: ${error}`))
.finally(()=> console.log('I am here no matter what happened'))

This picture explains promises graphically

Also, we have Promise concurrency which gives more power to promises, and that will be discussed in the later part of this article.

Async/Await

The async function declaration creates a binding of a new async function to a given name. The await keyword is permitted within the function body, enabling asynchronous, promise-based behavior to be written in a cleaner style and avoiding the need to explicitly configure promise chains. In clearer terms, async/await helps us to achieve cleaner code over the chains of promises. Consider the following compared to the chains of promises:

const callMyPromise = async()=>{
try{
return await myPromise
}catch(err){
return err
}
}

We will consider more complex and real use cases of async/await in the application section of this article.
Take note :
⦁ await is only valid on promise, if a function does not return a promise, it's invalid to use await even though it does not break your app, but for the readability of your codebase stay away.
⦁ await keyword can be used within the async function and also at the top level of modules too.
Here is an example of a top-level await

 // create a file named promise.js 
// in your promise.js you can have this:
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("resolved");
    }, 300);
  });
  module.exports = myPromise;

// Create another file named top_level.mjs; .mjs simply means modularized javascript file
await Promise.resolve(console.log("Top level await!!"))

A practical use case of this is when you want to load a file that returns a promise in your .mjs file:


const result =  await import ("./promise.js");

Use cases of Asynchronous Programming

Making Network Requests: When you want to make a network request to a server or any other service, definitely the request will take some microseconds if not seconds to respond and your application depends on the data you are receiving from the network request. We can simulate this by making a simple GET request using Javascript fetch API.

//Make a request with Promise chain
const fetchWithPromiseChain = ()=>{
    const response =  fetch("https://www.boredapi.com/api/activity");
    response.then(response=> response.json()).then(data=> console.log(data)).catch(err => 

}

fetchWithPromiseChain()

// Make request with async await
const fetchWithAsyncAwait = async ()=> {
  try {
    const response = await fetch("https://www.boredapi.com/api/activity");
    const activity = await response.json();
    console.log(activity);
  } catch (e) {
    console.log("ERROR",e.message);
  }
}
fetchWithAsyncAwait();

From the above code snippet, we have two different approaches, and async/await seems to be cleaner, you won't realize this until you have many stuff to handle in your application.

Let's step up the game for instance when you want to make multiple network requests that your app essentially needs... Let's illustrate our approach to this.

const landingPageDataWithAsyncAwait = async () => {
  try {
    console.time("async fetching data");
    const firstCall = await fetch(
      "https://official-joke-api.appspot.com/random_joke"
    );
    const randomJoke = await firstCall.json();
    const secondCall = await fetch("https://www.boredapi.com/api/activity");
    const boredomData = await secondCall.json();
    const thirdCall = await fetch("https://randomuser.me/api/");
    const randomUser = await thirdCall.json();
    const fourthCall = await fetch("https://api.ipify.org?format=json");
    const ipData = await fourthCall.json();
    console.timeEnd("async fetching data");
    return { randomJoke, boredomData, randomUser, ipData };
  } catch (error) {
    console.log("ERROR", error.message);
  }
};

The time taken to execute this function

async fetching data: 3.058s

In this case, each request is independent of another, and what we are doing is that after a network request is done, that's when the next request can be made, which is unnecessarily going to make your app slow down, this method is best when each network request is dependent of data coming from another... There is a better approach to this by making parallel requests, here we can now talk about Promise concurrency; we have Promise.all, Promise.allSettled, Promise.any, Promise.reject each as their use cases.

Promise.all: Fulfills when all promises are fulfilled; rejects when any of the promises are rejected.
Promise.allSettled: Fulfills when all promises settle.
Promise.any: Fulfills when any of the promises fulfills; rejects when all of the promises are rejected.
Promise.race: Settles when any of the promises settles. In other words, fulfills when any of the promises fulfills; rejects when any of the promises are rejected.

In this case, we will be using .allSettled over the .all

const landingPageDataWithPromiseChain = async () => {
  try {
    console.time("fetching data");
    const firstCall = fetch(
      "https://official-joke-api.appspot.com/random_joke"
    );
    const secondCall = fetch("https://www.boredapi.com/api/activity");
    const thirdCall = fetch("https://randomuser.me/api/");
    const fourthCall = fetch("https://api.ipify.org?format=json");

    const [randomJoke, boredomData, randomUser, userIp] =
      await Promise.allSettled([firstCall, secondCall, thirdCall, fourthCall])
        .then((res) => res.map((r) => r.value.json()))
        .catch((e) => console.log(e));
    console.timeEnd("fetching data");

    return {
      randomJoke: await randomJoke,
      boredomData: await boredomData,
      randomUser: await randomUser,
      userIp: await userIp,
    };
  } catch (error) {
    console.log(error.message);
  }
};

(async () => {
  const result = await landingPageDataWithPromiseChain();
  console.log(result);
})();

Time taken for the function to execute

fetching data: 1.912s

Running each of these cases differently, you'll see from the time logged in the console the latter is faster than the former and as an engineer, every microseconds counts.

We need to touch another use case which is having tasks that require us to perform asynchronous actions in an array, this can be quite brain-tasking but here is an example and the fastest approach we can take..

Let's say we have an array of delivery boxes sent to the backend, and each box contains an array of items and each item has a value of productId, we need to get some specific detail of the product from our database, and in the end we want to return the product details of each product in items for every box

Let's have our code...

const products = async () => await Promise.all(
        payload.boxes.map(async (box)=>{
          const items =  Promise.all( box.items.map(async (item)=>{
          const product = await products.findOne({where:{id:item.productId}});
            return {name:product?.name,id:product?.id,categoryId:product?.categoryId,subCategoryId:product?.subCategoryId};
          })
          )
          return  new Promise((resolve)=> resolve(items)); 
        })
      )

We needed to have multiple Promise.all because we are dealing with a task that has to do with a multidimensional array kind of thing, and this proves to be arguably the fastest approach to this kind of problem.

There are so many other use cases of asynchronous programming, in fact, a lot of Web APIs are built on promises e.g. WebRTC, WebAudio, etc... As a software engineer asynchronous programming is very important and I hope with this article you have been able to learn more about asynchronous programming with Javascript. Thank you for reading this article, you can share what topic you want me to write on in my next article.

Higher-Order Functions In JavaScript

Oluwatobi Adedeji — Mon, 30 Jan 2023 18:23:58 +0000

One of the sweet things I really enjoy about JavaScript is the fact that it is a multi-paradigm programming language, you can
apply different paradigms of programming; object-oriented, functional, event-driven, etc
Although most times, we tend to treat JavaScript as a functional programming language based on our preference, one of the things
When dealing with JavaScript as a functional programming language, we need to note that we cannot be mutating states or change values assigned to variables.
A way we can achieve this is by using higher-order functions.

Before we begin to talk about higher-order functions in JavaScript let's understand some basic concepts about JavaScript that
will make reading this article easy to follow. Concepts like:

declaring functions in JavaScript
function arguments in JavaScript
function return type
functions in JavaScript as a first-class citizen

And later in this article, we will be touching:
-higher-order functions in JavaScript
-examples of higher-order functions in JavaScript

use cases of high-order functions in solving problems in JavaScript
writing your own higher-order functions in JavaScript
Let's also play around with writing some built-in higher-order functions in JavaScript.

Let's dive in,

Declaring Functions in JavaScript:

Declaring functions in JavaScript is simply done by giving a function name, a function body, and a return value(if required)

function firstFunction
{
console.log("our first function")
}
//So when we want to make use of the function :

firstFunction()

We just wrote a basic function, let's continue:
Let's write a function that can sum up two numbers; we will need two arguments, parameters are used when a function is declared but arguments are used when the function is called

// Definition:
function sumTwoNumbers(num1,num2)
{
  const sum = num1 + num2
   return sum
}

//Let's call the function:
//Here we will pass the parameters which are in this case the two //numbers we want to add together
console.log(sumTwoNumbers(3,7)
// The result we have is 10

And the result will always be consistent and correct as long as nothing goes wrong in the function block

In the function we just wrote to sum up two numbers, we are actually returning the sum of the two numbers.. One thing we need to take note of is that
whenever we have a return statement in a function, the function stops executing at that point, we will make use of this later..

Functions in JavaScript can be treated as first-class citizens, what I am saying here is that functions can be treated as a variable in JavaScript, let me explain this
using the previous functions we have written.

//The first function we wrote can be written as :
const firstFunction = ()=>{
console.log("our first function")
}

You notice we are declaring our function as a variable here, let's also re-write the second function

const sumTwoNumbers = (num1,num2) => num1 + num2

This looks shorter right? Let me explain what is happening here, instead of writing long lines of code, if you want to write a function that does not require
multiple lines of logic, you also notice we don't explicitly write a return statement but as far as there is no curly brace after the big fat arrow, the function
returns the value of _num1 + num2
_

We can now safely move on to higher-order functions in JavaScript:

Higher-order functions are functions that take a function as an argument and or or return a function

There are various higher-order functions in JavaScript, we will only be touching a few of them.

setTimeOut:
setTimeOut takes in an anonymous function as its first parameter and the time in milliseconds as the second parameter.

Let's say we want to print out the current date and time after 4 seconds of running the snippet:

setTimeout(()=>{
    console.log(new Date)
},4000)

Array.map() :
a map function is used to map through an array, but unlike the regular forEach or for, map function returns an array

For Example, let's say we want to add two to every number in an array of numbers

If we want to do this with our regular forEach, we will do it this way:

const numArr = [1,2,3,4,5,6,7,8,9,10]
const newNumArr = []

numArr.forEach((num)=>{
    newNumArr.push(num + 2)
})

console.log(newNumArr)

We get the result we want but, remember if we are doing functional programming at its core, we wouldn't want to be mutating state..
This is now where we can make use of a higher-order function:

const numArr = [1,2,3,4,5,6,7,8,9,10]
const newNumArr = numArr.map(num => num + 2)
console.log(newNumArr)

Apart from that the code is more readable and precise, you should also notice that we do not have reason to reassign or mutate any variable..
That's one of the reasons we use higher-order function

Array.reduce()

Let's say we want to want to add all the numbers in an array of numbers, using our forEach loop, we would write something like this:

const numArr = [1,2,3,4,5,6,7,8,9,10]
let accumulatedSum = 0

numArr.forEach(num => {
    accumulatedSum += num

}    
)
console.log(accumulatedSum)

Though forEach is still a higher-order function but remember we want to avoid mutating states..

We can use the reduce() function to achieve what we want :

const numArr = [1,2,3,4,5,6,7,8,9,10]

const arrSum = numArr.reduce((accumulator,currentValue)=> accumulator + currentValue,0)

console.log(arrSum)

In case you have not used the reduce function before, let me explain;

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise, the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

callbackFunction
A function to execute for each element in the array. Its return value becomes the value of the accumulator parameter on the next invocation of callbackFunction. For the last invocation, the return value becomes the return value of reduce().

The function is called with the following arguments:

accumulator
The value resulting from the previous call to callbackFunction. On the first call, initialValue if specified, otherwise the value of array[0].

currentValue
The value of the current element. On the first call, the value of array[0] if an initialValue was specified, otherwise the value of array[1].

currentIndex
The index position of currentValue in the array. On the first call, 0 if initialValue was specified, otherwise 1.

array
The array reduce() was called upon.

initialValue Optional
A value to which accumulator is initialized the first time the callback is called. If initialValue is specified, callbackFunction starts executing with the first value in the array as currentValue. If initialValue is not specified, accumulator is initialized to the first value in the array, and callbackFunctiion starts executing with the second value in the array as currentValue. In this case, if the array is empty (so that there's no first value to return as accumulator), an error is thrown.

So the complete syntax for reduce is

Array.reduce((accumulator,currentValue,currentIndex)=>{

// write your reducer logic here

},initialValue)

We can perform a few more complex tasks using reduce():

Let's say we have an array containing the objects of the student's name, age, and state of origin and we want to have a method that we can use to group the student list
by any of the three fields(name, age or state of origin)

const students = [
    { name: "Mike", age: 10,stateOfOrigin:"Niger" },
    { name: "Max", age: 12,stateOfOrigin:"Oyo" },
    { name: "Jane", age: 15,stateOfOrigin:"Abia" },
    { name: "Adora", age: 13,stateOfOrigin:"Benue" },
    { name: "Aishat", age: 14, stateOfOrigin: "Rivers" },
    { name: "Abu", age: 15,stateOfOrigin:"Adamawa" },
    { name: "Abraham", age: 14,stateOfOrigin:"Adamawa" },
    { name: "Tunmise", age: 15,stateOfOrigin:"Oyo" },
  ];

  const groupBy = (studentData,groupByProperty) => {
    return studentData.reduce((accumulated,currentObj)=>{
        const key = currentObj[groupByProperty]
        const currentGroup = accumulated[key] ?? []

        return {...accumulated,[key]:[...currentGroup,currentObj]}
    },{})
  }

  const groupedStudentByState = groupBy(students,"stateOfOrigin")

  console.log(groupedStudentByState)

In the snippet above, we have an array of student data and we also have a function to group the data we have.

In the groupBy function, we are returning the grouped data directly, the function takes in two arguments; the studentData and the groupByProperty, We are using a
reduce() function on the studentData; following the syntax for reduce(), we have a callback function that takes in accumulated data, the current value as parameters,
we also have the initial value which is an empty object { }.

Making your own higher-order function in JavaScript
Let's say you are working on a project with different folders,for example, express js and you have the models, controllers, routes, etc folders
When you write a function and you want to track if an error occurred or not when the function is called, you can pass in a callBack into the function.

For Example

// models/

const insertDataToDB = (...args,callBackFn) =>
{
  db.query(...,[],(err,res)=>{
    if(err){
    callBackFn(err,null)    
}
if(res){
   callBackFn(null,res)
}

})
}

export {insertDataToDB}

// controller/
import {insertDataToDB} from "../models/..."

const insertData = (req,res)=>{
   insertDataToDB(req.body,(error,data)=>{
    if(error){
    res.status(500).json({...error})    
}

if(data){
res.status(200).json({...data})
}

})
}

In the insertToDB function, we passed in a callBack into the function so when we call the function in the controller, we can check if an error occured or not and we can respond to the request.

I really hope you have learned a lot through this article, check up some of the code snippets in this article on GitHub do well to like and share this post and also follow me on Twitter and LinkedIn to get more updates from me, thank you see you soon.

Linkedln
Twitter