How to create a common Helper class

💡 Create a folder named util inside the src folder.

📁src >
> 📁util

💡 Let’s create two JS files named Helper.js and util.js.

📁src >
> 📁util
– 🟠Helper.js
– 🟠util.js

💻 Helper.js

This is a Class file that contains several commonly used methods with static type. The advantage of creating such a helper class is that we can write all required common methods in a single place and can use them in multiple components. It increases code reusability and maintainability.

We can create multiple helpers or common class files as per our code structure.

We can access any method by ClassName.MethodName

class Helper {
  // Simple function
  static printSum = (a, b) => {
    return a + b;
  };

  // Simple function
  static multiply = (a, b) => {
    return a * b;
  };

  // Return Promise
  static getPromiseData = () => {
    return Promise.resolve({ name: "JsMount", id: 123 });
  };
}

export default Helper;

💻 Use in Component.js file

import React, { useEffect, useState } from "react";
import Helper from "./../../util/Helper";

const ComponentA = (props) => {
  const [user, setUser] = useState({});

  useEffect(() => {
    Helper.getPromiseData().then((res) => {
      setUser(res);
    });
  });

  return (
    <>
      <h6>Sum of two number (8,4) using Helper.js - {Helper.printSum(8, 4)}</h6>
      <h6>
        Multiply of two number (8,4) using Helper.js - {Helper.multiply(8, 4)}
      </h6>
      <h6>Below data is coming through Promise Resolve from Helper class</h6>
      <p>User: {user.name}</p>
      <p>Id: {user.id}</p>
    </>
  );
};

export default ComponentA;

 Helper.getPromiseData().then((res) => {
      console.log(res) // get data
    });

Helper.printSum(8, 4)

Helper.multiply(8, 4)

💻 util.js file

This file contains all utility exposed functions and directly available into other classes and components.
Here we need to expose every function which we want to use outside while in the Helper Class file we don’t expose methods directly, we expose only class.

We can create multiple util files as well as per our code structure.

export function addTwoNumber(number1, number2) {
  return number1 + number2;
}

export function getUserName() {
  return "JS Mount";
}

export function getNameArray() {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push("JS-" + i);
  }
  return data;
}

💻 Use of util.js in Component

import React from "react";
import { addTwoNumber, getUserName, getNameArray } from "./../../util/util";

const ComponentA = (props) => {
  return (
    <>
      <h3>Welcome to Router Component A</h3>
      <h6>Called util function: Username is {getUserName()}</h6>
      <h6>Sum of two number (3,4) using util.js - {addTwoNumber(3, 4)}</h6>
      Total Names: {getNameArray().length}
      <ul>
        {getNameArray().map((name) => {
          return <li>{name}</li>;
        })}
      </ul>
    </>
  );
};

export default ComponentA;

{
  getNameArray().map((name) => {
          return <li>{name}</li>;
  })
}

addTwoNumber(3, 4)

💡 JAVASCRIPT INTERVIEW QUESTIONS

✔ JavaScript Top Interview questions & Answers You should know

✔ JavaScript Interview Questions & Answers for Experienced – Part 2

✔ JavaScript Interview Question to Write Programs for Experienced – Part 1

✔ JavaScript Interview Questions & Answers for Experienced – Part 1

✔ Top Interview Questions and Answer of HTML 5 Canvas

✔ JavaScript Console Interview Questions | Input Output Program

✔ JavaScript Hoisting Interview Questions & Answers | Console Programs

💡 DATA STRUCTURE & ALGORITHMS

✔ JavaScript Rotate 2D matrix 90 degrees clockwise | Top Interview Question

✔ HashTable Data Structure in JavaScript with Add Delete & Search Algorithms

✔ Trie Data Structure – Insert Search Delete & Print Program with JavaScript

✔ Top JavaScript Commonly asked Algorithms in Interview

✔ JavaScript String Permutation Program with nice explanation

How to create a common Helper class

0

0