bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

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:

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.

Previous

JavaScript While Loops

Next

JavaScript Hoisting