Learn About Properties In JavaScript

Introduction

 

JavaScript is an object-oriented programming language and encapsulation is a pillar of object-oriented programming language. Properties help us to encapsulate. Properties help us to control what is assigned and return to and from the public field.

 

A Property is a member that helps us to read, write, or compute the value of a private field using get and set accessor.

 

Properties can be of the type,

1. Read-write (they have both get and set accessor)
2. Read-only (they will have to get accessor)
3. Write only (they will have set accessor)

In JavaScript in order to create properties we can use Object.defineProperty() method.

 

DefineProperty() method takes three parameters,

1. The object on which we want to define property
2. Name of the property to be defined
3. The descriptor for the property being defined or modified 

Descriptor can be a data descriptor or accessor descriptor. Accessor descriptor have the following keys,

• get which serves as a getter for the property, the function return will be used as the value of the property
• set which serves as a setter for the property and will be used to assign the value to the property.

Example

 

Now let’s create a constructor function Person as below, this function has three private variables _name, _address, and _salary.

 

Using defineProperty() method let’s create,

• name - Read-only property using get key
• address - Write only property using set key
• salary - Read/Write property using get and set key 

Let’s initialize _name and _address private variable with some default value.

<script type="text/javascript">
    function Person() {
        var _name = "Mary";
        var _address = "Houston";
        var _salary;
        //Read only Property
        Object.defineProperty(this, "name", {
            get: function() {
                return _name;
            },
        })
        //Write Only Propert
        Object.defineProperty(this, "address", {
            set: function(value) {
                _address = value;
            }
        })
        //Read or Write Property
        Object.defineProperty(this, "salary", {
            get: function() {
                return _salary;
            },
            set: function(value) {
                if (value < 1) alert("Invalid Salary");
                else _salary = value;
            }
        })
    }
    var person = new Person();
    person.name = "Jane";
    person.address = "Austin";
    person.salary = 10;
    person.salary = -1;
    var result = person;
</script>

Now let’s create an object of type Person and see what we are getting in the result,

 

 

We can see that even though _address private value has the default value, address properties is still undefined and that is correct as we do not have any get key defined which can return us the value from _address private member.

 

We are getting salary properties as undefined even though we have the set key for salary properties with return value as _salary private variable, this is also correct as _salary property do not have any default value assigned.

 

We are getting value for name properties as this have the get key which returns value of _name private member and _name private member have a default value as Mary.

Now let’s try to assign values to properties,

 

 

In the above example, we have tried to assign value Jane to property name however in we are still getting a name as Mary, this is absolutely correct. Name is a read-only property we can’t assign a value to it, so it’s resulting in the default value which is Mary.

 

We have tried to assign Austin as a value to address property still in result we can see that it is undefined, which is correct, address is a write-only property we can assign value to it however we will not get any result as address property do not have a get key which can return us a value.

 

Salary is a read and write property, we have assigned a value as 10 and we are getting value 10 in the result.

 

Now, let’s try to assign a negative number for salary property and run the code

 

person.salary = -1;

 

As the value getting assigned to salary is less than 1 so condition written under set key for property salary will return true and an alert will get a popup with a message as Invalid Salary.

 

 

And, the value for salary will remain 10 which we set initially.

 

 

Summary

 

I hope this will be helpful to you. For more reference, visit here

 

Your feedback and comments are always welcome.