JavaScript -> Properties

Introduction

In many of my previous post i have spoken about properties but never really went into detail of what they are. This post will change that.

First let me cite the ECMAscript standard about what a property is:

property:

part of an object that associates a key (either a String value or a Symbol value) and a value. NOTE: Depending upon the form of the property the value may be represented either directly as a data value (a primitive value, an object, or a function object) or indirectly by a pair of accessor functions.

This definition corresponds to the observation from previous posts that you can get access of the values of an objects properties via a Key associated to that property. But there is more to properties which is not obvious at first glance.

Creation of properties

To create properties, JavaScript gives us a bunch of ways to achieve this. The two well known  are:

The not so well known have the following syntax:

But obviously there is more to it except some weird syntax possiblities, isn’t? Every property owns a set of so called Data and Accessor Descriptors. I personally just call them Attributes. It rolls easier from the tongue.

Attributes/Property Descriptors

Attributes are  called by the ECMAscript standard as “Property Descriptor”.  As said above I call an descriptor an attribute.

Those attributes describing the property and can classified into two groups. The Data descriptor which only contain information about the data, who would have guessed XD, and the accessor descriptor which contain information about the accessors get and set.

Data descriptor Accessor descriptor
value Yes No
writable Yes No
enumerable Yes Yes
configurable Yes Yes
get No Yes
set No Yes

If you want to take a look at the attributes of an existing object, you can do that via the following call:

The Value attribute, you might already have guessed it, contains what we store behind the actual property. The actual content. It is not really much to say about. The next one is more interesting.

If something is configured as writable you allow other objects to manipulate the value attribute of this property. But If you set writable to false you have in fact created a constant immutable value nobody can change ever again! Through this we control the constness of a value of a property. So any change will simply be rejected, except if you are using "strict mode"then you will get a TypeError. Important to mention is that  it is possible to bypass this “constness” and it is a one way ticket. Onced switched there is no going back. At least not without force

The get and set attributes contain functions which will be invoked when ever a property’s value is either retrieved (get) or assigned(set). This is almost the same as the Getter/Setter Syntax known from C#.

Enumerable is basically everything in Javascript except if you do not wish that something is enumerable. Then you can explicitly simply flip this switch to false and objects which get loop over do not return properties marked as NOT enumerable.

And last but not least  configurable. It indicates whether it is possible to change the type and if it can be deleted from an object if it is set accordingly. Through this the user is capable to bypass the writable attribute which might forbid changing the value attribute. How you ask? If configurable is set to true we are allowed to delete that property and simply recreate it with the desired attributes! Also like the writable attribute once set to false there no turning back!

Manually setting the attributes

To set the Attributes manually you can do the following

Quite cumbersome to write this much  all the time, that’s why JavaScript offers the well known mechanism of assigning any value via = at anytime at runtime so we ,the casual user, do not have to do it always everywhere as shown at the beginning a bit more extensively in different ways.

Modifying existing attributes of a property

The function defineProperty(obj,name,attributes) is written in such a way that if the named property already exist, instead of recreating a new property, it modifies simply the attributes given.

 

It is justa repeated call with different values for the attributes. But, you may ask, what are these attributes set if you use the more common way of simply assign value to a key given to an object?

Indeed this is a very good question!

Default values of attributes

If your property is created via the defineProperty function and you did not gave that function information about the values of the attributes all boolean attributes are defaulting always to false all non boolean attributes defaulting to undefined. This is important to witness because properties attached to objects via assignment, their boolean, are defaulting true. That’s quite the difference!

Leave a Reply

Your email address will not be published. Required fields are marked *