Javascript Object Methods

Contents hide

JavaScript objects are more like real world objects. Object properties describe the object, where as object methods are more like the behaviour of the object. A method is basically a function of an object. For example:

// creating an object
let spaceship = {};

// adding a method
spaceship.showName = function(){
    console.log("Sytech IV");
    }

// calling a method
spaceship.showName();     // Sytech IV

In the example we created a function and assigned it to the property spaceship.showName of the spaceship object which allowed the spaceship object to show its name to console.

Another way of adding a method to an object is to add it as an object literal. For example:

let spaceship = {
	
	 showName : function(){
         console.log("Sytech IV");
    }
};

spaceship.showName();     // Sytech IV

let spaceship = {
	
	 showName(){
         console.log("Sytech IV");
    }
};

spaceship.showName();     // Sytech IV

Use of `this` in methods

An object can use the this keyword to access values inside it. Let us show this with the following two examples:

Example 1:

let spaceship = {
	
	name: "Sytech IV",
	
	showName(){
		return name;
    }
};

console.log(spaceship.showName()); // ReferenceError: name is not defined

Example 2:

let spaceship = {
	
	name: "Sytech IV",
	
	showName(){
		return this.name;
    }
};

console.log(spaceship.showName()); // Sytech IV

In Example 1, calling spaceship.showName() produced a reference error on return name because no variable name is defined inside the showName() function even though it is defined inside the object. In Example 2, return this.name instructs the method to return the name variable property of the object itself.

This basically means using this.property inside an object is the same as using object.property from the outside. By the same token, a method can also access the property without using this reference but using using external reference. For example:

let spaceship = {
	
	name: "Sytech IV",
	
	showName(){
		return spaceship.name;
    }
};

console.log(spaceship.showName()); // Sytech IV

Now instead of accessing the name through this.name, we used spaceship.name.

Though these two ways might look like we just did the same thing, there are some slight differences:

let spaceship = {
	
	name: "Sytech IV",
	
	showName(){
		return this.name;
    }
};

// copy spaceship to warship
let warship = spaceship;

// destroy spaceship
spaceship = null;

// you can now access warship name as follows
console.log(warship.showName()); // Sytech IV

let spaceship = {
	
	name: "Sytech IV",
	
	showName(){
		return spaceship.name;
    }
};

// copy spaceship to warship
let warship = spaceship;

// destroy spaceship
spaceship = null;

// you cant access warship name now 
console.log(warship.showName()); // TypeError: Cannot read property 'name' of null

"this" is unbound

Unlike in other programming languages, in JavaScript, this keyword is unbound. In other programming languages this is bound to the object from which the method is referencing and no function defined out of an object can have this.

In JavaScript this is unbound and doesn’t depend on where the method was declared, but rather on where the object was called. It can be used in any function even outside an object without error. For example:


function greetMe() { 
	console.log(this.greeting);
	 }

greetMe(); // undefined

Since the value of this is evaluated at call time, it can be anything. The same function can have different this references at different times. For example:

let student = {
	greeting: "Hi there"
	};
	
let teacher = {
	greeting: "Morning class"
	};


function greetMe() { 
	console.log(this.greeting);
	 }
	 
student.greet = greetMe;
student.greet();          // Hi there

teacher.greet = greetMe;
teacher.greet();          // Morning class

The example shows the same function that has different "this" when bound to different objects.

An unbound this gives error in strict mode:

"use strict"

function greetMe() { 
	console.log(this.greeting);
	 }

greetMe();     // TypeError: Cannot read property 'greeting' of undefined

But it doesn’t give an error outside strict mode:

function greetMe() { 
	console.log(this.greeting);
	 }

greetMe();     // undefined

Javascript Object Methods