JavaScript

In JavaScript, function invocation refers to the process of calling (executing) a function. There are multiple ways to invoke a function, and the way you do it affects how the function behaves—especially regarding the this keyword.

---

✅ 1. Function Invocation (Regular Call)

When a function is invoked normally, without being part of an object, it’s called a regular function invocation.

function greet() {
  console.log("Hello!");
}

greet(); // Hello!

🔹 In non-strict mode, this refers to the global object (e.g., window in browsers).
🔹 In strict mode, this is undefined.

---

🧠 2. Method Invocation

When a function is a property of an object, it’s called a method, and invoking it is known as method invocation.

const user = {
  name: "John",
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.sayHello(); // Hello, I'm John

🔹 Here, this refers to the object (user) that owns the method.

---

🔁 3. Constructor Invocation

When a function is invoked using the new keyword, it’s treated as a constructor. It creates a new object and sets this to that object.

function Person(name) {
  this.name = name;
}

const person1 = new Person("Alice");
console.log(person1.name); // Alice

---

🎯 4. Indirect Invocation (call and apply)

You can manually control the value of this using call() and apply().

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

const user = { name: "Emma" };

greet.call(user);  // Hello, Emma
greet.apply(user); // Hello, Emma

🔸 call takes arguments one by one.
🔸 apply takes arguments as an array.

---

🧬 5. Arrow Function Invocation

Arrow functions are invoked just like regular functions, but they don’t have their own this. Instead, they inherit this from the parent scope.

const person = {
  name: "Tom",
  greet: () => {
    console.log(`Hi, I'm ${this.name}`);
  }
};

person.greet(); // Hi, I'm undefined

⚠️ Arrow functions are not suitable as methods when this matters.

---

🔁 6. Immediately Invoked Function Expression (IIFE)

An IIFE is a function that runs immediately after it’s defined.

(function () {
  console.log("This function runs immediately!");
})();

---

📦 7. Function Invocation as Event Handlers

Functions can be triggered by events like clicks:

document.querySelector("button").addEventListener("click", function () {
  console.log("Button clicked");
});

---

🔍 Summary of Invocation Types

Invocation Type	Example Syntax	this Value
Regular Function Call	greet()	undefined (strict mode) or window
Method Call	obj.method()	The object that owns the method
Constructor Call	new Func()	A new empty object
call() / apply()	func.call(obj) / func.apply(obj)	Explicitly set to obj
Arrow Function	() => {}	Inherited from lexical scope
IIFE	(function(){})()	Depends on strict mode
Event Handler	element.onclick = function() {}	The DOM element that triggered it

---