JavaScript Decorator Functions
Tags: javascript, decorators, decoratorfunctions, functionalreactiveprogramming
Published: 2023-07-14 02:18:17

## 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](https://dev.to/sundarbadagala081/javascript-pipeline-4d27).

## 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.📝

```javascript
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`)
```javascript
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.📝
```javascript
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.
```javascript
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 🔔**
```javascript
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`. 🙂