Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
decorator

JavaScript Decorators

Educative Answers Team

What comes to mind when you hear the word, decorator?

You may think of balloons at a birthday party or jewelry, something that is added to an existing thing to make it more beautiful.

Which side would you go to take your pictures? Left or Right?
Which side would you go to take your pictures? Left or Right?

In JavaScript, decorators wrap one piece of code around another. This can be done by using a function to wrap another function. Since there aren’t any balloons or jewelry items to decorate within JavaScript, we use functions to achieve the same effect.

svg viewer

Class Decorator

let ornaments = function(target){
    target.hands='bangles';
    target.neck = 'necklace';
    target.ear = 'earrings';
};

/* function ornaments is defined as a decorator and placed
above the defined class. It is used to wrap the contents
of the class _Ornaments by wrapping one piece of code on 
another. */

 @ornaments
 class Ornaments{

 }
 console.log('Ornaments wearing:')
 console.log(`${Ornaments.hands}`)
 console.log(`${Ornaments.neck}`)
 console.log(`${Ornaments.ear}`)

Class decorators are applied to the entire class definition. The decorator function is said to be called with a single parameter, which is always the constructor function. In the code above, we use a class decorator to give values to the individual attributes of the class. The class attributes are accessed using a class decorator that is wrapped over an entire class.

Property Descriptor Decorators

// Property Descriptor Decorators.
// Let's define a class CarModel


//Define a decorator function
let Do_not_Overwrite=function(target,key,descriptor)
{
    descriptor.writable=false;
    return descriptor;
}
class CarModel {
    constructor(ModelName)
    {
        this.Model = ModelName;
    }
    // define this decorator over getModel()
    @Do_not_Overwrite
    getModel(){
        return this.Model;
    }
}

const NewCar = new CarModel('Mercedes');

//The function getModel can be overwritten

NewCar.getModel = function(){
    return "dummy string";
}
console.log(`${NewCar.getModel()}`)
/* in this case, if we run code without decorator
the NewCar.getModel will output 'dummy string'.
This is because our function is overwritten. Therefore,
we make use of decorator which will make sure function
is not overwritten and output is 'Mercedes' */

Property Descriptor Decorators are used for many purposes. One of their uses is that they ensure that a function’s results from a class are not overwritten to give inaccurate information. This is exactly what we did in our code above. In the class CarModel, the function getModel() returns a Model of the Car (could be “Mercedes”, “BMW”, “Honda” etc.) However, this function is then overwritten due to the naming convention to always output “dummy string”. Therefore, we define the function Do_not_Overwrite() and use it as a decorator for the class. To ensure the function becomes a ‘read-only function’, write: descriptor.writable=false.

RELATED TAGS

javascript
decorator
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring