JavaScript : Object

Prerequisites

• JavaScript Datatype

Object

An object is a mutable data structure. In JavaScript, it is defined as key-value pairs. Where each pair is called a property. Where a property key could be any valid JavaScript identifier.

Based on property values, properties can be classified into two types,

• data properties

• accessor properties

Data properties include key-value pairs, in which a value could be any valid JavaScript datatype including other objects.

Accessor properties include key-value pairs, in which a value is one of two accessor functions get or set. See the below example,

const employee = {
    // data properties
    name: "Subham",                        
    CTC: 140000,                           

    // accessor properties
    set salary(x){                             // setter 
        this.CTC = x + 20000;
    }
    get salary(){                          
        return (this.CTC - 20000)/12;          // getter
    }
}

console.log(employee.salary) // 12000
employee.salary = 24000
console.log(employee.salary) // 24000

Ways to declare an Object?

1. Object Literal Syntax.

Suppose you want to create an object person that has the following properties firstname and lastname and a method that returns the full name getFullName.

const person = {
   firstname:"Rohan",
   lastname:"Kamal",
   getFullName: function (){
        return this.firstname + this.lastname ;    
   }
}

We can define the method getFullName more simply like below,

{
   //...
   getFullName(){
        return this.firstname + this.lastname    
   }
}

2. Using Constructors

Suppose in the previous example you want to create 1000-person objects having the following properties firstname , lastname and a method that returns the full name getFullName. If we use object literal syntax to create each person object, then we need to define each object like below

//person1
const person1 = {
    firstname: "Alex",
    lastname: "Goa",
    getFullName(){
        return this.firstname + this.lastname;
    }
}

//person2
const person2 = {
    firstname: "Rahul",
    lastname: "Kumar",
    getFullName(){
        return this.firstname + this.lastname;
    }
}

//... and so on upto person1000.

In this way, object literal increases code length. The catch here is that all objects will have same properties. That's where constructors come with a handy approach. They are like object factories.

A constructor is nothing but a Javascript function. But unlike normal functions, we call them using the keyword new. It returns a new object.

function Person(firstname, lastname){
    this.firstname = firstname,
    this.lastname = lastname,
    this.getFullName = function(){
        return this.firstname + this.lastname
    }
}

const person1 = new Person("Rohan", "Kamal");
const person2 = new Person("Abhishek", "Kumar");

Here, person1 and person2 are called instances created using Person constructor or we simply call them instances of Person. Using a constructor we can create as many instances as we want, with less code.

Accessing Properties in Object

We can access Object properties in two ways.

• Dot notation

• Bracket notation

See the example below,

const obj = { name: "Subham" }

// 1. Dot Notation
console.log(obj.name); // get name data property
obj.name = "Alex";     // set name data property

// 2. Bracket Notation
console.log(obj['name']); // get name data property
obj['name'] = "Alex";     // set name data property

With the above two, not only we can access the existing properties of an object, but we can also create new properties.

const obj = { name: "Subham" }

obj.age = 24

console.log(obj) // { name: "Subham", age:24 }

You would be thinking, why two ways? Most of the time we would be using dot notation, but in some cases, dot notation won't work. One such example see below,

const obj = {}

obj["full-name"] = "Subham Sahu";
console.log(obj["full-name"]);

We can not use dot nation in the above case like obj.full-name this will throw a syntax error.

What Next?

• Prototypes

• Classes