JavaScript — Object Methods

Objects can contain functions

A property holding a function is a method:

const user = {
    name: "Alice",

    greet() {
        console.log("Hello");
    }
};

user.greet();

this — the current object

Inside a normal method, this is the object before the dot:

const user = {
    name: "Alice",

    greet() { console.log(`Hello ${this.name}`); }
};

user.greet();   // "Hello Alice"

Methods can read AND write properties through this:

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

Arguments and returns work like any function:

const rectangle = {
    width: 10, height: 5,
    area() { return this.width * this.height; }
};
rectangle.area();   // 50

Getters & setters — property-like methods

const user = {
    firstName: "Ada",
    lastName: "Lovelace",

    get fullName() { return `${this.firstName} ${this.lastName}`; },

    set username(v) { this.firstName = v.trim(); }
};

user.fullName;          // "Ada Lovelace"  ← NO parentheses
user.username = "  Bo "; // setter intercepts assignment
user.firstName;         // "Bo"

Getters compute on access; setters validate/transform on assignment.

Arrow functions break this

Arrows don't get their own this — they inherit the outer scope's:

const user = {
    name: "Alice",
    greet: () => console.log(this.name)   // undefined! not user.name
};

For object methods, use shorthand syntax, never arrows.

Method borrowing with call/apply/bind

function greet() { console.log(`Hello ${this.name}`); }

const user = { name: "Alice" };
greet.call(user);              // "Hello Alice"

function introduce(age) { console.log(`${this.name} is ${age}`); }
introduce.apply(user, [25]);   // apply takes args as array

const boundGreet = greet.bind(user);   // permanently fixed this
boundGreet();

Method	this	arguments
call	chosen	listed individually
apply	chosen	array
bind	fixed forever	listed

Nested data access

const store = {
    product: { name: "Laptop", price: 70000 },
    showProduct() {
        console.log(this.product.name);
    }
};
store.showProduct();

Method chaining via return this

const builder = {
    value: 0,
    add(n) { this.value += n; return this; }
};

builder.add(5).add(10).add(20);
builder.value;   // 35

The detached-method gotcha

const greet = user.greet;
greet();   // this is undefined — context lost!

Fix by binding:

const boundGreet = user.greet.bind(user);

Common mistakes: arrows as object methods (broken this); calling handler() inside addEventListener instead of passing it; forgetting getters have no parentheses.

Mini Practice

1. Calculator object with add/subtract/multiply methods.
2. User with greet() reading name via this; add rename(newName).
3. Getter for fullName; setter that trims input.
4. Counter incrementing through a method.
5. Experiment with call(), apply(), bind().
6. Build a chainable builder returning this.
7. Detach a method, watch it break, fix with bind().