JavaScript Object Methods: A Complete Tutorial

JavaScript object methods are functions that belong to an object. While properties store data about an object (like a user's name or a product's price), methods define what the object can do. A user object might have a greet() method. A cart object might have a calculateTotal method.

Methods turn objects from passive data containers into active entities that carry both state and behavior together.

Defining a Method

There are three ways to add a method to an object. The modern shorthand syntax is the cleanest and most common choice.

Method Shorthand (Recommended)

Since ES2015, you can define a method by writing the name, parentheses, and body directly inside the object literal, without the function keyword:

javascript

const user = {
  name: "Morgan",
  greet() {
    return "Hi, I am " + this.name;
  }
};
 
console.log(user.greet()); // "Hi, I am Morgan"

This is the standard syntax in modern JavaScript. It is shorter, reads more like natural language, and works the same as a regular function.

Traditional Function Property

Before ES2015, you had to write the full function keyword:

javascript

const user = {
  name: "Morgan",
  greet: function() {
    return "Hi, I am " + this.name;
  }
};
 
console.log(user.greet()); // "Hi, I am Morgan"

This still works and you will see it in older code. It behaves identically to the shorthand.

Arrow Function Property

You can assign an arrow function, but it comes with a this caveat:

javascript

const user = {
  name: "Morgan",
  greet: () => {
    return "Hi, I am " + this.name;
  }
};
 
console.log(user.greet()); // "Hi, I am undefined"

Arrow functions do not have their own this. The this inside the arrow function refers to whatever this was in the surrounding scope when the object was created, which is usually the global object or undefined in strict mode. For object methods, stick with shorthand or regular functions.

The this Keyword Inside Methods

this is the most important concept to understand about methods. Inside a method, this refers to the object that the method is called on:

javascript

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
 
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.increment()); // 3

Each call to increment adds one to the count property and returns the new total. Without this, the method would need to reference the object by its variable name directly, which breaks if you ever rename the variable or reuse the method on a different object:

javascript

const counter = {
  count: 5,
  reset() {
    this.count = 0;
    return this.count;
  }
};
 
console.log(counter.reset()); // 0

this makes methods reusable and portable because the same method body works no matter what the object is called.

Methods That Take Arguments

Methods can accept parameters just like standalone functions:

javascript

const calculator = {
  result: 0,
  add(n) {
    this.result += n;
    return this.result;
  }
};
 
console.log(calculator.add(5)); // 5

The parameter n works exactly like it would in a standalone function. A second method can read and update the same result property, so the two methods share state through this:

javascript

calculator.multiply = function (n) {
  this.result *= n;
  return this.result;
};
 
console.log(calculator.multiply(3)); // 15

Methods That Return the Object (Chaining)

A common pattern is returning this from a method so you can chain multiple method calls together:

javascript

const builder = {
  value: "",
  append(str) {
    this.value += str;
    return this;
  },
  uppercase() {
    this.value = this.value.toUpperCase();
    return this;
  }
};

Each method returns this instead of a plain value, so the object itself comes back out of every call. That lets you call the next method directly on the result without storing it in a variable first:

javascript

builder.append("hello").append(" world").uppercase();
 
console.log(builder.value); // "HELLO WORLD"

This pattern appears in libraries, DOM manipulation APIs, and builder-style objects.

When this Can Go Wrong

The this binding depends on how a function is called, not where it is defined. This catches many beginners off guard:

javascript

const speaker = {
  phrase: "Hello",
  say() {
    return this.phrase;
  }
};
 
const fn = speaker.say;  // Assign the method to a variable
console.log(fn());        // undefined (this is now the global object)

When you call speaker.say(), this is speaker. But when you extract the method and call it as a standalone function through the fn variable, this is no longer speaker. It becomes undefined in strict mode or the global object otherwise.

The fix is to call the method on the object directly, or to bind it:

javascript

const boundSay = speaker.say.bind(speaker);
console.log(boundSay()); // "Hello"

For more on this behavior in different contexts, see the article on /javascript/javascript-function-scope-local-vs-global-scope.

Using Methods with Nested Data

Methods often access and transform other properties on the same object:

javascript

const cart = {
  items: [{ price: 15 }, { price: 3 }],
  total() {
    let sum = 0;
    for (const item of this.items) sum += item.price;
    return sum;
  }
};
 
console.log(cart.total()); // 18

The total method loops over the items array stored on the same object and adds up each price. A second method can call total through this, so it does not need to repeat that loop:

javascript

cart.summary = function () {
  return this.items.length + " item(s), total: $" + this.total();
};
 
console.log(cart.summary()); // "2 item(s), total: $18"

Methods can call other methods on the same object using this.methodName().

Object.keys(), Object.values(), and Object.entries()

JavaScript provides built-in static methods on the Object constructor that help you work with an object's own properties. These are not methods on your object; they are utility functions you call on Object directly:

javascript

const book = { title: "Dune", author: "Frank Herbert", year: 1965 };
 
console.log(Object.keys(book));     // ["title", "author", "year"]
console.log(Object.values(book));   // ["Dune", "Frank Herbert", 1965]
console.log(Object.entries(book));
// [["title", "Dune"], ["author", "Frank Herbert"], ["year", 1965]]

These are useful for iterating, transforming, or inspecting objects. For more examples, see the article on /javascript/javascript-object-keys-values-and-entries-guide.

Common Mistakes

Using an arrow function as a method. Arrow functions do not bind this to the calling object:

javascript

const obj = {
  name: "Pat",
  greet: () => "Hi " + this.name
};
 
console.log(obj.greet()); // "Hi undefined"

The arrow function's this comes from the surrounding scope, not from the object, so this.name looks in the wrong place. Method shorthand fixes it because a regular method does bind this to the calling object:

javascript

const obj2 = {
  name: "Pat",
  greet() { return "Hi " + this.name; }
};
 
console.log(obj2.greet()); // "Hi Pat"

Forgetting to call the method. A method is a function. Accessing it without parentheses returns the function itself, not the result:

javascript

const obj = { greet() { return "hello"; } };
console.log(obj.greet);   // [Function: greet] -- not what you want
console.log(obj.greet()); // "hello"

Losing this in callbacks. When you pass a method as a callback, this is lost, because the function that eventually calls it does not know which object it originally belonged to:

javascript

const timer = {
  message: "Time is up",
  alert() {
    console.log(this.message);
  }
};
 
setTimeout(timer.alert, 1000); // undefined, this is lost

Passing timer.alert hands setTimeout a bare function reference, so by the time it runs, this no longer points to timer. Wrapping the call in an arrow function keeps the connection to timer intact:

javascript

setTimeout(() => timer.alert(), 1000); // "Time is up"

The arrow function wrapper preserves the intended this because it captures timer from the surrounding scope.