JavaScript Decorator Functions

INTRO 🔊

Decorators will help you add extra conditions 🚫 or additional functionality ✅ to the main function that we want to execute. Decorators 🚀 will work as a function wrapped with another function (decorator function) which has some extra conditions or behaviour 💁🏻. They are used to enhance functionality without affecting the behaviour of the underlying function 😎.

📌 Note:- New syntax is in the javascript pipeline to make this much easier in javascript. For more information about the javascript pipeline please visit this link.

DEFINITION 🔊

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.

📌 Decorator is always a Higher Order Function because it receives and returns function.

BENEFITS 🔊

The main benefit of decorator is it follows the D.R.Y 🔁 rule means don't repeat your code and clean code through composition.

USAGE 🔊

When we want to return multiple functions with the same conditions then we can use the decorator function or when we want to check whether a function is executable or not can do it by decorator.💡

EXAMPLE 🔊

Without Decorator 🔕
Write a function that passes some elements as an argument and it returns the sum of all elements.📝

const addFn=(...args)=>{
        return [...args].reduce((cur, acc)=> cur+acc,0)
}
console.log(addFn(1,2,3,4))

NOTE:- First of all we have to check whether all elements are integers are not. (It gives extra enhancement to function)

const addFn=(...args)=>{
    if([...args].every(item => Number.isInteger(item))){
        return [...args].reduce((cur, acc)=> cur+acc,0)
    }
    return 'arguments cannot be non-integer'
}

console.log(addFn(1,2,3,4))
console.log(addFn(1,2,3,4,'a'))

Write another function that passes some elements as argument and it returns multiples of all elements.📝

const multipleFn=(...args)=>{
        return [...args].reduce((cur, acc)=> cur*acc, 1)
}

console.log(multipleFn(1,2,3,4))

NOTE:- First we have to check whether all elements in array are integers are not.

const multipleFn=(...args)=>{
    if([...args].every(item => Number.isInteger(item))){
        return [...args].reduce((cur, acc)=> cur*acc, 1)
    }
    return 'arguments cannot be non-integer'
}

console.log(multipleFn(1,2,3,4))
console.log(multipleFn(1,2,3,4,'8'))

If you observe the above functions, the condition that checks whether all elements in the array are integers is repeated. It's not good practice. So it's better to use that condition in another function (decorator) and we can pass those functions through the decorator.

With Decorator 🔔

const addFn=(...args)=>{
    return [...args].reduce((cur, acc)=> cur+acc, 0)
}
const multipleFn=(...args)=>{
    return [...args].reduce((cur, acc)=> cur*acc, 1)
}

const decorator=(callback)=>{
    return (...args)=>{
        const isValidate=[...args].every(item => Number.isInteger(item))
        if(!isValidate){
            return 'arguments cannot be non-integer'
        }
        return callback(...args)
    }
}

const add = decorator(addFn)
const multiple = decorator(multipleFn)


console.log(add(1,2,3,4))
console.log(add(1,2,3,4,'a'))
console.log(multiple(1,2,3,4))
console.log(multiple(1,2,3,4,'8'))

If you observe the above code, the condition of checking elements whether all elements are not put into one function is nothing but the Decorator.

Here the decorator function receives other functions addFn and multipleFn as a parameter and then returns new functions add and multiple with extended behaviour.

CONCLUSION

In that same way, we can use decorators in many ways. Here is just a sample code I provided. I hope you people understand what is decorator functions. 🙂