Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 17 - Working with Object Methods and this Keyword

What are Object Methods?

An object method is a function stored inside an object. Methods allow objects to perform actions and interact with their own properties.

A method is simply a function assigned to a property in an object.

Explanation

  • Objects can have properties that store values like strings, numbers, or arrays.
  • But objects can also store functions. When a function is inside an object, it is called a method.
  • Inside a method, we can use this to refer to the object itself.

Using object methods helps organize code and encapsulate behavior inside objects.

Example 1: Defining an Object with Methods

const person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

person.greet();  
// Output: Hello, my name is Alice

Here, greet is a method inside the person object. It prints the person's name using this.name.

Example 2: Using this in Object Methods

const car = {
    brand: "Toyota",
    model: "Camry",
    details: function() {
        console.log("This car is a " + this.brand + " " + this.model);
    }
};

car.details();
// Output: This car is a Toyota Camry

???? The details method uses this.brand and this.model to access the object's properties.

Example 3: Adding Methods Dynamically

const user = { name: "John" };

user.sayHello = function() {
    console.log("Hello, " + this.name + "!");
};

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

We can add methods dynamically after creating the object.

Try Your Hand

Let's practice creating objects with methods.

Steps:

  1. Create a File:

    • Create a new file named lesson17-methods.html.

  2. Write the Code:

    • Copy and paste the following code into your file:
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Lesson 17 - Object Methods</title>
</head>
<body>
   <script>
       const laptop = {
           brand: "Dell",
           model: "XPS 15",
           price: 1500,
           showDetails: function() {
               console.log("This is a " + this.brand + " " + this.model + " priced at $" + this.price);
           }
       };

       laptop.showDetails();  // Calling the method
   </script>
</body>
</html>

  3. Save the File:

    • Save the file in your folder.

  4. Preview the File:

    • Open the file in your browser and check the console for the output.

Experiment

Try modifying and adding methods dynamically.

  1. Modify the existing method: 

    laptop.showDetails = function() {
   console.log("Updated: " + this.brand + " " + this.model + " now costs $" + this.price);
};

laptop.showDetails();

  2. Add a new method dynamically: 

    laptop.discount = function() {
   console.log("Discounted Price: $" + (this.price - 200));
};

laptop.discount();

Observe the results in your browser console.

Key Takeaways

  • Object methods are functions inside objects.
  • The this keyword refers to the object itself.
  • Methods allow objects to perform actions and access their own properties.