In JavaScript, the function code executes when the function is invoked, not when the function is defined. This guide explores the various ways to invoke or call functions in JavaScript.

Calling a Function Directly

The most straightforward way to invoke a function is by calling it directly using its name followed by parentheses containing any arguments.

function multiply(a, b) {  return a * b;}multiply(10, 2); // Returns 20

‍

This function does not belong to any object and, by default, belongs to the global context. In a web browser, this global context is the window object, making multiply() and window.multiply() effectively the same.

window.multiply(10, 2); // Also returns 20

‍

Understanding the this Keyword

The value of this within a function depends on how the function is called:

Inside a method of an object, this refers to the object.
Alone or in a regular function, this refers to the global object (in non-strict mode) or is undefined (in strict mode).
In an event, this refers to the element that received the event.
The call(), apply(), and bind() methods can set this to any object.

Global Context Function Invocation

When a function is invoked without specifying an owner object, this refers to the global object. This can lead to unintended consequences if global variables or functions interfere.

function globalContextFunction() 
{ 

return this;}let result = globalContextFunction();

// Returns the global object (window in browsers)

Function as a Method of an Object

Functions can also be defined as methods within objects. In this context, this refers to the object owning the method.

const person = {  firstName: "John",  lastName: "Doe",  fullName: function() {    return this.firstName + " " + this.lastName;  }}person.fullName(); // Returns "John Doe"

‍

Constructor Invocation

Using the new keyword before a function invocation creates a new object. The function acts as a constructor, and this within the function points to the newly created object.

function Person(first, last) {  this.firstName = first;
this.lastName = last;}‍

const myPerson = new Person("John", "Doe");console.log(myPerson.firstName); 

// Outputs "John"

‍

A constructor invocation makes a new object that inherits properties and methods from the constructor's prototype.

Summary

JavaScript functions can be invoked in several ways, each affecting the execution context and how this is defined. Whether called directly, as a method, or as a constructor, understanding these patterns is crucial for effective JavaScript programming.

‍

Take a look into your desired course