DEV Community

loading...
Cover image for What Are Javascript Method? A Guide to Javascript Methods

What Are Javascript Method? A Guide to Javascript Methods

coodignd profile image โ„‚๐• ๐• ๐••๐•š๐•Ÿ๐•˜ ๐”ป๐•–๐•ค๐•ค๐•š๐•˜๐•Ÿ ใƒป6 min read

1. What is a method

Letโ€™s define and call a regular function:

function greet(who) {
  return `Hello, ${who}!`;
}

greet('World'); 
Enter fullscreen mode Exit fullscreen mode

The function keyword followed by its name, params, and body: function greet(who) {...} makes a regular function definition.

greet('World') is the regular function invocation. The function greet('World') accepts data from the argument.

What if who is a property of an object? To easily access the properties of an object you can attach the function to that object, in other words, create a method.

Letโ€™s make greet() a method on the object world:

const world = {
  who: 'World',

  greet() {    return `Hello, ${this.who}!`;  }}

world.greet(); 
Enter fullscreen mode Exit fullscreen mode

greet() { ... } is now a method that belongs to the world object. world.greet() is a method invocation.

Inside of the greet() method this points to the object the method belongs to โ€” world. Thatโ€™s why this.who expression accesses the property who.

Note that this is also named context.

The context is optional

While in the previous example Iโ€™ve used this to access the object the method belongs to โ€” JavaScript, however, doesnโ€™t impose a method to use this.

For this reason you can use an object as a namespace of methods:

const namespace = {
  greet(who) {
    return `Hello, ${who}!`;
  },

  farewell(who) {
    return `Good bye, ${who}!`;
  }
}

namespace.greet('World');    
namespace.farewell('World'); 
Enter fullscreen mode Exit fullscreen mode

namespace is an object that holds 2 methods: namespace.greet() and namespace.farewell().

The methods do not use this, and namespace serves as a holder of alike methods.

2. Object literal method

As seen in the previous chapter, you can define a method directly in an object literal:

const world = {
  who: 'World',

  greet() {    return `Hello, ${this.who}!`;  }};

world.greet(); 
Enter fullscreen mode Exit fullscreen mode

greet() { .... } is a method defined on an object literal. Such type of definition is named shorthand method definition (available starting ES2015).

Thereโ€™s also a longer syntax of methods definition:

const world = {
  who: 'World',

  greet: function() {    return `Hello, ${this.who}!`;  }}

world.greet(); 
Enter fullscreen mode Exit fullscreen mode

greet: function() { ... } is a method definition. Note the additional presence of a colon and function keyword.

Adding methods dynamically

The method is just a function that is stored as a property on the object. Thatโ€™s why you can add methods dynamically to an object:

const world = {
  who: 'World',

  greet() {
    return `Hello, ${this.who}!`;
  }
};


world.farewell = function () {
  return `Good bye, ${this.who}!`;
}

world.farewell(); 
Enter fullscreen mode Exit fullscreen mode

world object at first doesnโ€™t have a method farewell. It is added dynamically.

The dynamically added method can be invoked as a method without problems: world.farewell().

3. Class method

In JavaScript, the class syntax defines a class thatโ€™s going to serve as a template for its instances.

A class can also have methods:

class Greeter {
  constructor(who) {
    this.who = who;
  }

  greet() {    console.log(this === myGreeter);     return `Hello, ${this.who}!`;  }}

const myGreeter = new Greeter('World');
myGreeter.greet(); 
Enter fullscreen mode Exit fullscreen mode

greet() { ... } is a method defined inside a class.

Every time you create an instance of the class using new operator (e.g. myGreeter = new Greeter('World')), methods are available for invocation on the created instance.

myGreeter.greet() is how you invoke the method greet() on the instance. Whatโ€™s important is that this inside of the method equals the instance itself: this equals myGreeter inside greet() { ... } method.

4. How to invoke a method

4.1 Method invocation

Whatโ€™s particularly interesting about JavaScript is that defining a method on an object or class is half of the job. To maintain the method the context, you have to make sure to invoke the method as aโ€ฆ method.

Let me show you why itโ€™s important.

Recall the world object having the method greet() upon it. Letโ€™s check what value has this when greet() is invoked as a method and as a regular function:

const world = {
  who: 'World',

  greet() {
    console.log(this === world);    return `Hello, ${this.who}!`;
  }
};


world.greet(); 
const greetFunc = world.greet;

greetFunc(); 
Enter fullscreen mode Exit fullscreen mode

world.greet() is a method invocation. The object world, followed by a dot ., and finally the method itself โ€” thatโ€™s what makes the method invocation.

