DEV Community

Cover image for JavaScript Decorator Functions
sundarbadagala
sundarbadagala

Posted on • Updated on

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

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'))
Enter fullscreen mode Exit fullscreen mode

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

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'))
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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. πŸ™‚

Top comments (0)