{"id":11356,"date":"2016-03-08T16:15:41","date_gmt":"2016-03-08T14:15:41","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=11356"},"modified":"2018-10-26T16:32:59","modified_gmt":"2018-10-26T13:32:59","slug":"javascript-properties-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-properties-example\/","title":{"rendered":"JavaScript Properties Example"},"content":{"rendered":"

Properties are one of the most basic Javascript notions. Basic to the point that they are more often than not overlooked in the language’s literature. However, it’s crucial to know and study them even for those who only want to have even the most elementary knowledge about JS. <\/p>\n

1. What are Properties exactly?<\/h2>\n

According to the official definition in the Javascript documentation, an object having a property means having an “association between a property name and its value.” Though, if you want an even clearer version of that definition, think of properties as the building blocks of an object, as these two concepts (and variables too) are very deeply interwoven with each other. <\/p>\n

You can even think of properties as objects in and of itself, as they not only have a string for a name but also a set of attributes assigned to them. <\/p>\n

We can divide properties in different types based on different qualifications. For starters, what we defined above are called direct properties as there is a direct association between a property name and it’s value. Except for that we have properties whose values are assigned indirectly through getters<\/em> and setters<\/em> which are simply functions associated with property values. <\/p>\n

Moreover, a property can be own<\/em> or inherited<\/em>, based on where it is contained in the prototype chain. While the first ones are contained directly by the object, the second type can be contained by one of the other object whose child our object is. <\/p>\n

Also, we divide properties into named<\/em> and internal<\/em> based on whether they are or not a part of ECMAScript. We’ll take a short look on these later.
\n 
\n[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

2. Property Attributes<\/h2>\n

There are a number of attributes assigned to a property depending on the type it is, but there are two that are common for each one. These two are Enumerable<\/code> and Configurable<\/code>. When the first one is set to the boolean value TRUE<\/code>, that means that the property can be enumerated using a for...in<\/code> enumeration, while when the second one is set to FALSE<\/code> it prevents the property from being deleted or modified in any way. If Configurable<\/code> has been set to FALSE<\/code> once, it cannot be reversed, and also you can’t change the other properties (except setting Value<\/code> and Writable<\/code> from true to false, the vice versa not-withstanding).<\/p>\n

2.1 Named Properties<\/h3>\n

We mentioned that properties are divided into named<\/strong><\/em> and internal<\/strong><\/em>. Named properties are further divided into named data<\/em> properties and named accessor<\/em> properties. Let’s take a look at each one separately below.<\/p>\n

2.1.1 Named Data Properties<\/h4>\n

A named data property means having a property with two very important components: a name and a value that is directly associated to it. Additionally to the general attributes these types of properties also have two other attributes, which are Value<\/em> and Writable<\/em>. The first one specifies a values retrieved when reading the property, while the second, when set to FALSE<\/code>, prevents the internal method Put<\/code> from changing the Value<\/code> attribute of the property. Take a look below:<\/p>\n

properties.js<\/em><\/span><\/p>\n

 \r\nObject.defineProperty(this, \"MYVAR\", {\r\n  value: 100\r\n});\r\n\r\nconsole.log(MYVAR);  \/\/ result: 100\r\n<\/pre>\n
What we have done here is just define a named data property, giving it a value of 100. If we try to later change this value or completely delete the property we will be presented with an error, since by default we would have [[Writable]] = false<\/code> (which prevents rewriting) and [[Configurable]] = false<\/code> (which would prevent deleting of otherwise changing it). The default data property attributes would be these:<\/p>\n
properties.js<\/em><\/span><\/p>\n
 \r\nvar defaultDataPropertyAttributes = {\r\n  [[Value]]: undefined,\r\n  [[Writable]]: false,\r\n  [[Enumerable]]: false,\r\n  [[Configurable]]: false\r\n};\r\n<\/pre>\n
2.1.2 Named Accessor Properties<\/h4>\n
While Named Data Properties were composed by a name and a value associated directly to it, a Named Accessor Property is formed by a name and one or two accessor function which would be getters<\/em> or setters<\/em> associated indirectly to it. <\/p>\n
In this case, except for the two general attributes, there are two more added, which are Get<\/code> and Set<\/code>. Get<\/code> is a function object which is called every time for retrieving indirect value related with the property name, while, understandably, Set<\/code> does is the function object who does the setting of the value associated with the property name. Take a look:<\/p>\n
properties.js<\/em><\/span><\/p>\n
 \r\nvar myvar = {\r\n \r\n  get wcg () {\r\n    return 20;\r\n  },\r\n \r\n  set wcg (value) {\r\n    console.log(value);\r\n  }\r\n \r\n};\r\n\r\nvar defaultAccessorPropertyAttributes = {\r\n  [[Get]]: undefined,\r\n  [[Set]]: undefined,\r\n  [[Enumerable]]: false,\r\n  [[Configurable]]: false\r\n};\r\n<\/pre>\n
This is how we have defined a named accessor property and below there are the default values of it’s attributes. If we tried to overwrite wcg<\/code>‘s value, say using this line of code myvar.wcg = 100;<\/code>, we wouldn’t be able to do it, since the Set<\/code> value is empty. <\/p>\n
2.2 Internal Properties<\/h3>\n
Objects can have a number of internal properties which are part of the implementations and not accessible with ECMAScript programs. These properties are enclosed by double square brackets (i.e [[Writable]]). For these properties there are a number of extra attributes except for the two general ones. <\/p>\n
Some of the most used ones are:<\/p>\n