Object Oriented JavaScript : Objects and its property types

Vaibhav Sharma
Apr 20 · 5 min read

In modern time, JavaScript stack is booming in the software development field. All companies like JS technologies like Node JS, Angular, React, Vue, Express, etc. So, in today’s life of a software developer is incomplete without the JavaScript. Today we will discuss OOJS (Object Oriented JavaScript) main concept: Objects.


Introduction :

Object-oriented languages are identified through their use of classes to create multiple objects that have the same properties and methods. JavaScript is slightly different from other class-based programming languages because, in ES5, there was no concept of the class keyword in the JavaScript. ES5 is all about functional programming. We can create an object here by function constructor also (Classes concept is coming in ES 6).


Basics things about Objects:

The simplest way to create an object is by calling Object ( ). Here we can create a custom object by creating a new instance of Object ( ) and add properties and methods.

In the above code of snippet, we can define an object (person) with one property ( name ) and one method ( greeting ()). In the greeting (), we can access name properties by this.name.

This is a very simple method to create an object is Object Literal. The output of the previous example and this example is the same but the creation pattern is a different one.


Properties of an object :

In the broad term, properties of an object’s property having 2 types:

  1. Data Properties
  2. Accessor Properties

Data Properties :

In the data properties, the data of the object is stored in a single location. When you changed or overwrite the value of any properties like the name of an above-created object (person), changed the value on that location. We can read or write the value of the property of an object from that location. Suppose you can define an object person and add a property of age with that so automatically some memory location is assigned to property age. From that location you can get the value of age and if you want to change the value of age so you can overwrite the value of age on that location.Data properties has four types:

  1. Configurable
  2. Enumerable
  3. Writable
  4. Value

When you added a property to an object, by default the above three properties ( Configurable, Enumerable, Writable ) has true value and the value property having the assigned value.

Configurable :

If the [[Configurable]] property having a true value, then you may be redefined by removing the property via delete, change the property value or change the property to accessor property. By default this is true.

Enumerable :

If the [[Enumerable]] property having a true value, then the property will return in the for-in loop. By default this is true.

Writable :

If the [[Writable]] property having a true value, then you can overwrite the value of that property. By default this is true.

Value :

It contains the actual value of the property and you can read the value of the property from the location in which the value is saved and you can overwrite that property’s value to that location. The default value is undefined.

In the above screenshot, we can define an object which a property name with value (“Vaibhav”). If you want to access the data properties of the above property, you can use Object.getOwnPropertyDescriptor() method.

If you want to change all or any data properties of a property, then you can use Object.defineProperty ().

In the above code sample, the writable data property is false. So, if you changed the value of designation property, it doesn’t change in non-strict mode and in the strict mode of coding, it gives an error like “designation is read-only property “ like that.

If you define a property by the using of Object.defineProperty ( ) method, then all values of data property except value is by default false.


Accessor Properties :

In the accessor properties, we can call getter and setter function. These properties don’t have any data value. When an accessor property is reading a value, then getter function will call and when you overwrite the value of the property then setter function will call. Accessor properties has four types:

  1. Configurable
  2. Enumerable
  3. Get
  4. Set

It is impossible to define accessor properties explicitly. You must use the Object.defineProperty( ) method.

Configurable :

If the [[Configurable]] property having a true value, then you may be redefined by removing the property via delete, change the property value or change the property to accessor property. By default this is true.

Enumerable :

If the [[Enumerable]] property having a true value, then the property will return in for-in loop. By default this is true.

Get :

The function to call when the property is read from. The default value is undefined.

Set :

The function to call when the property is written to. The default value is undefined.


Define Multiple Properties:

You can define multiple properties by the using of Object.defineProperties and if you want to access all the data properties then use Object.getOwnProperty​Descriptors ( ).

and if you want to get all data properties of all properties of an object:

In the above code of snippet, we define two properties by using of Object.defineProperties() at a time and access all the data properties of an object we can use Object.getOwnPropertyDescriptors( ) method.


Conclusion:

This is the first installment of Object Oriented JavaScript series. I will back soon with another part of that series. If you have any doubt and feedback please mail me vsvaibhav2016@gmail.com.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade