Adding methods to JavaScript objects

A method is a function call that is part of an object and can perform various tasks, as any other function could, that you want to execute with the properties of the object.


function HowMuchIf() {
	var ThePrice = 1000;
	if(this.CPU == "i7") {
		ThePrice += 100;
		}
	else {
		ThePrice += 50;
		}
	
	if(this.RAM == "16GB") {
		ThePrice += 50;
		}
	else {
		ThePrice += 25;
		}
	
	if(this.SSD == "256GB") {
		ThePrice += 150;
		}
	else {
		ThePrice += 100;
		}
		
	return ThePrice;
}

This function is quiet long, let’s shorten it with the conditional operator.


function HowMuchIf() {
	var ThePrice = 1000;
	ThePrice += (this.CPU == "i7") ? 100 : 50;
	ThePrice += (this.RAM == "16GB") ? 50 : 25;
	ThePrice += (this.SSD == "256GB") ? 150 : 100;
	return ThePrice;
}

Next step is to assign the function to the object within the object constructor function.


function MyCustomizedComputer (CPU, RAM, SSD) {
	this.CPU=CPU;
	this.RAM=RAM;
	this.SSD=SSD;
	this.HowMuch=HowMuchIf;
}

The above code defines a method named HowMuch that calls the HowMuchIf() function.
When the function is called the parentheses are not used.
That’s because we want the function itself not the result of it. This is how the function becomes a method of the object.

Next step is to create an instance of the object.


var DanComputer = new MyCustomizedComputer ("i5", "8GB", "120GB");
var SoniaComputer = new MyCustomizedComputer ("i7", "16GB", "256GB");
var GamingComputer = new MyCustomizedComputer (DanComputer.CPU, SoniaComputer.RAM, DanComputer.SSD);

Up to now we have the function HowMuchIf() that creates HowMuch method of the MyCustomizedComputer object, the HowMuch method within the MyCustomizedComputer object, and three instances of the MyCustomizedComputer object.

To find the value of DanComputer we have to call HowMuch method.
We use the same method for the other two instances.


var DanComputer_value = DanComputer.HowMuch();
var SoniaComputer_value = SoniaComputer.HowMuch();
var GamingComputer_value = GamingComputer.HowMuch();

Now we need to print this on the screen so we can see the price of these computers.


document.write (DanComputer_value);
document.write (SoniaComputer_value);
document.write (GamingComputer_value);

So, what we have at the end is the following:


//The function that is used as a method
function HowMuchIf() {
	var ThePrice = 1000;
	ThePrice += (this.CPU == "i7") ? 100 : 50;
	ThePrice += (this.RAM == "16GB") ? 50 : 25;
	ThePrice += (this.SSD == "256GB") ? 150 : 100;
	return ThePrice;
}

/*
The constructor function which makes the above function a method function
MyCustomizedComputer              ... is an object
HowMuch                           ... is a method
HowMuchIf                         ... is a function method
*/

function MyCustomizedComputer (CPU, RAM, SSD) {
	this.CPU=CPU;
	this.RAM=RAM;
	this.SSD=SSD;
	this.HowMuch=HowMuchIf;
}

/*
These are instances of MyCustomizedComputer object
*/

var DanComputer = new MyCustomizedComputer ("i5", "8GB", "120GB");
var SoniaComputer = new MyCustomizedComputer ("i7", "16GB", "256GB");
var GamingComputer = new MyCustomizedComputer (DanComputer.CPU, SoniaComputer.RAM, DanComputer.SSD);

/*
Use the method HowMuch (which is the result of HowMuchIf function) to find the value of DanComputer
The same applies for the other two instances
*/

var DanComputer_value = DanComputer.HowMuch();
var SoniaComputer_value = SoniaComputer.HowMuch();
var GamingComputer_value = GamingComputer.HowMuch();

//Print on the screen
document.write (DanComputer_value);
document.write (SoniaComputer_value);
document.write (GamingComputer_value);

Leave a Reply