DEV Community: Shaurya Vardhan Singh

Understanding reduce in javascript

Shaurya Vardhan Singh — Thu, 29 Jul 2021 17:43:08 +0000

Reduce is an array method that was introduced in javaScript in ES5 along with map and filter. Map and filter are pretty straightforward to understand but I had difficulty understanding reduce so in this blog we are going to understand reduce with the help of some examples.

As the name suggests reduce method is used to reduce the array to a single value.
According to MDN -

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Now, this single output value could be anything, it could be a number, an object, or even an array.

Let's take an example - you have an array of numbers and you would want to calculate the sum of it.

const arrayOfNumbers = [9,8,7,6,5];

so we can use reduce here as we want a single output, reduce method takes 2 parameters one is a callback function and the other is the initial value. The initial value is optional and if we don't provide it then it takes the first value of the array as an initial value and starts from 2nd value of an array.

const sum = arrayOfNumbers.reduce(callbackFunction, initialValue)

If you don't provide the initial value there is a chance to get a type error if the array is empty, so it's a good practice to always include the initial value.

The callback function can have 4 arguments -

accumulator : it is the return value of the callbackFunction for the next iteration and for the first time it is initialValue.
currentValue : the current array item
index : index of the currentValue
wholeArray : the complete array on which we are applying reduce

const callbackFunction = (accumulator, currentValue, index, wholeArray) => {
// doSomethingHere
}

index and wholeArray arguments are optional and can be omitted. In 99% of cases, only the first two arguments are needed

In this example, while looping through the array in each iteration we add the currentValue to the accumulator and return it this return becomes the accumulator for the next iteration.

const callbackFunction = (accumulator, currentValue) => {
    return accumulator + currentValue;
}

We can write this in one line using arrow function as well -

const arrayOfNumbers = [9,8,7,6,5]
const sum = arrayOfNumbers.reduce((accumulator,currentValue) => accumulator + currentValue, 0)

This would have ran the loop 5 times -

Iteration number ---> accumulator ---> currentValue

1 --->0(initialValue) ---> 9

2 ---> 9(0 + 9) ---> 8

3 --->17(9 + 8) ---> 7

4 --->24(17 + 7) ---> 6

5 --->30(24 + 5) ---> 5

and then it returns 35

This was a straightforward example now lets take a complex example.
We are given an array of students data and we need to group students with their favourite fruit.

const studentsData = [
{
     name: 'Shaurya',
     favouriteFood: 'Mango'
},
{
     name: 'Priya',
     favouriteFood: 'Apple'
},
{
     name: 'Rishabh',
     favouriteFood: 'Mango'
},
{
     name: 'Shubham',
     favouriteFood: 'Grapes'
},
{
     name: 'Ashish',
     favouriteFood: 'Strawberry'
},
]

Now we need to return an object with fruits as keys and students as array values.
So we take initialValue as an empty object and will iterate through the array and check for each student if fruit is present in accumulator then push the student to its array else add the fruit as key and push the student as its value in array.

const groupByFavouriteFruits = studentsData.reduce((accumulator, currentStudent) => {
    let key = currentStudent.favouriteFood;
    let name = currentStudent.name;

    if( !accumulator[key] ){
        accumulator[key] = [];   
    }
    accumulator[key].push(name);
},
{})

//  so groupByFavouriteFruits becomes 
// {
//     Mango : [ 'Shaurya', 'Rishbah' ],
//     Apple : [ 'Priya' ],
//     Grapes : [ 'Shubham' ],
//     Strawberry : [ 'Ashish' ]
// }

Reduce is a very powerful array method, although it is a bit harder a understand but it has various use cases. The Map and Filter Array methods can also be written through Reduce but that will be a topic for another blog.

If you want to read more about reduce MDN has a very detailed doc on it - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Quirky tip - There is a reduceRight method as well, which works same as reduce but the array is traversed right to left.

Intro to Monolithic, MicroServices and Monorepo Architecture

Shaurya Vardhan Singh — Fri, 23 Apr 2021 16:40:04 +0000

For the past few years, there was a trend to move from monolithic architecture to microservices architecture. While this was a good decision as microservices have many advantages now companies are moving a step further and going to monorepo architecture. So let's dive into what these architectures are -

For this blog let's take a front end of an e-commerce site as an example. Now the frontend of the e-commerce site can be divided into two parts
1- Admin site for sellers to add and edit their products
2- Website for users to view and buy these products

We can further divide these sites by creating a different module for payments etc. But we will keep it simple for this blog.

So if we have both the admin site and website in a single repository it is known as monolithic architecture. This was the traditional way of making software but it came with pitfalls as both the websites are in the same repository it becomes quite hard to maintain the code.

To overcome this we moved to microservices architecture in which both the admin site and website are different repositories. This helped in maintaining the code as people could work independently on any service.

Microservices brought advantages but they brought drawbacks as well -
1- As mainly packages use the same modules this leads to increased size on disk. For eg - both the admin site and website use react now react will be installed in both node_modules.
2- In microservice as each service has its own repository we have to update the version for each update and track its effect on other microservices.

To solve these problems we moved to monorepo, In monorepo architecture both the admin site and website are microservices but in the same repository.

Lerna is a great tool to manage monorepo. It scans through package.json of each module in your repo and installs the common modules only once this leads to less disk space usage.
It also manages the version number for each module and updates them according to change in them.

So in monorepo architecture, we have benefits of both monolithic architecture as well as monorepo architecture.

Choosing the architecture also depends on company size so if you are starting now you can start with monolithic architecture as it has the least overhead and then gradually move to monorepo architecture.

