Understanding object in Javascript

Object in javascript are similar with arrays, they able to store multiple value, however the difference is object don't have indexed positions like arrays
and object give a name to every value that you store.

Analogy of object

Object in javascript has similarity with object in real life, both has property and behaviors.

Car property maybe something like:

• Brand
• Model
• Color
• Horse Power
• Transmission Type

Car also has behaviors such as:

• Accelerate
• Turn right
• Turn left
• Turn on Light

Thoose car object inside javascript will looks like this:

    let car = {
        brand:"Toyota",
        model:"Prius",
        color:"silver",
        horsePower:98,
        transmissionType:"AT"
        accelerate:function(){
            // code to accelerate
        }
        turnRight:function(){
            // code to turn right
        }
        turnLeft:function(){
            // code to turn right
        }
        turnOnLight:function(){
            // code to turn on light
        }
        ...
    }

How to create an object

There is two way to create object, first is using object literal, and second one are using new keyword.

// object literal

const car = {
    brand:"Toyota"
}

// new keyword

let car = new Object();
car.brand = "Toyota";

Between the two,object literal are widely use among developer because it's better readability and also faster execution.

Object properties & Method

The key:value pair in javascript object called with properties, there is two ways to access properties either dot notation or square bracket.

// Dot notation

car.brand // Toyota

// Square bracket

car["brand"] // Toyota

// or calling square bracket with variable

const brand = "brand";
car[brand] // Toyota

Then you can change value of properties by set new value using = sign

car.brand = "Honda" // or
car["brand"] = "Honda"

You can also access all object values in a form of arrays using Object.values

const car = {
    brand:"Honda",
    type:"Civic"
}

Object.values(car)

// ["Honda", "Civic"]

To make a method (method is a function that store inside an object) you can add function.

    let person = {
        firstName:"John",
        lastName:"Snow",
        fullName:function(){
            return `${this.firstName} ${this.lastName}`
        }
    }
    person.fullName()
    // John Snow

this keyword refers to the owner of the function, at above example it will be person object, therefore inside fullName() method this.firstName
will refer to person object with firstName property name or similar with person.firstName.