JavaScript Object Methods

In previous chapter you learn about object properties, in this chapter you will learn about object methods, how to create object methods.

The actions that can be perform on objects are called JavaScript Object methods.

Basically a JavaScript method is a property of an object with function definition as value.

var car = {
    make : 'Audi',
    model : 'A4',
    year : '2007',
    manufacturer : function() {
        return this.make+' '+this.model;
    }
};

Access Object Methods

You can create an object method using below syntax.

Syntax

 methodName : function() { code lines } 

Like object properties, object methods are also accessible using dot(.) with object name.

car.manufacturer()

Since methods are one type of property, manufacturer() is describe as an object method and manufacturer is describe as object property.

When manufacturer property will execute as a function when it is invoke using ().

Below example accesses the manufacturer() method of a car object.

<!DOCTYPE html>
<html>
<body>

Define and use of object methods.

<p id="text"></p>

<script>
var car = {
    make : 'Audi',
    model : 'A4',
    year : '2007',
    manufacturer : function() {
        return this.make+' '+this.model;
    }
};

document.getElementById("text").innerHTML = 'Car make-model : ' + car.manufacturer();
</script>

</body>
</html>

Download the code Run the code

If somehow the manufacturer property is access without () than it returns function definition.

<!DOCTYPE html>
<html>
<body>

Define and use of object methods.
When () is missed, it will return function definition.
<p id="text"></p>

<script>
var car = {
    make : 'Audi',
    model : 'A4',
    year : '2007',
    manufacturer : function() {
        return this.make+' '+this.model;
    }
};

document.getElementById("text").innerHTML = car.manufacturer;
</script>

</body>
</html>

Download the code Run the code

Built-in methods

There are many inbuilt methods available with default objects. For example below code uses toLowerCase() method of a String object to convert text to lower case.

<!DOCTYPE html>
<html>
<body>

There are many built in methods available
<p id="text"></p>

<script>
var manufacturer = 'Audi A4';
var lower = manufacturer.toLowerCase();

document.getElementById("text").innerHTML = lower;
</script>

</body>
</html>

Download the code Run the code

The value of variable lower after string operation will be:

audi a4

Add new methods

Object Methods are define in constructor function.

<!DOCTYPE html>
<html>
<body>

There are many built in methods available
<p id="text"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
    this.changeMake= function(make) {return this.make=make;};
}

var car = new Vehicle('BMW', '116', '2005', 'Red');
document.getElementById("text").innerHTML = 'Car make is '+ car.changeMake('Toyota');
</script>

</body>
</html>

Download the code Run the code

You will learn more about methods in next chapter Object Prototype. For example how to add new methods to an existing object and how to add new methods after prototype constructor function is defined.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .