• Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

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

JavaScript

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.

Function Invocation Quiz

Q1: Which of the following is a correct function invocation?

A. function greet()
B. let greet = function
C. greet()
D. invoke greet

Q2: What does this refer to in a regular function call (non-strict mode)?

A. The function itself
B. The object calling the function
C. Global object
D. null

Q3: How is this determined in a method call?

A. Refers to global object
B. Refers to the object the method is called on
C. Refers to window
D. Always undefined

Q4: Which function invocation creates a new object?

A. Regular call
B. Method call
C. Constructor call
D. Bound call

Q5: Which method lets you set this manually and call the function immediately?

A. bind()
B. apply()
C. clone()
D. constructor()

Q6: What does bind() return?

A. The same function
B. A new function with bound this
C. The value of this
D. The function name

Q7: What will this refer to inside an arrow function?

A. The object it belongs to
B. Itself
C. The surrounding lexical scope
D. null

Q8: Which invocation allows an object to temporarily borrow a method?

A. Constructor
B. Regular
C. call()
D. default()

Q9: Which statement is true about function constructors?

A. They can’t be reused
B. They return the same object
C. They create new objects using this
D. They are used with arrow functions
← Previous Next →
Login
Go Back Top