Posted on Jul 4, 2024

Decorator Function inside Factory Function

#javascript #development #webdev #programming

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