Methods

So far in this chapter about JavaScript objects, we have focused mostly on properties. However, I also mentioned the fact that properties can contain more complex types, like other objects, or even functions. In other words, we can add functions to our objects quite easily.

Once a function is declared on an object or a class, its referred to as a method. In this article, I'll show you how to add methods to your objects.

Object methods

When you create an object, you can add a method to it simply by declaring a property and assigning a function as its value, like this:

let user = 
{
	name: "John Doe",
	age: 42,
	describe: function() 
	{
	}
};

Notice how I declare a couple of simple properties (name and age), and then a property I call describe, which has a function as its value. Inside of this function, we can easily interact with the properties of the object, using the this keyword. Here's an example of an object with properties and a method:

let user = 
{
	name: "John Doe",
	age: 42,
	describe: function()
	{
		return this.name + " is " + this.age + " years old";
	}
};

alert(user.describe());

The describe property now refers to a complete function, which will use other properties on the object. When using this method in the last line of the example, we just call the method like we would with any other function.

As we saw in the previous article, properties can be added to an object after creating it, and since object methods are just properties referring to functions, this is of course possible with methods as well. Here's a rewritten version of the above example:

let user = 
{
	name: "John Doe",
	age: 42	
};

user.describe = function()
{
	return this.name + " is " + this.age + " years old";
}

alert(user.describe());

Just like any other property, we can add the method simply by referring to the new property name and assigning a value to it (in this case a function).

And just to be completely clear, object methods enjoy the same benefits as regular JavaScript functions, already described in details in a previous chapter. For instance, they can accept any number of parameters, to be used by the method. Here's an example:

let user = 
{
	name: "John Doe",
	age: 42,
	describe: function(country)
	{
		return this.name + " is " + this.age + " years old and currently lives in " + country;
	}
};

alert(user.describe("Germany"));

Method shorthand syntax

In the ES6 specification of JavaScript, they introduced a shorter syntax for declaring object methods. This syntax is more in line with other programming languages, as well as with the syntax used for class methods. It essentially hides the fact that an object method is just a property with a function assigned to it. Here's how it could look:

let user = 
{
	name: "John Doe",
	age: 42,
	describe()
	{
		return this.name + " is " + this.age + " years old";
	}
};

alert(user.describe());

You will notice that with this syntax, we can leave out the function keyword - JavaScript will know that this is a method because of the parentheses following the name. Again, this is just syntactic sugar - it accomplishes the exact same thing as the examples above, so you can just use the syntax you prefer.

Summary

Thanks to the versatile nature of object properties in JavaScript, we can add functions to our objects. Whenever a function is declared on an object or a class, it's referred to as a method, and by doing so, our objects become more than just containers for data - they can actually do something.