Methods & this

Methods are functions that belong to objects

In Object basics, objects held data, such as names, scores, and settings. Each piece of data sits in a property: a name with a value. A property can also hold a function. A function stored in an object property is called a method.

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

Line 3 stores a function in the property bark. Line 4 uses this.name. It reads the name of the object that called the method. Line 8 calls the method through dog. So this is dog, and the program prints Pixel says woof.

Why not write dog.name on line 4? Because one function can be shared by many objects. dog.name would always read the dog's name, even when another object calls the function. The special word this means "the object this method is working on right now".

1function greet() {2  return "Hi " + this.name;3}4 5const asha = { name: "Asha", greet };6const rae = { name: "Rae", greet };7 8console.log(asha.greet());9console.log(rae.greet());

Line 1 makes one plain function, greet. Line 2 doesn't name Asha or Rae. Lines 5 and 6 store that one function on two objects. Writing greet alone inside the braces is short for greet: greet.

Line 8 calls the function through asha, so it prints Hi Asha. Line 9 calls it through rae, so it prints Hi Rae.

1const cart = {2  items: 0,3  addTea() {4    this.items = this.items + 1;5    return this.items;6  },7};8 9console.log(cart.addTea());

Line 4 adds 1 to items on the cart that made the call. Line 9 calls the method through cart, so it prints 1. This is a common job for a method. The object keeps its data and the action that changes that data in one place.

This lesson teaches one main rule. When you call a method as object.method(), this is the object before the dot. JavaScript chooses it at the moment of the call.

There are more rules for this, and Stage 4 has a full module on them. It covers call, apply, and bind, which set this by hand, plus what this is outside any object and more strict-mode details.

Most methods are written in a shorter way, called method shorthand. Instead of bark: function () { ... }, you write bark() { ... }. For everyday calls, both work the same. Both store a regular function in the bark property.

There is one small difference for later. You can't use a shorthand method with new. You'll meet new in the next lesson, Constructors & new.

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};

Line 3 is the old style. Line 10 is the shorthand. The shorter spelling is not the important part. The important part is how the method reads data from its object. In both, this.name means "the name property of the object using this method right now".

1const user = {2  name: "Asha",3  greet() {4    return "Hi " + this.name;5  },6};7 8console.log(user.greet());

Line 3 makes a method named greet. Line 4 reads the name of the object that called it. Line 8 calls it through user, so it prints Hi Asha. Use a shorthand method when an action needs other properties of the same object.

• A method can return a value, change its object, or do both.
• Use a regular method when it reads this.name, this.total, or another property of the same object.
• If a helper needs no data from an object, a plain function is usually clearer.

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: look at the call itself. 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 gets 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();

Now try the third choice, "Saved copy". Line 9 saves the function in a new variable, speak. Line 10 calls speak(). That call has no dot, so there is no object before a dot.

The code starts with "use strict". That line turns on strict mode, a stricter set of JavaScript rules. Code in JavaScript modules, like the code on this site, always runs in strict mode. In strict mode, a call with no object gives this the value undefined. Reading this.name then throws a TypeError: the error JavaScript throws when you use a value in a way it can't be used.

1const app = {2  user: {3    name: "Lin",4    introduce() {5      return "Hi " + this.name;6    },7  },8};9 10console.log(app.user.introduce());

The call on line 10 is app.user.introduce(). It has two dots. The object right before introduce is app.user, not the outer app. So this is app.user, and line 10 prints Hi Lin.

You met arrow functions, like () => 1, in the Arrow functions lesson. An arrow function has no this of its own. Inside an arrow, this means whatever this meant in the code around it. That helps in one place and hurts in another:

• Helpful: an arrow inside a method keeps the method's this.
• Not helpful: an arrow used as the method doesn't get the object as this when you call object.method().

The table below compares four ways to put a function on an object. Read each row as: "if I write this, is this the object, and when should I use it?"

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());

