Learn About Properties In JavaScript

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 Properties is a member that help us to read, write or compute the value of a private field using get and set accessor.

Properties can be of type,

  1. Read-write (they have both get and set accessor)
  2. Read only (they will have get accessor)
  3. Write only (they will have set accesor)
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.

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.

  1. <script type="text/javascript">  
  2.     function Person() {  
  3.         var _name = "Mary";  
  4.         var _address = "Houston";  
  5.         var _salary;  
  6.         //Read only Property  
  7.         Object.defineProperty(this"name", {  
  8.             get: function() {  
  9.                 return _name;  
  10.             },  
  11.         })  
  12.         //Write Only Propert  
  13.         Object.defineProperty(this"address", {  
  14.             set: function(value) {  
  15.                 _address = value;  
  16.             }  
  17.         })  
  18.         //Read or Write Property  
  19.         Object.defineProperty(this"salary", {  
  20.             get: function() {  
  21.                 return _salary;  
  22.             },  
  23.             set: function(value) {  
  24.                 if (value < 1) alert("Invalid Salary");  
  25.                 else _salary = value;  
  26.             }  
  27.         })  
  28.     }  
  29.     var person = new Person();  
  30.     person.name = "Jane";  
  31.     person.address = "Austin";  
  32.     person.salary = 10;  
  33.     person.salary = -1;  
  34.     var result = person;  
  35. </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 have 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 return 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 popup with message as Invalid Salary

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

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

Your feedback and comments are always welcome.