in , ,

JavaScript Getter and Setter

JavaScript Getter and Setter
JavaScript Getter and Setter

In this tutorial, you will learn about JavaScript getter and setter methods with the assistance of examples.

The concept of getters and setters is quite common among popular languages in use today. Have you ever expected to ensure that a given activity is constantly performed previously or subsequent to allotting some an incentive to an object’s property? This is conceivable with setters. You can likewise play out such processing while recovering the value of a property by using getters (e.g., formatting). One approach to actualize getters and setters is to use techniques, similar to what’s done in Java. However, since ES5, we have a significantly more exquisite and useful option accessible by using the get and set syntax. Well, let’s get started!

In JavaScript, there are two kinds of object properties:

  • Data properties
  • Accessor properties

Data Property

Here’s an example of data property that we have been using in the previous tutorials.

const student = {

    // data property
    firstName: 'muskan';
};

Accessor Property

In JavaScript, accessor properties are techniques that get or set the value of an object. For that, we use these two catchphrases:

  • get – to characterize a getter method to get the property value
  • set – to characterize a setter method to set the property value

JavaScript Getter

In JavaScript, getter methods are used to access the properties of an object. For example,

const student = {

    // data property
    firstName: 'Muskan',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Muskan

// accessing getter methods
console.log(student.getName); // Muskan

// trying to access as a method
console.log(student.getName()); // error

In the above program, a getter method getName() is created to access the property of an object.

get getName() {
    return this.firstName;
}

Note: To make a getter method, the get catchphrase is used.

And furthermore while getting to the worth, we access the value as a property.

student.getName;

When you try to access the value as a method, an error occurs.

console.log(student.getName()); // error

JavaScript Setter

In JavaScript, setter strategies are used to change the values of an object. For instance,

const student = {
    firstName: 'Muskan',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Muskan

// change(set) object property using a setter
student.changeName = 'Sara';

console.log(student.firstName); // Sara

In the above example, the setter method is used to change the value of an object.

set changeName(newName) {
    this.firstName = newName;
}

Note: To make a setter strategy, the set watchword is used.

As appeared in the above program, the value of firstName is Muskan.

At that point the value is changed to Sarah.

student.chageName = 'Sara';

Note: Setter must have exactly one formal parameter.


JavaScript Object.defineProperty()

In JavaScript, you can likewise use Object.defineProperty() technique to add getters and setters. For instance,

const student = {
    firstName: 'Muskan'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Muskan

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sara

In the above example, Object.defineProperty() is used to access and change the property of an object.

The syntax for using Object.defineProperty() is:

Object.defineProperty(obj, prop, descriptor)

The Object.defineProperty() method takes three arguments.

  • The first argument is the objectName.
  • The second argument is the name of the property.
  • A third argument is an object that describes the property.

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

salman khan

Written by worldofitech

Leave a Reply

How to Get a Vertical Taskbar on Windows 10

Step by step instructions to Get a Vertical Taskbar on Windows 10

JavaScript Prototype

JavaScript Prototype