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();

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;

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;

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.