• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Function Invocation

← Previous Next →

📘 JavaScript Function Invocation – How Functions Are Called

Function invocation means executing or calling a function. The way you invoke a function in JavaScript determines what value this refers to and how the function behaves.

🔹 Types of Function Invocation in JavaScript

✅ 1. Regular Function Invocation

When a function is called directly:

function show() {
  console.log("Hello");
}

show(); // Output: Hello

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

✅ 2. Method Invocation

When a function is called as a method of an object:

const person = {
  name: "Alice",
  greet: function () {
    console.log("Hello " + this.name);
  },
};

person.greet(); // Output: Hello Alice

Here, this refers to the object before the dot (person).

✅ 3. Constructor Invocation (Using new)

Functions can be used as constructors to create objects:

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

const p1 = new Person("John");
console.log(p1.name); // Output: John

When a function is invoked with new, a new object is created and this refers to that new object.

✅ 4. Indirect Invocation (call, apply, bind)

These methods let you manually control the value of this.

function sayHello() {
  console.log("Hello " + this.name);
}

const user = { name: "Bob" };

sayHello.call(user); // Output: Hello Bob
sayHello.apply(user); // Output: Hello Bob

const boundFunc = sayHello.bind(user);
boundFunc(); // Output: Hello Bob
✅ 5. Arrow Function Invocation

Arrow functions don’t have their own this; they inherit from the parent scope:

const user = {
  name: "Eve",
  greet: () => {
    console.log("Hi " + this.name);
  },
};

user.greet(); // Output: Hi undefined

Arrow functions are not suitable for methods if you rely on this.

🔹 Summary Table

Invocation Type Description this Value
Regular Function Called normally Global (non-strict) / undefined (strict)
Method Invocation Called via object The object itself
Constructor (new) Creates new instance New object created
call() / apply() Calls with custom this User-defined
bind() Returns new function with bound this Bound object
Arrow Function Inherits from surrounding context Lexical this

Practice Questions

Q1. What is function invocation in JavaScript, and how does it work?

Q2. What happens to this when a function is invoked normally in non-strict mode?

Q3. Write an example where a function is invoked as a method of an object.

Q4. How does using new change how a function is invoked?

Q5. Explain the difference between call() and apply() with examples.

Q6. What is the role of bind() in function invocation?

Q7. Why does an arrow function return undefined for this in a method?

Q8. Write a constructor function that creates a Car object with a brand property.

Q9. What will be the output if a function is invoked with more arguments than parameters?

Q10. Explain how function invocation affects the behavior of this.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top