Javascript: Object

Let us discuss in short what objects are in javascript.

Objects in Javascript comes in 2 forms:-

1. Literal Form
2. Constructed Form

The syntax for writing Literal and Constructed Object:-

Literal and Constructed Syntax

Both forms create an Object and the only difference is that:-

With literal syntax, you can add one or more key/value pairs

With Constructed form, you need to add properties one by one

Data types in Javascript:-

string
number
boolean
object
null
undefined

Null is sometimes referred to as object type.

typeOf null // returns “object”. This is a long-lasting bug that persists in JS from the start 😔. However, developers tend to keep it as it is; nevermind

Built-In Object in JS:-

String 
Number 
Boolean
Object
Function
Array
RegExp
Date
Error

Functions are a sub-type of Object. Arrays are also object with extra behavior.

For primitive types (i.e string, number) we can generally call a function or properties eg:- str.length, str.charAt() . JS internally coerce (converts) them into Object

Accessing Properties of Object:-

There are 2 ways of accessing properties:-

1. key access. // myObject.a
2. property access. // myObject[‘a’]

Properties in JS are automatically converted to a string. If we use any other value than string, it is converted to a string

key access can take computed properties i.e expressions.

Property Descriptor:-

All properties of an Object are described in terms of the property descriptor

1. getOwnPropertyDescriptor: will return object properties

var myObject = {a: 2}
Object.getOwnPropertyDescriptor(myObject,'a')
Will return 
{
  value : 2,
  writable: true,
  configurable: true,
  enumerable: true
}

2. defineProperty: will define object properties

var myObject = {}
Object.defineProperty(myObject, 'a', {
 value: 10,
writable: true     // ability to change the value. if false value
                      cannot be changed later
configurable: true // modification of descriptor function. Will let
                      you define / add  more properties. if false
                      cannot add properties use defineProperty or by
                      key / property access way
enumerable: true   // availability for loops eg:- (for..in). if 
                      false, cannot be iterated
}
console.log(myObject) // {a:10}

Sealed and Frozen Object:-

For understanding what is sealed and frozen object, we need to first understand about Object.perventExtensions

Object.preventExtensions: — This implies that additional addition of properties is prevented. You cannot add other properties if Object.preventExtensions is called on the object

var myObject = { a:10}
Object.preventExtensions(myObject)
myObject.b = 10 // will throw an error

Sealed Object:-

This creates a sealed Object (Object.seal(obj)). On sealed Objects, the addition of property is not allowed. It Internally calls Object.preventExtensions().

So, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties (though you can still modify their values).

Frozen Object:-

This creates a frozen Object (Object.freeze(obj)). The Object. freeze method internally calls Object.seal() method and also set writable: false.

This means that you can neither change the value nor add/remove additional properties. In short, creating an Object constant.

This also helps in achieving Object immutability

Getters and Setters: -

Getters: — properties which call hidden function to retrieve the value.

getter function

Setters:- properties which call hidden function to set value.

Iterating over Object:-

1. for … in loop:- iterates over the list of enumerable properties on an object.
2. Object.keys():- will return an array of keys present in an object.
3. Object.entries():- will return an array of [key,value] pair

Hope you liked the article😊😊😊