DEV Community

Cover image for Javascript Object #10
sams-engine
sams-engine

Posted on

Javascript Object #10

So far in our long Javascript Object post,we have seen about Javascript Object creation, what is Object properties, etc. But in the post we are going to see Object properties in Javascript.This may make you little confusing,because as we have already came through Object Properties as it was the collection unordered keys and values. But this is not same,this is really different.

Object Properties

Javascript Object properties are some of the internal attributes of the Object that define the Object characteristics.They can be defined mannually.These attributes are internal and ususally they are sorrounded by two Squre brackets.We can assign the characteristic of the individual properties,that does'nt affect the other properties in the Object.

Objects have two types of Properties,

  1. Data Properties.
  2. Accessor Properties.

Data Properties

Data Properties contains the single location for the value.that means the data of the property is stored in the a single attribute.
There are four types of attributes in Data property.

  • [[Configurarable]]

  • [[Enumerable]]

  • [[Writable]]

  • [[Value]]

By default all the internal properties attributes are set to true,while creating an Object.The default value of the attribute [[Value]] is undefined.

[[Configurarable]]

This is the first attribute of the Object data property,this defines weather the data in the Object can be redefined or either can delete via Delete Operator.

To define the Charateristic of a property in an Object.we have to use define property method, *Object.defineProperty() *

This *Object.defineProperty() * accepts the three arguments,
1.The Object to define.
2.The name of the Property in the Object.
3.A property descriptor object that has four properties: configurable, enumerable, writable, and value.

Note If you Define a new Property using the Object.defineProperty() ,all the internal attributes of the property is set the default false.

Let's make this in an example,

let person = {
    firstName: 'Ross',
    lastName: 'Rachael'
};

Enter fullscreen mode Exit fullscreen mode

In this example we have create an Object with two properties,Let's now try to delete the firstName property

`delete person.firstName;
console.log(person.firstName);`
Enter fullscreen mode Exit fullscreen mode
`undefined`
Enter fullscreen mode Exit fullscreen mode

Boom,the firstName property have been deleted,as you haven't assigned any internal attributes mannually so the default value of the [[Configurable]] attribute is set to true.so you can remove it via the delete operator.

Let's now define a property using the Object.defineProperty,and see what is going to happen,

`let person = {};

Object.defineProperty(person, 'ssn', {
    configurable: false,
    value: '012-38-9119'
});

Object.defineProperty(person, 'ssn', {
    configurable: true
});
`
Enter fullscreen mode Exit fullscreen mode
`TypeError: Cannot redefine property: ssn`
Enter fullscreen mode Exit fullscreen mode

As you can see,it throws an error.because the we configured the internal attributes to false,so we cannot redefine the property once we set the configurable attribute to false.

[[Enumerable]]

[[Enumerable]] defines,whether the property can be iterable or not.
By default this attribute is also set TRUE,t means that you can iterate over all object properties using the for...in loop like this:

`
let person = {};
person.age = 25;
person.ssn = '012-38-9119';

for (let property in person) {
    console.log(property);
}
`
Enter fullscreen mode Exit fullscreen mode

OUTPUT:

`
age
ssn
`
Enter fullscreen mode Exit fullscreen mode

Let's manipulate the Ennumerable property and try this again,

`let person = {};
person.age = 25;
person.ssn = '012-38-9119';

Object.defineProperty(person, 'ssn', {
    enumerable: false
});

for (let prop in person) {
    console.log(prop);
}`
Enter fullscreen mode Exit fullscreen mode

OUTPUT:

`age`
Enter fullscreen mode Exit fullscreen mode

as you can see the ssn property didn't came into console as we have set the enumerable attribute of the property to false.

[[Writable]]

This attribute specifies wheater the value of the property can be changed or not.By default this attribute is also set the true.

[[Value]]

As i have told in the beginning the data in the Object in the Data properties are stored in a single location and that is the [[Value]] attribute.This contains the actual value of a property.

That's it.We will see about the Accessor Property in upcoming post.

If you are reading this Post Please Hit Up the Like,that motivates me a lot to do and learn more aboyt Javascirpt.

Many Thanks for your Morning Time,
Sam

Top comments (2)

Collapse
 
imyash profile image
Yash

That was really something new and refreshing !! Awesome job.

Collapse
 
samr profile image
sams-engine

Thank Budd!