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 aHigher 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
. π
Top comments (0)