See the Pen thecodelog.com - JS Object 2 1 by Deano (@deangilewicz) on CodePen.
The Object constructor creates an object wrapper for the given value. If the value is null or undefined, it will create and return an empty object, otherwise an object of a type that corresponds to the given value will be returned. If the value is an object already, it will return the value.
See the Pen thecodelog.com - JS Objects 2 2 by Deano (@deangilewicz) on CodePen.
The Object constructor has four property descriptors that describe a property on an object – configurable, enumerable, value, writable.
To view an object’s property descriptors we can use the Object.getOwnPropertyDescriptor() method to return a property descriptor for a named property on an object.
See the Pen thecodelog.com - JS Objects 2 3 by Deano (@deangilewicz) on CodePen.
The Object.getOwnPropertyDescriptors() method can be used to return an object containing all of the objects property descriptors.
See the Pen thecodelog.com - JS Objects 2 4 by Deano (@deangilewicz) on CodePen.
Although generally you wouldn’t use a manual approach to alter an object, it is possible to modify one or more of the descriptor characteristics from its default behavior. To do this, the Object.defineProperty() method or Object.defineProperties() method can be used to add named properties by given descriptors.
See the Pen thecodelog.com - JS Objects 2 5 by Deano (@deangilewicz) on CodePen.
When the writable descriptor is set to false for a property on an object then this property is not able to be updated. Beware, JavaScript does not throw an error but fails silently if strict mode is not used.
See the Pen thecodelog.com - JS Objects 2 6 by Deano (@deangilewicz) on CodePen.
Once the configurable descriptor is set to false it cannot be set to true again. Changing configurable to false is a one-way action, and cannot be undone.
See the Pen thecodelog.com - JS Objects 2 7 by Deano (@deangilewicz) on CodePen.
Setting the configurable descriptor to false also prevents the ability to use the delete operator to remove an existing property.
See the Pen thecodelog.com - JS Objects 2 8 by Deano (@deangilewicz) on CodePen.
The enumberable descriptor will determine whether a property will show up in certain object property enumerations such as a for..in loop. When set to false, the property will not show up in enumberable operations but will still be accessible.
See the Pen thecodelog.com - JS Objects 2 9 by Deano (@deangilewicz) on CodePen.
When properties or objects cannot be changed we refer to them as immutable.
Shallow immutability only affects the object’s direct property characteristics.
See the Pen thecodelog.com - JS Objects 2 10 by Deano (@deangilewicz) on CodePen.
The Object.preventExtensions() method can be used to prevent an object from having new properties added to it while leaving the rest of the object’s properties alone.
See the Pen thecodelog.com - JS Object 2 11 by Deano (@deangilewicz) on CodePen.
The Object.seal() method takes an existing object and calls Object.preventExtensions(..) on it and also marks all its existing properties as configurable false, which means that they cannot be deleted.
See the Pen thecodelog.com - JS Objects 2 12 by Deano (@deangilewicz) on CodePen.
To obtain the highest level of immutability the Object.freeze() method can be used. This method takes an existing object and calls Object.seal(..) on it so properties cannot be deleted and also marks all data accessor properties as writable:false, so that their values cannot be changed.
See the Pen thecodelog.com - JS Objects 2 13 by Deano (@deangilewicz) on CodePen.
In order to deep freeze an object, the Object.freeze(..) method can be called recursively iterating over all object references.
See the Pen thecodelog.com - JS Objects 2 14 by Deano (@deangilewicz) on CodePen.
There are three native ways to iterate over an object:
The for..in loop traverses all enumerable properties of an object and its [[Prototype]] chain.
See the Pen thecodelog.com - JS Objects 2 15 by Deano (@deangilewicz) on CodePen.
A conditional can be used to ensure the prototype chain is not consulted during the iteration.
See the Pen thecodelog.com - JS Objects 2 16 by Deano (@deangilewicz) on CodePen.
The Object.keys() method returns an array with all of the objects enumerable properties without consulting its [[Prototype]] chain.
See the Pen thecodelog.com - JS Objects 2 17 by Deano (@deangilewicz) on CodePen.
The Object.getOwnPropertyNames() method returns an array containing the names of all of the object’s own properties whether they are enumerable or not.
See the Pen thecodelog.com - JS Objects 2 18 by Deano (@deangilewicz) on CodePen.