DEV Community

Cover image for Decorator Function inside Factory Function
sundarbadagala
sundarbadagala

Posted on

Decorator Function inside Factory Function

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());
Enter fullscreen mode Exit fullscreen mode
//-------------------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));
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode
  • ๐Ÿ“Œ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

CONCLUSION ๐Ÿ””

I hope you guys understand how to implement decorator function inside the factory function.

We will meet in next with another concept

Peace ๐Ÿ™‚

Top comments (0)