How to add, access JavaScript object methods?

Adding and accessing object methods are common tasks in JavaScript. JavaScript objects are collections of properties and methods, and the JavaScript methods are functions associated with objects. JavaScript provides various features and ways to add and access object methods. In this article, we will understand how to add or access object methods in JavaScript.

Understanding JavaScript Object Methods

JavaScript methods are functions associated with objects. They allow objects to perform actions, which is important for creating dynamic and interactive programs. Methods in objects are functions that work with the object's properties. This helps make programming more organized and efficient.

Adding Methods to a JavaScript Object

There are multiple ways to add methods to a JavaScript object:

• Adding Methods During Object Creation
• Adding Methods After Object Creation
• Using Object Constructors
• Using Prototype to Add Methods

Adding Methods During Object Creation

When you create an object, you can add methods by defining them as properties that have function values. Here is the syntax:

const object = {
    key: value,
    methodName: function () {
        // function statements
    }
};

Example

The following is a simple example of adding a method during object creation:

// Create an object with a method
let car = {
    brand: "Toyota",
    start: function() {
        console.log("The car has started.");
    }
};

// Call the method
car.start();

The car has started.

Adding Methods After Object Creation

You can also add methods to an existing object dynamically using dot notation. Here is the syntax:

const object = {
    key: value,
};

object.methodName = function () {
    // function statements
};

Example

The following example shows adding a method after object creation:

// Create an object
let dog = {
    name: "Buddy",
};

// Add a method after creation
dog.bark = function() {
    console.log("Woof! Woof!");
};

// Call the method
dog.bark();

Woof! Woof!

Using Object Constructors

You can add methods to objects using constructor functions. Here is the syntax:

function ObjectName(property1, property2) {
    this.property1 = property1;
    this.property2 = property2;
    
    this.methodName = function() {
        return `Property1: ${this.property1}`;
    };
}

Example

The following example demonstrates adding a method using object constructors:

// Define an object constructor
function Car(brand, model) {
    this.brand = brand; 
    this.model = model;

    // Method
    this.start = function() {
        console.log("The " + this.brand + " " + this.model + " has started.");
    };
}

// Create an instance of the Car object
let myCar = new Car("Toyota", "Camry");

// Call the method
myCar.start();

The Toyota Camry has started.

Using Prototype to Add Methods

The prototype method allows you to add methods to a constructor function. All instances of the constructor will share the same method. Here is the syntax:

function FunctionName(property) {
    this.property = property;
}

FunctionName.prototype.methodName = function() {
    return `Hello, my property is ${this.property}`;
};

Example

The following example shows adding a method using prototype:

// Define an object constructor
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Add a method to the Person prototype
Person.prototype.introduce = function() {
    console.log("Hi, I'm " + this.name + " and I'm " + this.age + " years old.");
};

// Create an instance of Person
let person1 = new Person("Joy", 30);

// Call the method
person1.introduce();

Hi, I'm Joy and I'm 30 years old.

Accessing Object Methods

Once a method is defined for an object, you can access it in the following ways:

Using Dot Notation

Access object methods using the dot syntax:

object.methodName();

Using Bracket Notation

Access object methods using square brackets:

object["methodName"]();

Example

The following example demonstrates both ways of accessing JavaScript object methods:

// Define an object with a method
let person = {
    firstName: "Joy",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

// Accessing the method using dot notation
console.log(person.fullName()); 

// Accessing the method using bracket notation
console.log(person["fullName"]());

Joy Doe
Joy Doe

Comparison of Methods

Conclusion

JavaScript provides multiple ways to add and access object methods. Use object literals for single objects, constructor functions for multiple instances, and prototypes for memory efficiency when creating many similar objects.