JavaScript Objects And Property Attributes

This blog will show you how to create properties on Object and teach you some advance work with Object Property Attributes.

Introduction

 

Number, String, Boolean, null, and undefined are simple types of JavaScript, these simple types have methods (object-like) but they are immutable. All other values in JavaScript are objects.

 

JavaScript is an object-oriented language but JavaScript objects are different than other languages.

 

"JavaScript object is a dynamic collection of properties".

 

Objects in JavaScript are mutable keyed collections. A property is a key-value pair where using key string we can get the value.

 

How to create properties on JavaScript

 

Object literal: This is the simplest way of creating objects, we define the properties and their values inside braces.

 

Example:

var car =
{
    brand: 'Audi6',
    color: 'White'
};

Because of the dynamic nature of Objects in JavaScript we can add the property into an object(car) at any time i.e. car.year = 1984. No need to go and changing data type, no need to recompile.

 

Constructor Function:

 

For a scenario where we need to create multiple instances of an object, JavaScript does not have classes like static languages. This is being achieved by using new keywords followed by a function to create an object.

 

Example:

function Car(brand, color)
{
this.brand = brand,
this.color = color
}
var car = new Car('Ferrari', 'Red');

In the above statement we are just adding the properties to this. Here it's important to understand this (referencing alias) keyword which is again an object. That object is whatever object is executing the current bit of code. By default that is the global object in web browse; it is a window object.

 

New keyword here creates an empty JavaScript function that sets the context of this to a new object.

 

Object.Create():

 

This is the what is actually happening down the wire when we createan object using using object literals and constructor functions.

var car = Object.create(Object.prototype,
{ brand : {value :'Mercedes', enumerable:true, writable:true, configurable:true},
color : {value :'Black', enumerable:true, writable:true, configurable:true},
})

ECMA6 Classes: For browsers supporting ECMA6Script features. Looks like similar to static language classes.

 

Example:

class Car
{
constructor(brand, color)
{
this.brand = brand,
this.color = color
}
honk()
{
alert('POooo')
}
}
var car = new Car('Tesla', 'Blue');

Advance work with Object Properties Attributes:

 

In JavaScript we have writable, enumerable, configurable property attributes that can do pretty cool things. Highlighted above while creating a property using Object.Create()

 

Writable: Define when the object property value can be changed from its initial value.

Object.defineProperty(car, 'brand' , {writable: false})
cat.brand = 'XYZ' // throw error in strict mode.

Enumerable: Define that can we loop over the property using a for ..in loop.

 

Configurable: Lock down property from being changed also prevent the property from being deleted from the object.

 

Getter and Setters: Attribute on a property that allows us to specify the return value of a property using function and set the value of a property using a function.

 

Example:

Object.defineProperty(car, fullDetail)
{
    get: function()
    {
        return this.brand + ' ' + this.color
    },
    set: function(value)
    {
        var nameParts = value.split(' ')
        this.brand = nameParts[0]
        this.color = nameParts[1]
    }
})