bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
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

This chapter

Overview
51

Lessons

194m

Read time

1. JavaScript Tutorial2. JavaScript Syntax3. JavaScript Operators4. JavaScript if5. JavaScript Loops6. JavaScript Functions7. JavaScript Scope8. JavaScript Data Types9. JavaScript Style Guide10. JavaScript Introduction11. JavaScript Statements12. JavaScript Arithmetic13. JavaScript else14. JavaScript For Loop15. JavaScript Functions16. JavaScript Code Blocks17. JavaScript Primitives18. JavaScript Best Practices19. JavaScript Where To20. JavaScript Comments21. JavaScript Assignment22. The JavaScript Ternary Operator23. JavaScript While Loops24. Invoking JavaScript Functions25. JavaScript Hoisting26. JavaScript Built-In Objects27. JavaScript Common Mistakes28. JavaScript Output29. JavaScript Variables30. JavaScript Comparison31. JavaScript Switch Statement32. JavaScript Break33. JavaScript Function Parameters34. JavaScript Use Strict35. JavaScript typeof36. JavaScript Performance37. JavaScript Let38. JavaScript Conditionals39. JavaScript Booleans40. JavaScript Continue41. JavaScript Function Return42. JavaScript toString()43. JavaScript Const44. JavaScript Logical Operators45. JavaScript Control Flow46. JavaScript Function Arguments47. JavaScript Type Conversion48. JavaScript Datatypes49. JavaScript Function Expressions50. JavaScript Destructuring51. JavaScript Arrow Functions

On this page

Calling a FunctionFunction InvocationUsing the Returned ValueDisplaying the ResultCalling a Function Many TimesFunctions are Invoked with ()Calling vs Referencing a FunctionFunctions Can Be Called from AnywhereCommon Mistakes