Skip to main content

JavaScript Classes

JavaScript Class Methods

Written by Published

Class methods are functions shared by every instance of the class.

They are written inside the class body, without function and without commas.

Every instance uses the same function, which is why classes are memory-efficient.

Example

Example

javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hello " + this.name;
  }
}

console.log(new Person("Ada").greet());

The output is Hello Ada.

How Methods Work

A method lives on the class prototype, not on each instance.

this inside a method is the instance it was called on.

Methods are separated by nothing - no commas, unlike an object literal.

Syntax

Syntax

javascript

class Name {
  method() {
    return this.property;
  }
}

No commas between methods.

Methods Take Parameters

They behave like any other function.

Example

Example

javascript

class Account {
  constructor(balance) {
    this.balance = balance;
  }
  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }
}

console.log(new Account(100).deposit(50));

The output is 150.

Calling Another Method

Use this to reach a sibling method.

Example

Example

javascript

class Order {
  constructor(price) {
    this.price = price;
  }
  tax() {
    return this.price * 0.2;
  }
  total() {
    return this.price + this.tax();
  }
}

console.log(new Order(100).total());

The output is 120.

Shared, Not Copied

Both instances use the very same function object.

A method defined in the constructor would be copied for each one.

Example

Example

javascript

class Person {
  greet() {
    return "hi";
  }
}

const a = new Person();
const b = new Person();

console.log(a.greet === b.greet);

The output is true.

Method Chaining

Returning this lets calls be strung together.

Example

Example

javascript

class Counter {
  constructor() {
    this.count = 0;
  }
  up() {
    this.count++;
    return this;
  }
  value() {
    return this.count;
  }
}

console.log(new Counter().up().up().up().value());

The output is 3.

Losing this

Pulling a method out of its object breaks the link to the instance.

bind reattaches it.

Example

Example

javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hello " + this.name;
  }
}

const ada = new Person("Ada");
const greet = ada.greet.bind(ada);

console.log(greet());

Without bind this would throw, because this is undefined.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Class Methods</title>
</head>
<body>

  <h1>Class Methods</h1>

  <p id="out"></p>

  <script>
    class Basket {
      constructor() {
        this.items = [];
      }
      add(name, price) {
        this.items.push({ name: name, price: price });
        return this;
      }
      total() {
        return this.items.reduce(function (sum, item) {
          return sum + item.price;
        }, 0);
      }
    }

    const basket = new Basket().add("Book", 12).add("Pen", 3);

    document.getElementById("out").textContent =
      basket.items.length + " items, total " + basket.total();
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try adding another item:

Chain one more .add(...) and watch both numbers change.

Important Points

  • Methods go inside the class body with no commas.
  • this is the instance the method was called on.
  • Methods live on the prototype and are shared.
  • Returning this allows chaining.
  • A detached method loses this unless it is bound.

Conclusion

Methods are where a class's behaviour lives.

Sharing them on the prototype is what makes classes efficient.

Chaining is a small trick that makes some APIs much nicer to use.