JavaScript Objects and its secret associates
Tags: javascript
Published: 2023-08-20 20:48:00

An _Object_ in JavaScript is an unordered collection of properties having a _name_ and a _value_. Objects are usually mutable, as the variables or [identifiers](https://developer.mozilla.org/en-US/docs/Glossary/Identifier) that store an object is a reference rather than the value.
```
let a = { x: 1 };
let b = a;
b.x = 2;
console.log(a.x); // equals 2
``` 

## The 2 types of properties in an object
The common property that is usually used in an object is a **_data property_** like the one in the example above. Data property _names_ can be either _strings_ or _[Symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)_ and the value can be anything. When a value is a function then the property is called a _method_. 

The other type of property is an **_accessor property_**. This does not have a single value like data property but instead have one or two accessor methods known as a _getter_ or _setter_. The getter is invoked when reading the value and the setter is invoked when setting the value.
```
let x = {
    // data property
    propName: value,

    // accessor property containing a pair of accessor functions.
    get accessorProp() { return this.propName; },
    set accessorProp(value) { this.propName = value; }
};
```

## Data property's associates
Each data property has three associate property attributes apart from a name and a value. 
- The _writable_ attribute 
- the _enumerable_ attribute 
- the _configurable_ attribute 

These property attributes tells you how that property will behave.

## Accessing properties and attributes
 
The property's value, the getter, the setter and its attributes are stored in a data record called the _property descriptor_. There is also a method to expose all that is in a property descriptor and it is [Object.getOwnPropertyDescriptor()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) and in order to create new property on an object or modify the property in the descriptor the method [Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) is used.
```
const shoe = {}; // Creates a new object

// Example of an object property added
// with defineProperty with a data property descriptor
Object.defineProperty(shoe, "size", {
  value: 41,
  writable: true, //indicating that the property can be changed with an assignment
  enumerable: true,//boolean value indicating that if the property can be enumerated by for...in loop
  configurable: true,//indicating if the property can be deleted, or changed to accessor property or can have its attributes changed
});
```

## The other object in an object

 Apart from Objects own properties, almost all objects inherits the properties of another object called `prototype` referred to as **`Object.prototype`**. 

The prototype of Object.prototype is always null and not changeable and is the only object in JavaScript that do not have a prototype.

The properties or methods that are inherited from Object.prototype include the commonly used toString() and hasOwnProperty()(which is now deprecated). 

One of the controversial Object.prototype property is [`__proto__` ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) which is also deprecated, which exposes the value of an Objects internal Prototype and allows it to be set to a different value and is quite different from a [Prototype setter `__proto__`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#prototype_setter). 

The whole list of [Object.prototype properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#object_prototype_properties) can be seen in the MDN documentation. 

In the forth coming blogs I want to touch upon the advantages and disadvantages of these hidden associates and its impact on security.