Decorator Function inside Factory Function

#javascript #webdev #programming #development

INTRO 🔔

Recently I had to create a function with multiple methods🤔. So I created a Factory Function😎. If you don't know what a factory function is then don't worry😉, I will tell you in simple words that The function always returns an object called a factory function. For more information visit this 👉🏻 factory factions🔗 👈🏻. Then after I realised that all the methods have the same validation check🔬. So I decided to create a decorator function to check the validation of all the methods😵‍💫. So I started researching different blogs on how to achieve that but I didn't find any perfect solution, Even though I found, those are very complicated to understand and don't have an organised code format😒.

Today we will discuss how to implement the decorator function inside the factory function.📝

FACTORY FUNCTION 🔔

As mentioned earlier, a factory function is simply a function that returns an object without using the keyword new so the end result of the function is the return of an object. 🚀

👉🏻 ADVANTAGES

📌 First, it's a simple it's just a function it's there's no setup there's no fuss it's just a function and it's really easy to read
📌 No duplicate code and our logic is isolated in one place
📌 Have data privacy

👉🏻 EXAMPLE

//-----------------FACTORY FUNCTION----------------------
const factoryFn = (...args) => {
  const sum = () => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = () => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max=()=>{
    return Math.max(...args)
  }
  return {
    sum,
    multiple,
    max
  };
};

const fn1 = factoryFn(1, 2, 3, 4);
console.log(fn1.sum());
console.log(fn1.multiple());
console.log(fn1.max());

//-------------------FACTORY FUNCTION WITH IIFE-----------------
const factoryFn = (() => {
  const sum = (...args) => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = (...args) => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max = (...args) => {
    return Math.max(...args);
  };
  return {
    sum,
    multiple,
    max,
  };
})();

console.log(factoryFn.sum(1, 2, 3, 4));
console.log(factoryFn.multiple(1, 2, 3, 4));
console.log(factoryFn.max(1, 2, 3, 4));

DECORATOR FUNCTION 🔔

A decorator function💥 is simply a function💥 that receives another function💥 as a parameter and then returns a new function💥 with extended behaviour. So you can pass a function💥 into a decorator function💥 and you'll get a new function💥 back that does more than the function💥 you passed in.

We already created one post for the 👉🏻decorator function👈🏻. Please visit that post for more information. 👍🏻

DECORATOR WITH FACTORY FUNCTION 🔔🔔🔔

After a long discussion, finally, we came to the main topic 😛.

Here the code to implement decorator function inside the factory function 👇🏻👇🏻👇🏻

const factoryFn = (() => {
  const sum = (args) => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = (args) => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max = (args) => {
    return Math.max(...args);
  };
  const decorator = (callback) => {
    return (args) => {
      const isValidate = args.some((item) => Number.isInteger(item));
      if (!isValidate) {
        throw new TypeError("arguments cannot be non-integer");
      }
      return callback(args);
    };
  };
  const passingFn = (fn, params) => {
    const newFn = decorator(fn);
    return newFn(params);
  };
  return {
    sum(...params) {
      return passingFn(sum, params);
    },
    multiple(...params) {
      return passingFn(multiple, params);
    },
    max(...params) {
      return passingFn(max, params);
    },
  };
})();

console.log(factoryFn.sum(1, 2, 3, 4));
console.log(factoryFn.multiple(1, 2, 3, 4));
console.log(factoryFn.max(1, 2, 3, 4));

📌Created one method named passingFn to avoid code duplication. That function helps to declare a new function by decorating existed function and returns that declared a function with enhanced feature (nothing but validation check)
📌decorator method, we already discussed that. That returns the function that we passed as a callback with a validation check.
📌The remaining methods are already existing ones