Invoking JavaScript Functions
Calling a Function
A JavaScript function runs when it is called.
To call a function, write the name followed by parentheses like name().
Function Invocation
The code inside a function is NOT executed when the function is defined.
The code inside a function will execute when "something" invokes the function:
- When it is called from JavaScript code
- When an event occurs (a user clicks a button)
- Automatically (self invoked)
It is common to use the term invoke, because a function can be invoked without being called.
It is also common to use say:
- call a function
- call upon a function
- start a function
- execute a 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();
Functions are Invoked with ()
The () operator invokes a function.
Example
toCelsius() invokes the toCelsius function:
// Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
// Call the toCelcius() function
let value = toCelsius(77);
Try it Yourself »
Accessing a function without (), returns the function itself and not the result:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;
Try it Yourself »
Note
In the example above
toCelsius refers to the function itself.
toCelsius(77) refers to the function result.
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"; }
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 ()
sayHello does not run the function.
You must use sayHello().Expecting Return
Some functions does not return a value.
Expecting Output
If a function returns a value, but you must display it to see it.
Quiz
What is the difference between sayHello and sayHello() ?
Next Chapter
- Parameters allow you to send values to a function
- Parameters are listed in parentheses in the function definition
