JavaScript Object Methods

by
Previous
Next

What Are JavaScript Object Methods?

In JavaScript, an object method is a function stored as a property in an object. These methods define the actions or behavior that an object can perform. By combining properties and methods, objects can store data and provide functionality together.

Example:

let car = {
    brand: "Tesla",
    start: function () {
        return "The car has started.";
    }
};

console.log(car.start()); // Output: The car has started.

How to Define Methods in Objects

You can define a method inside an object using the function keyword or the concise method syntax introduced in ES6.

1. Using Function Keyword

let person = {
    greet: function () {
        return "Hello!";
    }
};

console.log(person.greet()); // Output: Hello!

2. Using Concise Method Syntax

let person = {
    greet() {
        return "Hello!";
    }
};

console.log(person.greet()); // Output: Hello!

Accessing Object Methods

To call a method, use dot notation or bracket notation, followed by parentheses () to execute it.

Example:

let calculator = {
    add(a, b) {
        return a + b;
    }
};

console.log(calculator.add(5, 3)); // Output: 8

this Keyword in Object Methods

The this keyword refers to the object it belongs to. It allows methods to access other properties of the same object.

Example:

let car = {
    brand: "Tesla",
    model: "Model S",
    getDetails() {
        return `Brand: ${this.brand}, Model: ${this.model}`;
    }
};

console.log(car.getDetails());
// Output: Brand: Tesla, Model: Model S

Key Points About this:

  • In object methods, this refers to the object calling the method.
  • Avoid arrow functions in methods if you need this to point to the object.

Adding Methods Dynamically

You can add methods to an object dynamically.

Example:

let user = {
    name: "John"
};

user.sayHello = function () {
    return `Hello, ${this.name}`;
};

console.log(user.sayHello()); // Output: Hello, John

Common Built-In Methods

JavaScript objects come with built-in methods for common tasks.

1. Object.keys(): Get all property names.

let car = { brand: "Tesla", model: "Model X" };
console.log(Object.keys(car)); 
// Output: ["brand", "model"]

2. Object.values(): Get all property values.

console.log(Object.values(car)); 
// Output: ["Tesla", "Model X"]

3. Object.entries(): Get key-value pairs as arrays.

console.log(Object.entries(car)); 
// Output: [["brand", "Tesla"], ["model", "Model X"]]

4. Object.assign(): Copy properties from one object to another.

let car2 = {};
Object.assign(car2, car);
console.log(car2); 
// Output: { brand: "Tesla", model: "Model X" }

Real-Life Example

Suppose you’re building a shopping cart system. Each item object can have methods for actions like calculating the total price.

Example:

let cartItem = {
    name: "Laptop",
    price: 50000,
    quantity: 2,
    calculateTotal() {
        return this.price * this.quantity;
    }
};

console.log(`Total price: ₹${cartItem.calculateTotal()}`);
// Output: Total price: ₹100000

Method Chaining

In JavaScript, some libraries use method chaining to allow multiple methods to be called on the same object.

Example:

let calculator = {
    value: 0,
    add(num) {
        this.value += num;
        return this;
    },
    subtract(num) {
        this.value -= num;
        return this;
    },
    getResult() {
        return this.value;
    }
};

let result = calculator.add(10).subtract(5).getResult();
console.log(result); // Output: 5

Common Mistakes and Tips

Using this Incorrectly:
Avoid using arrow functions inside methods since this will refer to the enclosing scope instead of the object.Incorrect:

let obj = {
    value: 10,
    getValue: () => this.value // `this` does not refer to `obj`
};

Forget to Use Parentheses:
When calling a method, always include parentheses, or it won’t execute.

Previous
Next

Leave a Comment