Tutorials Exercises Services Get Certified Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
JavaScript Function Invocation
‹ Previous Next ›
The code inside a JavaScript function will execute when "something" invokes it.
Invoking a JavaScript Function
The code inside a function is not executed when the function is defined.
The code inside a function is executed when the function is invoked.
It is common to use the term "call a function" instead of "invoke a function".
It is also common to say "call upon a function", "start a function", or "execute a function".
In this tutorial, we will use invoke, because a JavaScript function can be invoked without being
called.
Invoking a Function as a Function
Example
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // Will return 20
Try it Yourself »
The function above does not belong to any object. But in JavaScript there is always a default
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 1 of 9
:
global object.
In HTML the default global object is the HTML page itself, so the function above "belongs" to the
HTML page.
In a browser the page object is the browser window. The function above automatically becomes a
window function.
Note
This is a common way to invoke a JavaScript function, but not a very good practice.
Global variables, methods, or functions can easily create name conflicts and bugs in the global
object.
myFunction() and window.myFunction() is the same function:
Example
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
Try it Yourself »
What is this?
In JavaScript, the this keyword refers to an object.
The this keyword refers to different objects depending on how it is used:
In an object method, this refers to the object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined .
In an event, this refers to the element that received the event.
Methods like call() , apply() , and bind() can refer this to any object.
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 2 of 9
:
Note
this is not a variable. It is a keyword. You cannot change the value of this .
See Also:
The JavaScript this Tutorial
ADVERTISEMENT
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
let x = myFunction(); // x will be the window object
function myFunction() {
return this;
}
Try it Yourself »
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 3 of 9
:
Invoking a function as a global function, causes the value of this to be the global object.
Using the window object as a variable can easily crash your program.
Invoking a Function as a Method
In JavaScript you can define functions as object methods.
The following example creates an object (myObject), with two properties (firstName and
lastName), and a method (fullName):
Example
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Try it Yourself »
The fullName method is a function. The function belongs to the object. myObject is the owner
of the function.
The thing called this , is the object that "owns" the JavaScript code. In this case the value of
this is myObject.
Test it! Change the fullName method to return the value of this :
Example
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 4 of 9
:
// This will return [object Object] (the owner object)
myObject.fullName();
Try it Yourself »
Invoking a function as an object method, causes the value of this to be the object itself.
Invoking a Function with a Function Constructor
If a function invocation is preceded with the new keyword, it is a constructor invocation.
It looks like you create a new function, but since JavaScript functions are objects you actually
create a new object:
Example
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
const myObj = new myFunction("John", "Doe");
// This will return "John"
myObj.firstName;
Try it Yourself »
A constructor invocation creates a new object. The new object inherits the properties and methods
from its constructor.
The this keyword in the constructor does not have a value.
The value of this will be the new object created when the function is invoked.
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 5 of 9
:
‹ Previous Next ›
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 6 of 9
:
Recommended videos Powered by Snigel
COLOR PICKER
ADVERTISEMENT
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 7 of 9
:
PLUS SPACES GET CERTIFIED FOR TEACHERS
FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading
and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 8 of 9
:
https://www.w3schools.com/js/js_function_invocation.asp 02/11/2024, 10 57 AM
Page 9 of 9
:
