What is Object in Javascript? Object Properties and The this keyword

What is Javascript Object

Lets start with real object to understand javascript object. Real objects are horse, car, computer etc. Each object has some properties and methods. For example, horse has

Properties: 

• horse.color
• horse.height
• horse.weight

Methods: 

• horse.run()
• horse.eat()
• horse.sleep()

All horses have same properties and methods. However, value of property and methods to interact with properties may be different.

You know that a variable store a single value of any type like String, Number, Boolean. Javascript object can have many values of different data types.

Declare object in Javascript

Object values are comma separated and are enclosed with curly braces. Below is the simple definition of student object. Student properties are written as key value pair with colon (:) between them. In javascript ES7, semicolon (;) at the end of expressions is optional.

var student = {

    name:'John',

    rollNo: 321,

    gender: 'Male'

}

You can see output at console as

console.log(student)

Output:{ name: 'John', rollNo: 321, gender: 'Male' }

Access and change object properties

You can get and change student properties by using dot (.) operator. Below example show only student name.

console.log(student.name)

Output: John

Now we will change student name and rollNo.

student.name = 'Wicky'

student.rollNo = 658

console.log(student)

Output: { name: 'Wicky', rollNo: 658, gender: 'Male' }

Object Method

Method is a function written as property in object. We will write a method to change object properties. We will pass student name and rollNo to function and function will return updated object. 

var student = {

    name:'John',

    rollNo: 321,

    gender: 'Male',

    show: function(sName, sRollNo){

        this.name = sName

        this.rollNo = sRollNo

        return this

    }

}

Call show method and store returned updated object in a variable std.

var std = student.show('Wicky',546)

console.log(std.name)

console.log(std.rollNo)

Output: 

Name: Wicky

Roll No: 546

The this Keyword in javascript

When object properties and methods are accessed by object name as student.name, student.rollNo, student.show( -- ), the reference of object is passed along with other parameters. You can get this reference by using keyword "this". 
this keyword refers to the current object.

In below example, we are calling show method of object student. Inside show method, we display keyword "this" on console.

var student = {

    name:'John',

    rollNo: 321,

    gender: 'Male',

    show: function(){

        console.log(this)

    }

}

student.show()

Output:

{ name: 'John',
  rollNo: 321,
  gender: 'Male',
  show: [Function: show] }

As this keyword refers to the current object, so it display object properties at output.

You cannot access object property inside methods without this keyword. Below example gives error at output.

var student = {

    name:'John',

    rollNo: 321,

    gender: 'Male',

    show: function(){

        console.log(name)

    }

}

student.show()

Output Error: ReferenceError: name is not defined

Array of Objects

You can create any array of objects. In this example, we will create an array of student's object. Each object is enclosed with curly braces separated by comma (,). In each object, properties as name, rollNo and gender are separated by comma (,).

var stdObjArray = [

    {

        name: 'John',

        rollNo: 111,

        gender: 'Male'

    },

    {

        name: 'Harry',

        rollNo: 112,

        gender: 'Male'

    },

    {

        name: 'Olivia',

        rollNo: 113,

        gender: 'Female'

    }

]

Now we will access student properties from array. We will use Array.Foreach loop to iterate each element of array. Note that here array elements are objects. So in each iteration, we will get object student, than we will get its properties using dot (.) operator.

stdObjArray.forEach((std) => {

    console.log(

        'Name: '+std.name+

        'Roll No: '+std.rollNo+

        'Gender: '+std.gender)

})

Output:

Name: JohnRoll No: 111Gender: Male
Name: HarryRoll No: 112Gender: Male
Name: OliviaRoll No: 113Gender: Female

Passing Object to a function

Whenever an object is passed to a function as parameter, its copy is not passed. Rather its reference is passed as object is reference data type. So it called function make changes in the object's properties, these changes will reflect to the actual object.

On the other hand, variables of type string, numbers, boolean are passed by value to function. It means that when a variables is passed to a function, its new copy is generated which is used by the called function. So it called function make changes in variable value, these changes does not reflects to the actual variable value.

In below example, we will pass an object and a variable to a function "change" as parameters. Function will just change the object property and variable. Than after calling function, we will display object property and variable.

Object person and a variable day

var person = {

    name: 'Harry',

    age: 25

}

var day = 'Sunday'

Change function will change person object name from 'Harry' to 'Jack' and day from 'Sunday' to 'Friday'.

var person = {

    name: 'Harry',

    age: 25

}

var day = 'Sunday'

var change = (object, today) => {

    object.name = 'Jack'

    today = 'Friday'

}

Now we will call the function and display person name and day as

change(person,day)

console.log(person.name)

console.log(day)

Output

Person Name: Jack
Day: Sunday

You can see that actual person name is changed but day value is same. The reason is just pass by value and pass by reference. Objects, classes, arrays are passed by reference which means that reference of original parameter is passed. String, boolean, numbers are passed by value which means that a new copy of that variable is passed to function.