Object Methods in JavaScript

In JavaScript, object methods are functions stored as properties of an object. They allow objects to encapsulate behavior, enabling them to perform actions or computations related to their data. This section covers defining methods, usage of this .

What are Object Methods?

• A method is a function assigned to a property of an object.
• Methods typically use the object’s properties to perform tasks.
• They are similar to regular functions but are attached to objects and often use the this keyword to reference the object’s data.

Defining Methods

There are multiple ways to define methods in JavaScript:

a) Traditional Function Expression

Assign a function expression to a property using the function keyword.

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm John"

b) ES6 Shorthand Method Syntax

Define methods directly in object literals without the function keyword.

const person = {
  name: "John",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm John"

c) Arrow Functions as Methods

Caution:

• Arrow functions do not have their own this.
• They inherit this from the surrounding lexical scope.
• Avoid using arrow functions for methods that rely on this.
• Suitable for methods that don’t need this or as callbacks inside methods.

const person = {
  name: "John",
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm undefined"

d) Defining Methods Dynamically

Methods can be added after object creation:

const person = { name: "John" };
person.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};
person.greet(); // "Hello, I'm John"

Computed Property Names (ES6+):

const methodName = "sayHi";
const person = {
  name: "John",
  [methodName]() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
person.sayHi(); // "Hi, I'm John"

The this Keyword in Methods

In a method, this refers to the object the method is called on.

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
person.greet(); // "Hello, I'm Alice"

Context Loss:

Extracting a method may lose its this context:

const greet = person.greet;
greet(); // "Hello, I'm undefined" or TypeError in strict mode

Solutions:

Bind the method:

const boundGreet = person.greet.bind(person);
boundGreet(); // "Hello, I'm Alice"

Use .call() or .apply():

greet.call(person); // "Hello, I'm Alice"

Wrap in a function for callbacks:

setTimeout(function() {
  person.greet();
}, 1000); // "Hello, I'm Alice" after 1 second

Methods in Constructor Functions and Classes

a) Constructor Functions

Per-instance methods:

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const john = new Person("John");
john.greet(); // "Hello, I'm John"

Prototype methods (shared across instances): Prototype methods are more memory-efficient for multiple instances.

Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const alice = new Person("Alice");
alice.greet(); // "Hello, I'm Alice"

b) ES6 Classes

Methods defined inside the class are automatically added to the prototype:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const bob = new Person("Bob");
bob.greet(); // "Hello, I'm Bob"