Function Invocation and Method Invocation in JavaScript

In JavaScript, invoking a function refers to executing it, and you can invoke functions as standalone functions or as methods of objects. There’s a key distinction between these two types of invocation.

Function Invocation:

A function invocation is when you call a standalone function, which is not a method of an object. Here, the invocation context (the value of this within the function) is not bound to a specific object (in non-strict mode, this defaults to the global object, while in strict mode this is undefined).

Example:

1
2
3
4
5
6

function greet() {
    console.log(`Hello, ${this.name}`);
}

let name = 'World'; // This will be ignored in strict mode
greet(); // Outputs: "Hello, World" in non-strict mode, "Hello, undefined" in strict mode

Method Invocation:

A method invocation is when you call a function as a property of an object. In this case, the invocation context (the value of this within the function) is the object that the method is a property of.

Example:

1
2
3
4
5
6
7
8

let obj = {
    name: 'World',
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};

obj.greet(); // Outputs: "Hello, World"

Similarities:

• Both are ways of calling a function in JavaScript.
• Both can accept arguments and return values.

Differences:

• Function invocation calls a function as a standalone entity, while method invocation calls a function as a property of an object.
• In a function invocation, the value of this is not bound to a specific object (defaults to the global object in non-strict mode), while in method invocation this is bound to the object that the function is a property of.

In summary, whether a function is invoked as a standalone function or as a method of an object can affect the context in which it executes and the way it accesses variables, especially this.

This is the reason why functions are sometimes called methods in JavaScript. In JavaScript, any function that is a property of an object is often referred to as a “method” of that object. The term “method” originates from Object-Oriented Programming languages, where objects have associated functions which are responsible for manipulating the object’s data.

When a function is associated with an object (i.e., it’s a property of the object), we refer to it as a method. When a function is not directly associated with an object (i.e., it’s not a property of an object), we generally just call it a function.

Here’s an example to illustrate the distinction:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// A standalone function
function greet() {
    console.log('Hello!');
}

greet(); // This is a function invocation

// An object with a method
let person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, I am ${this.name}`);
    }
};

person.greet(); // This is a method invocation

In the example above, greet() is a standalone function, while person.greet() is a method of the person object. Note that within the greet method, we can use this to access other properties of the person object. This is a key feature of methods in JavaScript.

Functional vs Object Flavor

The standalone function is the functional way and the second example is OOP way? Yes, you’re on the right track! The way you’ve framed it is a good general way of differentiating the two approaches, though it’s important to note that JavaScript, as a multi-paradigm language, allows for a mix of styles.

Functional Programming:

In functional programming, functions are first-class entities. This means they can be assigned to variables, passed as arguments to other functions, returned from other functions, etc. These functions are stateless and rely on the input provided to them. This standalone function example could be seen as more aligned with the functional programming approach:

1
2
3
4
5
6
7

// A standalone function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

let name = 'Alice';
greet(name); // This is a function invocation

Object-Oriented Programming (OOP):

In OOP, data (properties) and the operations that can be performed on that data (methods) are encapsulated into objects. This second example is more aligned with the OOP approach:

1
2
3
4
5
6
7
8
9

// An object with a method
let person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, I am ${this.name}`);
    }
};

person.greet(); // This is a method invocation

In this example, greet is a method that is a property of the person object and operates on the data contained within that object.

It’s worth noting, however, that JavaScript supports both paradigms and they can be used in combination to leverage the strengths of both approaches. Also, with JavaScript’s flexible nature, certain patterns may not strictly adhere to one paradigm or the other.