Function Invocation

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Function Invocation

The code within a JavaScript function executes when “something” invokes it.

Invoking a JavaScript Function

The code within a function is not executed, when the function is specified.

The code within a function is executed, when the function is invoked.

Generally, the term “call a function” is used instead of “invoke a function”.

It is common to say “call upon a function”, “start a function”, or “execute a function”.

Invoking a Function as a Function

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>

<p id=”demo”></p>

<script>

function myFunction(a, b) {

  return a * b;

}

document.getElementById(“demo”).innerHTML = myFunction(10, 2);

</script>

</body>

</html>

Output

JavaScript Functions

The global function (myFunction) returns the product of the arguments (a ,b):

The Global Object

When a function is called without an owner object, the value of this becomes the global object.

In a web browser, the global object is the browser window.

This example returns the window object as the value of this:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>

<p id=”demo”></p>

<script>

let x = myFunction();

function myFunction() {

  return this;

}

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript Functions

In HTML the value of this, in a global function, is the window object.

[object Window]

Invoking a Function as a Method

In JavaScript, functions are defined as object methods.

The following example creates an object (myObject), which consists of two properties (firstName and lastName), and a method (fullName).

Example

<!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>

Output

JavaScript Functions

myObject.fullName() will return John Doe:

John Doe

The fullName method is a function. The function belongs to the object. myObject is the owner of the function.

The thing known as this is the object that “owns” the JavaScript code. In this case, the value of this is myObject.

Example

<!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>

Output

JavaScript Functions

The value of this, in an object method, is the owner object.

[object Object]

Invoking a Function with a Function Constructor

If a function invocation that is preceded using the new keyword, it is a constructor invocation.

Since JavaScript functions are objects you create a new object.

Example

<!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>

Output

JavaScript Functions

In this example, myFunction is a function constructor:

John