Methods & this

Methods are functions that belong to objects

In Object basics, objects held data: names, scores, settings, and other properties. A property can also hold a function. When you call a function through an object, programmers call it a method.

1const dog = {2  name: "Pixel",3  bark: function () {4    return dog.name + " says woof";5  },6};7 8console.log(dog.bark()); // Pixel says woof

That works, but dog.name is glued to one variable name. If the same function is shared with another object, hard-coding dog is too stiff. JavaScript gives methods a special word, this, for “the object this method is working with right now.”

This lesson keeps to the core rule you need now: for a regular method call shaped like object.method(), this is the object before the dot, chosen when the call happens. The full rule book—call, apply, bind, global values, and strict-mode details—gets its own Stage 4 module.

Most object methods use shorthand. Instead of writing bark: function () { ... }, write bark() { ... }. For everyday calls, they behave the same: both store a regular function in the bark property. One advanced difference is that shorthand methods are not meant to be used with new; constructors are the next lesson.

1const oldStyle = {2  name: "Ada",3  greet: function () {4    return "Hi " + this.name;5  },6};7 8const shorthand = {9  name: "Ada",10  greet() {11    return "Hi " + this.name;12  },13};

The important part is not the shorter spelling. It is the way the method reads nearby data. this.name means “the name property on the object currently using this method.”

1const dog = {Run2  name: "Pixel",3  bark() {4    return this.name + " says woof";5  },6};7 8console.log(dog.bark());

Here is the rule to practice until it feels automatic: look at the actual call. In ada.introduce(), the object before the dot is ada, so this is ada. In lin.introduce(), the object before the dot is lin, so the same function sees a different this.

1"use strict";2function introduce() {Run3  return "Hi, I am " + this.name;4}5 6const ada = { name: "Ada", introduce };7const lin = { name: "Lin", introduce };8 9ada.introduce();

The detached version is deliberately honest. Site modules are strict code, and the displayed snippet starts with "use strict". When the last line is speak(), there is no object before the dot. In strict code, this is undefined, so reading this.name throws a TypeError.

Arrow functions, from the Arrow functions lesson, have no own this. That makes them great inside a method when they should keep the method’s this, and risky as the method itself when you expected object.method() behavior.

1const user = {2  name: "Mina",3  regular() {4    return this.name;5  },6  arrow: () => this.name,7};8 9console.log(user.regular());10console.log(user.arrow());

1const team = {2  prefix: "Team",3  names: ["Ada", "Lin"],4  labels() {5    return this.names.map((name) => this.prefix + ": " + name);6  },7};8 9console.log(team.labels().join(", "));

Callbacks are the other common trap. Passing ada.introduce to something like setTimeout passes the function value by itself. It is no longer called as ada.introduce(). A simple fix is an arrow wrapper: () => ada.introduce(). You will also learn bind in Stage 4.

Method chaining is the pattern behind code such as counter.add(2).add(3).double().read(). Each changing method does its work, then returns this. That hands the same object to the next dot.

1const counter = {Run2  value: 0,3  add(amount) {4    this.value = this.value + amount;5    return this;6  },7  double() {8    this.value = this.value * 2;9    return this;10  },11  read() {12    return this.value;13  },14};15 16counter.add(2).add(3).double().read();

1const counter = {2  value: 0,3  add(amount) {4    this.value = this.value + amount;5    return this;6  },7  double() {8    this.value = this.value * 2;9    return this;10  },11  read() {12    return this.value;13  },14};15 16counter.add(2).add(3).double().read();

Where you’ll use this

Methods show up anywhere an object has both data and behavior: form validators, shopping carts, counters, date formatters, animation builders, and tiny state objects in UI code. The object keeps related values together, and the methods describe the actions that make sense for those values.

1const headline = {2  text: "",3  word(value) {4    this.text = this.text + value + " ";5    return this;6  },7  shout() {8    this.text = this.text.toUpperCase();9    return this;10  },11  read() {12    return this.text.trim();13  },14};15 16console.log(headline.word("methods").word("click").shout().read());

The builder reads like a sentence: add a word, add another word, shout, read. The reason it works is still the same small rule: each mutating method uses this for the current object and returns this for the next call.

Common misconceptions

Every choice explains itself. For code questions, use the dot rule before you answer.

Key takeaways

• A method is a function stored in an object property.
• Method shorthand greet() { ... } is the common way to write regular object methods.
• For obj.method(), this is obj, decided at call time.
• Detached calls and bare callbacks lose the object before the dot; arrow wrappers or bind can fix that.
• Chainable methods return this; final reader methods return the useful value.

Up next: Constructors & new.