greetFunc is the same function as world.greet. But when invoked as regular function greetFunc(), this inside greet() isnโ€™t equal to the world object, but rather to the global object (in a browser this is window).

I name expressions like greetFunc = world.greet separating a method from its object. When later invoking the separated method greetFunc() would make this equal to the global object.

Separating a method from its object can take different forms:

const myMethodFunc = myObject.myMethod;


setTimeout(myObject.myMethod, 1000);


myButton.addEventListener('click', myObject.myMethod)


<button onClick={myObject.myMethod}>My React Button</button>
Enter fullscreen mode Exit fullscreen mode

To avoid loosing the context of the method, make sure to use the method invocation world.greet() or bind the method manually to the object greetFunc = world.greet.bind(this).

4.2 Indirect function invocation

As stated in the previous section, a regular function invocation has this resolved as the global object. Is there a way for a regular function to have a customizable value of this?

Welcome the indirect function invocation, which can be performed using:

myFunc.call(thisArg, arg1, arg2, ..., argN);
myFunc.apply(thisArg, [arg1, arg2, ..., argN]);
Enter fullscreen mode Exit fullscreen mode

methods available on the function object.

The first argument of myFunc.call(thisArg) and myFunc.apply(thisArg) is the context (the value of this) of the indirect invocation. In other words, you can manually indicate what value this is going to have inside the function.

For example, letโ€™s define greet() as a regular function, and an object aliens having a who property:

function greet() {
  return `Hello, ${this.who}!`;
}

const aliens = {
  who: 'Aliens'
};

greet.call(aliens); 
greet.apply(aliens); 
Enter fullscreen mode Exit fullscreen mode

greet.call(aliens) and greet.apply(aliens) are both indirect method invocations. this value inside the greet() function equals aliens object.

The indirect invocation lets you emulate the method invocation on an object!

4.3 Bound function invocation

Finally, hereโ€™s the third way how you can make a function be invoked as a method on an object. Specifically, you can bound a function to have a specific context.

You can create a bound function using a special method:

const myBoundFunc = myFunc.bind(thisArg, arg1, arg2, ..., argN);
Enter fullscreen mode Exit fullscreen mode

The first argument of myFunc.bind(thisArg) is the context to which the function is going to be bound to.

For example, letโ€™s reuse the greet() and bind it to aliens context:

function greet() {
  return `Hello, ${this.who}!`;
}

const aliens = {
  who: 'Aliens'
};

const greetAliens = greet.bind(aliens);

greetAliens(); 
Enter fullscreen mode Exit fullscreen mode

Calling greet.bind(aliens) creates a new function where this is bound to aliens object.

Later, when invoking the bound function greetAliens(), this equals aliens inside that function.

Again, using a bound function you can emulate the method invocation.

5. Arrow functions as methods

Using an arrow function as a method isnโ€™t recommended, and hereโ€™s why.

Letโ€™s define the greet() method as an arrow function:

const world = {
  who: 'World',

  greet: () => {
    return `Hello, ${this.who}!`;
  }
};

world.greet(); 
Enter fullscreen mode Exit fullscreen mode

Unfortunately, world.greet() returns 'Hello, undefined!' instead of the expected 'Hello, World!'.

The problem is that the value this inside of the arrow function equals this of the outer scope. Always. But what you want is this to equal world object.

Thatโ€™s why this inside of the arrow function equals the global object: window in a browser. 'Hello, ${this.who}!' evaluates as Hello, ${windows.who}!, which in the end is 'Hello, undefined!'.

I like the arrow functions. But they donโ€™t work as methods.

6. Summary

The method is a function belonging to an object. The context of a method (this value) equals the object the method belongs to.

You can also define methods on classes. this inside of a method of a class equals to the instance.

Whatโ€™s specific to JavaScript is that it is not enough to define a method. You also need to make sure to use a method invocation. Typically, the method invocation has the following syntax:

myObject.myMethod('Arg 1', 'Arg 2');
Enter fullscreen mode Exit fullscreen mode

Interestingly is that in JavaScript you can define a regular function, not belonging to an object, but then invoke that function as a method on an arbitrar object. You can do so using an indirect function invocation or bind a function to a particular context:

myRegularFunc.call(myObject, 'Arg 1', 'Arg 2');
myRegularFunc.apply(myObject, 'Arg 1', 'Arg 2');


const myBoundFunc = myRegularFunc.bind(myObject);
myBoundFunc('Arg 1', 'Arg 2');
Enter fullscreen mode Exit fullscreen mode

Indirect invocation and bounding emulate the method invocation.

Don't miss it:
1.TestDriven.io: Django and Pydantic
2.Python Pool: NumPy Cross Product in Python with Examples

Untitled

Discussion (0)

pic
Editor guide