Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Objects

JavaScript Object Methods

Written by Published

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

Example

javascript

const person = {
  name: "Ada",
  greet: function () {
    return "Hello " + this.name;
  }
};

console.log(person.greet());

The output is Hello Ada.

What is a Method?

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

Syntax

javascript

const object = {
  method() {
    return this.property;
  }
};

The short form leaves out the word function.

Shorthand Syntax

Modern code usually leaves out function entirely.

Example

Example

javascript

const person = {
  name: "Ada",
  greet() {
    return "Hi " + this.name;
  }
};

console.log(person.greet());

This does exactly the same job in fewer characters.

Methods Using Other Properties

A method can read anything on its own object.

Example

Example

javascript

const rect = {
  width: 4,
  height: 5,
  area() {
    return this.width * this.height;
  }
};

console.log(rect.area());

The output is 20.

Methods Calling Methods

Use this to call another method on the same object.

Example

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.

Do Not Use an Arrow Here

An arrow function has no this of its own.

As an object method it cannot see the object, so the property is undefined.

Example

Example

javascript

const person = {
  name: "Ada",
  good() {
    return this.name;
  }
};

console.log(person.good());

Written as an arrow, this would give undefined.

Adding a Method Later

A method can be added after the object is created.

Example

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

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>

Try It Yourself

Run the above example in the Try It Editor.

Try depositing twice:

Call deposit a second time and see the balance grow.

Important Points

  • A method is a function stored as a property.
  • this refers to the object the method was called on.
  • The shorthand form leaves out the word function.
  • Methods can call other methods through this.
  • Never use an arrow function as an object method that needs this.

Conclusion

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.

PreviousJavaScript ObjectsNextJavaScript Object keys and values