JavaScript Function Invocation (original) (raw)
Last Updated : 17 Dec, 2024
In JavaScript, **function invocation refers to executing the code defined in a function. Function invocation occurs when a function is called or executed in JavaScript. When invoked, the code inside the function block is run, and any return value is computed and passed back to the caller.
JavaScript ``
function greet(name) {
return Hello, ${name}!;
}
console.log(greet("Meeta"));
``
- The function greet is invoked with the argument “Meeta”.
- The string “Hello, Meeta!” is returned and logged to the console.
Types of Function Invocation
JavaScript provides several ways to invoke functions. Each method affects the behavior of this (the execution context) and other factors.
1. Function Invocation
When a function is called directly using its name, it operates in the global or local scope.
JavaScript `
function add(a, b) { return a + b; } console.log(add(5, 3));
`
**Scope: In non-strict mode, this defaults to the global object (window in browsers).
2. Method Invocation
When a function is a property of an object and is invoked as object.method(), it is called a method invocation.
JavaScript ``
const user = {
name: "Meeta",
greet: function () {
return Hello, ${this.name}!;
},
};
console.log(user.greet());
``
In method invocation, this refers to the object that owns the method (in this case, user).
3. Constructor Invocation
Functions can be invoked as constructors using the new keyword. When invoked this way, the function creates a new object and sets this to refer to that object.
JavaScript `
function Person(name, age) { this.name = name; this.age = age; } const meeta = new Person("Meeta", 25); console.log(meeta.name);
`
A constructor invocation returns the newly created object.
4. Indirect Invocation
Functions can be invoked indirectly using call(), apply(), or bind().
**call(): Invokes a function and explicitly sets this and individual arguments.
JavaScript ``
function greet(greeting) {
return ${greeting}, ${this.name}!;
}
const user = { name: "Meeta" };
console.log(greet.call(user, "Hello"));
``
**apply(): Similar to call(), but arguments are passed as an array.
JavaScript ``
function greet(greeting) {
return ${greeting}, ${this.name}!;
}
const user = { name: "Meeta" };
console.log(greet.apply(user, ["Hi"]));
``
**bind(): Creates a new function with this permanently set to the provided value.
JavaScript ``
function greet(greeting) {
return ${greeting}, ${this.name}!;
}
const user = { name: "Meeta" };
const boundGreet = greet.bind(user);
console.log(boundGreet("Hey"));
``
5. Self-Invoking Functions
Self-invoking (or immediately invoked) functions run automatically without being explicitly called. These are often written as Immediately Invoked Function Expressions (IIFEs).
JavaScript `
(function () { console.log("This is a self-invoking function!"); })();
`
Output
This is a self-invoking function!
IIFEs are commonly used for encapsulating code to avoid polluting the global scope.
6. Arrow Function Invocation
Arrow functions are invoked like regular functions but differ in how they handle this. They do not bind their own this; instead, they inherit this from their lexical scope.
JavaScript ``
const user = {
name: "Meeta",
greet: () => {
return Hello, ${this.name}!;
// this here is not bound to user
},
};
console.log(user.greet());
``