Methods and this

So far, the lines of the form have held data: a name, an age, a city. Picture a line that holds not a value but an instruction: "say hello, using the name from this form". The instruction is carried out, and the name is taken from the form it is written on.

A property's value can be anything, a function included. Then the object holds not only data but also an action on it:

const user = {
    name: "Ann",
    greet: function () {
        return `Hi, ${this.name}`;
    }
};

console.log(user.greet()); // Hi, Ann

Let's go through the example:

1. The property greet holds the function written after the colon.
2. Inside the function, this.name reads the name of the object the function was called on.
3. The call user.greet() returns the string Hi, Ann, and console.log prints it.

Methods and this

A property that holds a function is called a method. A method is called through a dot: user.greet(). The parentheses are required: user.greet without them is the function itself, and console.log(user.greet) prints [Function: greet].

The string and array methods you have used work the same way: "abc".toUpperCase() and nums.push(3) are functions called through a dot.

Inside a method, the word this means the object that stands before the dot in the call. In the call user.greet() it is user, so this.name reads its property name.

One function in two objects

The same function can go into two objects. Each call through a dot gets its own object in this, the one before the dot:

function describe() {
    return `${this.name} is ${this.age}`;
}

const ann = { name: "Ann", age: 30, describe: describe };
const bob = { name: "Bob", age: 25, describe: describe };

console.log(ann.describe()); // Ann is 30
console.log(bob.describe()); // Bob is 25

Let's see what lands in this in each call:

1. describe is declared as an ordinary function and put into both objects under the key describe.
2. In the call ann.describe(), ann stands before the dot, and the function returns Ann is 30.
3. In the call bob.describe(), bob stands before the dot, and the same function returns Bob is 25.

Here the instruction analogy stops working. The function describe belongs to no single form: it is one instruction attached to two forms at once. Which object ends up in this is decided not by where the function is written but by the call: the object before the dot.

Interviewers like to ask what this is. For a call through a dot, the answer is always the same: the object that stands before the dot.

A method changes the object

Through this, a method can not only read properties but also change them. A counter works this way: it holds a number and knows how to increase it.

const counter = {
    count: 0,
    increment: function () {
        this.count++;
    }
};

counter.increment();
counter.increment();
console.log(counter.count); // 2

Let's go through it step by step:

1. The object counter holds a number in the property count and a function in the property increment.
2. Each call counter.increment() puts the object counter into this, and this.count++ increases its property by one.
3. After two calls, the property is 2, and the program prints 2.

A method changes the very object it was called on, not a copy of it. The instruction on a form corrects a line of that same form.

Common mistake

Inside a method, a property was used without this:

const counter = {
    count: 0,
    increment: function () {
        count++; // ✗
    }
};

counter.increment();

ReferenceError: count is not defined

The property count is not a variable: inside the method it is not visible by its name alone. JavaScript looks for a variable count, does not find it and stops the program.

The error appears only on the call: while increment is not called, the program runs. A method reads and changes a property of its object through this: this.count++.

Key points

• A method is a property that holds a function; it is called through a dot with parentheses: user.greet().
• In a call through a dot, this is the object that stands before the dot.
• One function in two objects gets in this the object it was called on.
• A method reads and changes a property of its object through this, not by its name alone.