bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/JavaScript Foundations
JavaScript•JavaScript Foundations

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.

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 does not return a value.

Expecting Output

If a function returns a value, but you must display it to see it. 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

Previous

JavaScript While Loops

Next

JavaScript Hoisting