DEV Community

Cover image for Javascript Object #11
Asir-Sam
Asir-Sam

Posted on

Javascript Object #11

Welcome back! in the last post we have seen about the Object properties and it one property Data property.Now we are going to see about the accessor property in this Post.

As like Data Properties,accessor property have [[Configurable]] and [[Enumerable]] attributes.But the accessor property have the [[Get]] and [[Set]] attributes instead of [[Value]] and [[Writable]].

When you want to read a data from the accessor property the [[Get]] method is automatically called to return a value.when you want to assign a value to the property [[Set]] function is called automatically.

To define a accessor property,you need to use Object.defineProperty() method. or example:

`let person = {
    firstName: 'John',
    lastName: 'Doe'
}

Object.defineProperty(person, 'fullName', {
    get: function () {
        return this.firstName + ' ' + this.lastName;
    },
    set: function (value) {
        let parts = value.split(' ');
        if (parts.length == 2) {
            this.firstName = parts[0];
            this.lastName = parts[1];
        } else {
            throw 'Invalid name format';
        }
    }
});

console.log(person.fullName);`
Enter fullscreen mode Exit fullscreen mode

OUTPUT

`'John Doe'`
Enter fullscreen mode Exit fullscreen mode

in this example,the Person Object conatins two properties,firstName and lastName.Then we are adding the fullName property to the Person Oject as an accessor property.In the fullName accessor property,

  • The [[Get]] returns the full name that is the result of concatenating of firstName, space, and lastName.

  • The [[Set]] method splits the argument by the space and assigns the firstName and lastName properties the corresponding parts of the name.

  • If the full name is not in the correct format i.e., first name, space, and last name, it will throw an error.

From the ES5,we can define a multiple property in a single statement using the Object.defineProperties() method.

`var product = {};

Object.defineProperties(product, {
    name: {
        value: 'Smartphone'
    },
    price: {
        value: 799
    },
    tax: {
        value: 0.1
    },
    netPrice: {
        get: function () {
            return this.price * (1 + this.tax);
        }
    }
});

console.log('The net price of a ' + product.name + ' is ' + product.netPrice.toFixed(2) + ' USD');`
Enter fullscreen mode Exit fullscreen mode

OUTPUT

`The net price of a Smartphone is 878.90 USD`
Enter fullscreen mode Exit fullscreen mode

In this example, we defined three data properties: name, price, and tax, and one accessor property netPrice for the product object.

In Javascript we can also find the property descriptor of an Object using the Object.getOwnPropertyDescriptor() method,The Object.getOwnPropertyDescriptor() method takes two arguments:

  1. An Object.
  2. A Property of an Object.

It returns a descriptor object that describes a property. The descriptor object has four properties: configurable, enumerable, writable, and value.

`let person = {
    firstName: 'John',
    lastName: 'Doe'
};


let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');

console.log(descriptor);`
Enter fullscreen mode Exit fullscreen mode

OUTPUT

`{ value: 'John',
  writable: true,
  enumerable: true,
  configurable: true }`
Enter fullscreen mode Exit fullscreen mode

That's all about the Javascript Object Properties.We will see more intersting things about Object in Upcoming Post.

If you are reading this post,and find helpfull.Please give a like and comments that will motivate me a lot and do more interesting things in Javascript.

Thanks for your mean Time,
Sam

Top comments (0)