Methods & a First Look at this

Objects can hold facts: name, score, rank. They can also hold behavior. A method is a function stored on an object, and the first rule of this is the one you will use constantly: in object.method(), this is the object before the dot.

Methods are function properties

You already know that object properties can hold any value. A property can hold a function value too. When you call that function through the object, you call a method.

const player = {
  name: "Mina",
  score: 18,
  label: function () {
    return `${this.name}: ${this.score} points`;
  },
  addPoints(points) {
    this.score = this.score + points;
    return this.score;
  },
};
 
console.log(player.label());
console.log(player.addPoints(4));
console.log(player.label());

→ Mina: 18 points, then 22, then Mina: 22 points.

label uses the long spelling: a property named label whose value is a function. addPoints uses method shorthand: addPoints(points) { ... }. Both create methods.

Inside both methods, this means "the object this method was called on." In player.label(), the object before the dot is player, so this.name reads player.name. In player.addPoints(4), this.score updates player.score.

Method shorthand is the normal spelling for methods in modern JavaScript. The long label: function () { ... } spelling still matters because it makes the relationship visible: a method is still a function stored in a property.

this follows the call

The easiest wrong model is "a method remembers the object where it was written." JavaScript does something more flexible: this is chosen when the function is called.

const player = {
  name: "Mina",
  score: 18,
  label() {
    return `${this.name}: ${this.score}`;
  },
};
 
const other = {
  name: "Rae",
  score: 12,
  label: player.label,
};
 
console.log(player.label());
console.log(other.label());

→ Mina: 18, then Rae: 12.

That is why the spelling of the call matters. player.label() supplies player as the receiver. other.label() supplies other as the receiver. The function body is the same, but this.name and this.score are read from the object that made the call.

This lesson stops there on purpose. JavaScript has more ways to call functions, and lesson 10.3 teaches the deeper this rules. For now, keep the useful rule sharp: when you see object.method(), look left of the dot.

Try it — move the receiver

Run this, then change the first console.log(active.describe()) to console.log(archived.describe()). At the › prompt, try active.describe() and archived.describe().

Both objects use the same function value. The output still changes because each call has a different receiver before the dot.

Arrows do not make methods

Arrow functions are excellent for small callbacks and transformations. They are not the right spelling for a method that needs this, because arrow functions do not have their own this.

Use a surrounding method to make that visible without relying on top-level browser or Node differences:

const workshop = {
  name: "Workshop",
  makePlayer(playerName) {
    return {
      name: playerName,
      regularLabel() {
        return `${this.name} card`;
      },
      arrowLabel: () => `${this.name} card`,
    };
  },
};
 
const card = workshop.makePlayer("Mina");
 
console.log(card.regularLabel());
console.log(card.arrowLabel());

→ Mina card, then Workshop card.

card.regularLabel() is a normal method call, so this is card. That gives "Mina card".

card.arrowLabel() has the same call shape, but the arrow function ignores that receiver because arrows do not create their own this. The arrow was created while workshop.makePlayer("Mina") was running, and inside that method this was workshop, so the arrow reuses workshop as this.

The practical rule is simple: if a function lives on an object and reads or writes this, use method shorthand or a regular function expression. Use arrows for callbacks and small value transformations, not for this-based methods.

Keep this close to the dot

Destructuring from 7.2 is useful for data properties:

const player = {
  name: "Mina",
  score: 18,
  label() {
    return `${this.name}: ${this.score}`;
  },
};
 
const { name, score } = player;
 
console.log(name);
console.log(score);
console.log(player.label());

→ Mina, 18, then Mina: 18.

For methods that use this, keep the call attached to the object: player.label(). Later you will learn how to intentionally control this in detached calls. Right now, the clean habit is to preserve the dot when the method needs object data.

You now have the first useful this model: methods are functions on objects, and object.method() makes this point at the object before the dot. Next, 7.4 slows down and explains why object variables behave like references, why aliases surprise people, and how copying really works.