Invoking JavaScript Functions
Calling a Function
A JavaScript function only runs when it is called (also called invoked).
To invoke a function, write the name followed by parentheses like name().
The code inside the function will execute when "something" invokes the function.
Examples
The function below returns the text "Hello World".
But it will not run before you call it.
The code below calls the function.
But it does not use the result.
Note
To use the returned value, you can store it in a variable or display it.
Using the Returned Value
When a function returns a value, you can store the value in a variable.
Displaying the Result
You can display the returned value in many ways, for example using console.log() or HTML.
Examples
function sayHello() {
return "Hello World";
}
console.log(sayHello());
Try it Yourself »
<p id="demo"></p>
<script>
function sayHello() {
return "Hello World";
}
document.getElementById("demo").innerHTML = sayHello();
</script>
Try it Yourself »
Calling a Function Many Times
You can call the same function whenever you need it.
Example
function sayHello() {
return "Hello World";
}
let a = sayHello();
let b = sayHello();
let c = sayHello();
Calling vs Referencing a Function
This is an important difference:
sayHello refers to the function itself. It returns the function.
sayHello() refers to the function result. It returns the result
Note
In the example above, text returns the function itself like:
function sayHello() { return "Hello World"; }
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 also common to use the terms:
- call a function
- call upon a function
- start a function
- execute a function
In this tutorial, we will use invoke, because a JavaScript function can be invoked without being called.
Functions Can Be Called from Anywhere
You can call functions from other functions, from events, or from any code block.
Examples
function sayHello() {
return "Hello World";
}
function showHello() {
document.getElementById("demo").innerHTML = sayHello();
}
Try it Yourself »
<p id="demo"></p>
<button onclick="showHello()">Click Me</button>
<script>
function sayHello() {
return "Hello World";
}
function showHello() {
document.getElementById("demo").innerHTML = sayHello();
}
</script>
Try it Yourself »
Common Mistakes
Forgetting Parentheses
Writing sayHello does not run the function. Use sayHello().Expecting Output
Calling a function returns a value, but you must display it to see it.Expecting Return
If your function does not return a value, storing it in a variable will give undefined.
Next Chapter
Next: Function Parameters and Arguments
