Page Content

Tutorials

JavaScript Calling Methods mostly through the Object

JavaScript Calling Methods

The syntax of JavaScript’s invocation expression is used to call or invoke a method. A pair of brackets () are used after an expression that specifies the function to be called. A method invocation occurs when this expression is a property access expression, such as object.property.

Using dot notation is the most popular approach to invoke a method. The name of the object, a period (.), the name of the method, and finally the parenthesis () are written here. For instance, car.start() might be used to invoke the start method of an object called car.

Any arguments that the method expects are passed to it in the brackets (). The values passed to the function upon call are known as arguments. You still require the empty brackets () if a method does not accept parameters.

The invocation context, specified by the this keyword, is fundamental to method invocation. Method invocation objects become this’s value in the function body. This enables the method to function on the particular object to which it belongs. This object can then be referred to by the function body using the term this. A method inside an object will always refer to the original object instance it was called on, regardless of where it is located in the object’s prototype chain.

A code example using the vehicle object shows how calling a method works:

// Create an object literal representing a car, including a method
let car = {
make: “Toyota”,
model: “Corolla”,
year: 2020,
start: function() { // Defining a method named ‘start’
// Inside the method, ‘this’ refers to the car object
console.log(“The ” + this.make + ” ” + this.model + ” engine started!”);
},
// Another method that uses a property and takes an argument
drive: function(speed) {
console.log(“The ” + this.make + ” is driving at ” + speed + ” mph.”);
}
};

// Calling the ‘start’ method using dot notation
console.log(“Calling the start method:”);
car.start(); // Outputs: The Toyota Corolla engine started!

// Calling the ‘drive’ method with an argument
console.log(“Calling the drive method:”);
car.drive(55); // Outputs: The Toyota is driving at 55 mph.

// Example with a different object of the same structure
let anotherCar = {
make: “Honda”,
model: “Civic”,
start: function() {
console.log(“The ” + this.make + ” ” + this.model + ” engine started!”);
}
};

console.log(“Calling the start method on another object:”);
anotherCar.start();

// Outputs: The Honda Civic engine started! (this refers to anotherCar)

In this example, the car object is referenced inside the start method when car.start() is performed, providing access to its make and model properties. Similarly, this refers to anotherCar when anotherCar.start() is used.

Square bracket notation can also be used to invoke methods, though dot notation is the standard. When a variable contains the method name, this is helpful:

let methodName = “start”;
car[methodName](); // Calls the ‘start’ method using square brackets

There are numerous built-in methods on different objects in JavaScript that you have probably already used. Some examples are as follows:

  • console.log() for outputting to the console.
  • Array methods like push() and sort().
  • String methods such as toUpperCase() and slice().
  • Math methods like Math.max().
  • Window methods like prompt() and alert().

In addition to calling methods directly, JavaScript functions which are actually objects have methods like call() and apply(). These let you explicitly set the value of a function and indirectly activate it. This value is the first argument passed to call(), which then takes the function’s arguments one at a time. The parameters are supplied as an array, however apply() additionally accepts this value first. For situations like manipulating the context (this) in callback routines or borrowing methods, this is helpful.

To summarise, JavaScript calls methods mostly through the object.method() syntax, a particular kind of function invocation expression. This procedure runs the property related function and automatically sets the keyword within the method to the object on which the method was called.