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();
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.
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());
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
// 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;
Note: In the example above
toCelsiusrefers 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;
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();
}
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.
Note: Next Chapter Function Parameters Parameters allow you to send values to a function Parameters are listed in parentheses in the function definition
