Decorator Function inside Factory Function
Tags: javascript, webdev, programming, development
Published: 2024-07-04 15:24:52

## 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🔗](https://www.linkedin.com/pulse/factory-functions-javascript-nikhil-nishad/)  👈🏻. 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**
```js
//-----------------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());
```

```js
//-------------------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](https://dev.to/sundarbadagala081/javascript-decorator-functions-19l1)👈🏻. 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 👇🏻👇🏻👇🏻
```js
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

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

We will meet in next with another concept

Peace 🙂