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:
Examples
The function below returns the text "Hello World".
But it will not run before you call it.
Example
function sayHello() {
return "Hello World";
}
The code below calls the function.
But it does not use the result.
Example
function sayHello() {
return "Hello World";
}
sayHello();
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.
Example
function sayHello() {
return "Hello World";
}
let greeting = sayHello();
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());
<p id="demo"></p>
<script>
function sayHello() {
return "Hello World";
}
document.getElementById("demo").innerHTML = sayHello();
</script>
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);
Accessing a function without () returns the function itself and not the result:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;
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.
Example
function sayHello() {
return "Hello World";
}
let text = sayHello;
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();
}
<p id="demo"></p>
<button onclick="showHello()">Click Me</button>
<script>
function sayHello() {
return "Hello World";
}
function showHello() {
document.getElementById("demo").innerHTML = sayHello();
}
</script>
Common Mistakes
-
Forgetting Parentheses ()
sayHello does not run the function. You must use sayHello().
-
Expecting Return
Some functions do not return a value.
-
Expecting Output
If a function returns a value, you must display it to see it.
Quiz
What is the difference between sayHello and sayHello() ?
Next Chapter
Function Parameters
- Parameters allow you to send values to a function
- Parameters are listed in parentheses in the function definition