Line 3 is a regular method, so line 9 calls it with user as this and prints Mina. Line 6 is an arrow. It doesn't get user as this. It uses the this from the code outside the object, which has no name. In this example, line 10 prints undefined.

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(", "));

Line 4 makes a regular method, labels(). Line 5 uses map. map runs a function once for each item in an array and collects the results in a new array.

The function given to map is an arrow. The arrow has no this of its own, so it uses the this of labels(), which is team. Line 9 joins the results with join(", ") and prints Team: Ada, Team: Lin. The arrow is inside the method; it is not the method itself.

Callbacks are the other common way to lose this. A callback is a function you give to other code, so that code can call it later. For example, setTimeout(fn, 1000) calls fn after 1000 milliseconds, which is one second.

If you pass timer.announce to setTimeout, you pass only the function. Later, setTimeout calls that function on its own, not as timer.announce(). So the function no longer gets timer as this. A simple fix is an arrow wrapper: () => timer.announce(). In Stage 4 you'll also learn bind, another fix.

1const timer = {2  label: "tea is ready",3  announce() {4    return this.label;5  },6};7 8const later = () => timer.announce();9console.log(later());

Line 8 makes a new function, later. It doesn't run announce yet. When line 9 calls later(), the arrow runs timer.announce(). That call has timer before the dot, so this is timer, and line 9 prints tea is ready. Use a wrapper like this for clicks, timers, and other callbacks that run a method later.

Method chaining means calling several methods in one line, one after another, like counter.add(2).add(3).double().read().

It works because each method that changes the object ends with return this. What it returns is the same counter. So the next dot has an object to call a method on.

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 cart = {2  total: 0,3  add(price) {4    this.total = this.total + price;5    return this;6  },7};8 9const sameCart = cart.add(3);10console.log(sameCart === cart);11console.log(cart.total);

Line 5 returns the cart itself, not a copy. Line 9 saves what cart.add(3) returned in sameCart. Line 10 uses === to check whether sameCart and cart are the very same object. It prints true.

The method also changed the cart's total, so line 11 prints 3. So a chain usually changes the original object.

1const counter = {2  value: 1,3  add() {4    this.value = this.value + 1;5    return this;6  },7  read() {8    return this.value;9  },10};11 12console.log(counter.add().read());

Line 5 keeps the chain going: it returns the counter. Line 8 is different: read() returns a number, not the counter. The value starts at 1, and one add() makes it 2. So line 12 prints 2. End a chain with a method like this when you need the final value, for example to show it on the page.

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

You'll use methods wherever an object has both data and actions. For example:

• a form checker that tests what a user typed
• a shopping cart that adds items and adds up the total
• a counter, or a tool that formats dates
• a small object that remembers the state of one part of a page

The object keeps related values together. Its methods are 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());

Line 16 reads like a sentence: add a word, add another word, shout, then read. On line 8, toUpperCase() turns the text into capital letters. On line 12, trim() removes the extra space at the end. The program prints METHODS CLICK.

It works because of the same small rule. Each method that changes the text uses this for the current object. Then it returns this for the next call.

• Use a method when an action belongs with one object's data, such as cart.add(price).
• Let a read method such as read() only return a value. It shouldn't also change the object.
• To update a page, call one named method, such as profile.rename(name). Don't change the same properties from many places in your code.
• Don't make a method just to hold a calculation that doesn't use the object. A plain function is easier to test and reuse.

Common misconceptions

Each choice comes with a short explanation. For code questions, find the object before the dot first.

Key takeaways

• A method is a function stored in an object property.
• Method shorthand, greet() { ... }, is the usual way to write a method.
• In obj.method(), this is obj. JavaScript chooses it when the call happens.
• A saved copy, or a callback passed on its own, loses the object before the dot. An arrow wrapper, or bind, fixes that.
• Methods that continue a chain return this. The last method in a chain returns the value you need.

Up next: Constructors & new.