Deploying React App on Surge using Github Actions

Shaurya Vardhan Singh — Fri, 11 Dec 2020 08:17:05 +0000

Today we are going to set up an automation which will deploy our react code on surge whenever a push request is made to main branch of the github repository.

First step would be to create a React app using create-react-app.

npx create-react-app react-github-surge
cd react-github-surge

Now set up a github repository and push your code to the repository.

$ git init
$ git add .
$ git commit -m "initial commit"
$ git branch -M main
$ git remote add origin REPOSITORY_URL
$ git push origin main

After creating a repository on github login to surge account and create a token for surge which will be used by github action to deploy to surge using your account.

$ surge login
$ surge token

Go to github repository and add the token as a secret

Github actions are stored in .github/workflows/ directory.
so create this directory and add a yaml file to it.

mkdir .github/worflows
touch .github/worflows/deploy.yml

Open this file and add the below code to it.

name: Deploy

on:
  push:
    branches: [ main ]

jobs:
    runs-on: ubuntu-latest

    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # Install node version 12
      - uses: actions/setup-node@v2-beta
        with:
          node-version: '12'

      # Install npm packages
      - name: Install packages
        run: npm install

      # Build react app
      - name: Build the app
        run: npm run build

      # Install Surge 
      - name: Install Surge
        run: npm install -g surge

      # Deploy to the defined URL using the token
      - name: Deploy to surge
        run: surge ./build URL_TO_DEPLOY_TO --token ${{secrets.TOKEN}}

So let's see what is going on over here.
In first line we are giving a name to our action so that we can identify it easily.

Then we have on: block

on:
  push:
    branches: [ main ]

here we are defining when we want our function to run i.e. whenever a push request is made on main branch.We can specify more than one branch inside the array using comma seperated values.

Now whenever a push request will be made to main branch of the github repository the github action will execute this job and deploy the react app to surge.

jobs:
    runs-on: ubuntu-latest

Inside the jobs we write the platform on which our code will run. Here we are using latest version of ubuntu.

steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Install node version 12
      - uses: actions/setup-node@v2-beta
        with:
          node-version: '12'

      # Install npm packages
      - name: Install packages
        run: npm install

      # Build react app
      - name: Build the app
        run: npm run build

      # Install Surge 
      - name: Install Surge
        run: npm install -g surge

      # Deploy to the defined URL using the token
      - name: Deploy to surge
        run: surge ./build URL_TO_DEPLOY_TO --token ${{secrets.TOKEN}}

Then we declare the steps to be followed. Each step will run synchronously.
First step is to load our repository in our latest ubuntu version.

Second step is to install node, we are installing node version 12 here.

Then we write steps to install npm packages and build our react app.

Next we will install surge and lastly we will deploy our build directory to surge using the token.

Now whenever a push request is made on main branch of our repository github will automatically deploy it to the url provided.

Getting Started with React Hooks

Shaurya Vardhan Singh — Wed, 02 Dec 2020 17:13:24 +0000

This guide is for people who are just starting with React and want to know what hooks are and learn about some important hooks.
If you are learning React, hooks will become an integral part of your life. There are a total of 10 hooks in React but other than some special cases you will use only 2-3 hooks in day to day coding.
So, let's get started.

What is Hook?

According to React docs -

A Hook is a special function that lets you “hook into” React features.

Hooks were added in React 16.8 and it lets you add state and other functionalities in function based component, earlier which was possible only in class based components.
So, lets take a look at most used hook first.

1) useState Hook

useState Hook is the most commonly used hook. It is used to add a state to the functional component.
Lets look at a example that shows current Age of user and on clicking on button it adds 1 year to current age.

import React, { useState } from 'react';

function Example() {
// using the useState hook to store age.
const [age, setAge] = useState(0);
  return (
    <div>
      <p>You are of {age} years</p>
      <button onClick={() => setAge(age + 1)}>
        Click me
      </button>
    </div>
  );
}

so whats happening here:

In line 1 we are importing the useState hook.
In line 5 we are declaring the age variable as state and initializing it to 0. We are also making a function setAge to update the age.
In the paragraph we are displaying the age by using the javascript syntax in jsx.
The onClick on button sets the age to age+1, this will rerender the component.

for using multiple state variables inside a component you can create multiple useState -

const [age, setAge] = useState(0);
const [name, setName] = useState('React');

here we have 2 state variables age and name and both have their setter functions setAge and setName respectively.

2) useEffect Hook

useEffect hook is another important hook and is used mainly to run some code on mounting of component or whenever some dependency changes.

Let's look at an example of useEffect hook. Here we are setting the title of document on each render.

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

function Example() {
const [age, setAge] = useState(21);
const [name, setName] = useState("Shaurya");

useEffect(() => {
  document.title = `${name} is ${age} years old`;
})

  return (
    <div>
      <p>Shaurya is {age} years old</p>
      <button onClick={() => setAge(age + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example we are executing useEffect hook on each render, but our title is only changing when age is changed.

For such cases we can add a dependency array to useEffect hook and only when one of the dependency changes then only the useEffect hook will be executed.

useEffect(() => {
  document.title = `Shaurya is ${age} years old`;
},[age])

Here we added age to the dependency array so whenever age is changed useEffect will be executed.

In this example we are executing our hook on the value of age but what if we only want to execute our hook once. For example making a request to an API.

In such cases we can pass an empty dependency array and then the useEffect hook will only be executed once.

useEffect(() => {
  document.title = `Shaurya is 21 years old`;
},[])