Skip to main content

JavaScript Object Methods (Live Playground)

In JavaScript, objects can have methods, which are functions associated with an object. Methods allow you to perform actions or manipulate the object's data. In this tutorial, we will explore how to create and use object methods in JavaScript.

Creating Object Methods​

You can define object methods using function expressions, similar to how you define other properties.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  greet: function () {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  },
};

person.greet(); // Output: Hello, my name is John Doe.
Live Playground, Try it Yourself

Using this in Object Methods​

In object methods, you can use the this keyword to refer to the object itself. This allows you to access and modify the object's properties within the method.

Example:

const rectangle = {
  length: 10,
  width: 5,
  area: function () {
    return this.length * this.width;
  },
  perimeter: function () {
    return 2 * (this.length + this.width);
  },
};

console.log(rectangle.area()); // Output: 50
console.log(rectangle.perimeter()); // Output: 30
Live Playground, Try it Yourself

Using Arrow Functions as Object Methods​

You can also use arrow functions as object methods. However, the this keyword behaves differently in arrow functions, so it's not recommended for methods that need to access the object's properties.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  greet: () => {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  },
};

person.greet(); // Output: Hello, my name is undefined undefined.
Live Playground, Try it Yourself

Conclusion​

Understanding how to create and use object methods in JavaScript is essential for working with objects. By mastering function expressions and the this keyword, you can efficiently create and manipulate objects in your programs.