JavaScript Function Invocation

❮ Previous Next ❯

The JavaScript code within a function runs when "something" triggers it.

Invoking a JavaScript Function

The instructions within a function are not carried out at the moment the function is defined.

The instructions within a function are carried out when the function is called.

People often say "call a function" instead of "invoke a function."

It's usual to use phrases like "call a function," "begin a function," or "run a function."

In this guide, we'll utilize the invoke method, as it allows a JavaScript function to be triggered without requiring a call.

Invoking a Function as a Function

The mentioned function doesn't belong to any specific object. However, in JavaScript, there's always a default global object.

In HTML, the main object is the HTML page by default. Therefore, the mentioned function is associated with the HTML page.

In a web browser, the page object refers to the browser window. The mentioned function seamlessly transforms into a window function.

Note

Using this method to call a JavaScript function is common, but it's not a recommended practice.
Global variables, methods, or functions can lead to issues like name conflicts and bugs in the global object.

Both myFunction() and window.myFunction() refer to the same function.

What is this?

In JavaScript, when we use the this keyword, it points to an object.

Which object that relies on howthis is invoked (used or called) varies.

The word "this" means different things based on how it's used:

In a method related to an object, the term this points to the specific object.

By itself, the term this points to the global object.

In a function, the term this points to the overall object known as the global object.

"In a function under strict mode, the value ofthis is undefined.

In an occurrence, when you see this, it points to the specific element that encountered the event.

Functions such as call(), apply(),and bind() allow the reference ofthis to be associated with any object.

Note

this is not like a variable; it's a keyword. You can't alter the value of this.

The Global Object

When a function is used without a specific owner object, the this keyword takes on the value of the global object.

In a web browser, the global object refers to the window of the browser.

This example uses this to return the window object.

Calling a function as a global function makes the value of this become the global object.
Using the window object as a variable can potentially lead to your program crashing.

Invoking a Function as a Method

You can create functions as part of objects in JavaScript.

The code below creates an object called (myObject). This object has two properties: (firstName and lastName), and also a method called (fullName).

The fullName method is a type of function that belongs to an object. The object named myObject is the one that owns this function.

The term "this" refers to the object that possesses the JavaScript code. In this instance, this has a value of myObject.

Try it out! Modify the fullName function to give back the value of this:

When you call a function as part of an object, it makes the special variable this refer to the object.

Invoking a Function with a Function Constructor

If you use the new keyword before calling a function, it becomes a constructor invocation.

It seems like you're making a new function. However, because JavaScript functions are treated as objects, what you're really doing is creating a new object:

Creating a new object is done by invoking a constructor. The freshly created object takes on the attributes and actions of its constructor.

The this keyword inside the constructor doesn't contain a value.
When the function is called, the value of this will be the newly created object.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>The function named myFunction gives back the result of multiplying two numbers, a and b.</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = myFunction(10, 2);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Global functions become methods of the window automatically. So, when you call myFunction(), it's like calling window.myFunction().</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = window.myFunction(10, 2);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>In HTML, the value of "this" inside a global function refers to the window object.</p>
    <p id="demo"></p>
    <script>
      let x = myFunction();

      function myFunction() {
        return this;
      }
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>myObject.fullName() will return John Doe:</p>
    <p id="demo"></p>
    <script>
      const myObject = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
          return this.firstName + " " + this.lastName;
        }
      }
      document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>The value of <b>this</b>, in an object method, is the owner object. </p>
    <p id="demo"></p>
    <script>
      const myObject = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
          return this;
        }
      }
      document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>In this example, myFunction is a function constructor:</p>
    <p id="demo"></p>
    <script>
      function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName = arg2;
      }
      const myObj = new myFunction("John", "Doe")
      document.getElementById("demo").innerHTML = myObj.firstName;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Function Invocation

Invoking a JavaScript Function

Invoking a Function as a Function

Note

What is this?

Note

See Also:

The Global Object

Invoking a Function as a Method

Invoking a Function with a Function Constructor

Web Development