JavaScript Objects
A JavaScript object method is a function stored as a property of an object.
A method is just a function that belongs to an object.
Inside it, this refers to the object it was called on.
Example
javascript
const person = {
name: "Ada",
greet: function () {
return "Hello " + this.name;
}
};
console.log(person.greet());The output is Hello Ada.
A method is a property whose value is a function.
It is called with the object name, a dot, the method name, and brackets.
this inside the method refers to the object before the dot.
Syntax
javascript
const object = {
method() {
return this.property;
}
};The short form leaves out the word function.
Modern code usually leaves out function entirely.
Example
javascript
const person = {
name: "Ada",
greet() {
return "Hi " + this.name;
}
};
console.log(person.greet());This does exactly the same job in fewer characters.
A method can read anything on its own object.
Example
javascript
const rect = {
width: 4,
height: 5,
area() {
return this.width * this.height;
}
};
console.log(rect.area());The output is 20.
Use this to call another method on the same object.
Example
javascript
const counter = {
count: 0,
increase() {
this.count++;
return this.report();
},
report() {
return "Count is " + this.count;
}
};
console.log(counter.increase());Both methods share the same this.
An arrow function has no this of its own.
As an object method it cannot see the object, so the property is undefined.
Example
javascript
const person = {
name: "Ada",
good() {
return this.name;
}
};
console.log(person.good());Written as an arrow, this would give undefined.
A method can be added after the object is created.
Example
javascript
const person = { name: "Grace" };
person.greet = function () {
return "Hello " + this.name;
};
console.log(person.greet());Methods are just properties, so they can be added like any other.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Methods</title>
</head>
<body>
<h1>JavaScript Object Methods</h1>
<p id="result"></p>
<script>
const account = {
owner: "Ada",
balance: 100,
deposit(amount) {
this.balance += amount;
return this.balance;
}
};
account.deposit(50);
document.getElementById("result").innerHTML =
account.owner + " has " + account.balance;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try depositing twice:
Call deposit a second time and see the balance grow.
this refers to the object the method was called on.function.this.this.Object methods let data and the behaviour that works on it live together.
this is what connects a method to its own object.
This is the pattern classes build on later.