Objects

Learn about objects, their properties, and methods. Understand how to create and manipulate objects.


JavaScript Essentials: Object Methods

What are Object Methods?

In JavaScript, an object method is a function that is a property of an object. Think of it as an action or behavior that the object can perform. It allows you to bundle functionality directly with the data it operates on, creating a self-contained unit.

Object methods are defined within the object's curly braces {}, just like other properties, but their value is a function.

Defining Object Methods

There are a few common ways to define object methods:

Method 1: Using Function Expression

const myObject = {
    name: "Example",
    value: 10,
    // Define a method using a function expression
    greet: function() {
    console.log("Hello, I am " + this.name + " and my value is " + this.value);
}
};

myObject.greet(); // Output: Hello, I am Example and my value is 10

In this example, greet is a method of myObject. The this keyword refers to the object itself (myObject in this case).

Method 2: Using Method Shorthand (ES6+)

const myObject = {
    name: "Example",
    value: 10,
    // Define a method using method shorthand (ES6+)
    greet() {
    console.log("Hello, I am " + this.name + " and my value is " + this.value);
}
};

myObject.greet(); // Output: Hello, I am Example and my value is 10

The method shorthand is a more concise way to define methods in ES6 and later. It omits the function keyword.

Using Object Methods

To call or invoke an object method, use the dot notation (.) followed by the method name and parentheses (). This executes the function and performs the defined action.

myObject.greet(); // Calls the 'greet' method of the 'myObject' object

The this Keyword in Object Methods

The this keyword is crucial when working with object methods. It allows the method to access and manipulate the object's properties.

Within a method, this refers to the object that the method is being called on. This allows you to work with the object's data and update its state. If you use an arrow function as an object method, this will not bind to the object, and you will have difficulty accessing object properties.

const person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
    return this.firstName + " " + this.lastName;
}
};

console.log(person.fullName()); // Output: John Doe

Examples

Example 1: Calculating Area of a Rectangle

const rectangle = {
    width: 10,
    height: 5,
    area: function() {
    return this.width * this.height;
}
};

console.log("Area of rectangle: " + rectangle.area()); // Output: Area of rectangle: 50

Example 2: Updating Object Properties

const counter = {
    count: 0,
    increment: function() {
    this.count++;
},
decrement: function() {
    this.count--;
},
getValue: function() {
    return this.count;
}
};

counter.increment();
counter.increment();
counter.decrement();
console.log("Current count: " + counter.getValue()); // Output: Current count: 1