Flash cards
Review the key moves
What is the main idea behind Invoking JavaScript Functions?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ sayHello() {Put the learning moves in the order that makes the concept easiest to apply.
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:
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;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();
}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.