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.
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
return "Hello World";
}
console.log(sayHello());
<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
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:
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
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.
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
return "Hello World";
}
function showHello() {
document.getElementById("demo").innerHTML = sayHello();
}
<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
- Parameters allow you to send values to a function
- Parameters are listed in parentheses in the function definition