bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/JavaScript Foundations
JavaScript•JavaScript Foundations

JavaScript Function Return

Returning Values from Functions

A function can return a value back to the code that called it.

The return statement is used to send a value out of a function.

The return Statement

When a function reaches a return statement, the function stops executing .

The value after the return keyword is sent back to the caller.

Example

function sayHello() {
  return "Hello World";
}
let message = sayHello();

The variable message now contains " Hello World ".

Returning a Calculated Value

Most functions return the result of a calculation or an operation.

Example

function multiply(a, b) {
  return a * b;
}
let result = multiply(4, 5);

Using Return Values in Expressions

The returned value can be used anywhere a value is expected.

You can use a function call inside another expression.

Example

function multiply(a, b) {
  return a * b;
}
let total = multiply(2, 3) * 10;

Return Values

A function can return any type of value (not only numbers).

Example

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}
let name = fullName("John", "Doe");

Return Statements Stop Execution

Code written after a return statement will NOT be executed .

Example

function multiply(a, b) {
  return "Done";
  // Next line will never run
  return a * b;
}
let result = multiply(4, 3);

Functions Without return

If a function does not return a value, the return value will be undefined .

Example

function multiply(a, b) {
  let x = a * b;
}
let result = multiply(4, 3);

The value of result is undefined .

Returning Values Early

You can use return to stop a function early, based on a condition.

Example

function checkAge(age) {
  if (age < 18) {
    return "Too young";
  }
return "Access granted";
}

Returning Values to HTML

Returned function values are often used to update HTML content.

Example

<p id="demo"></p> <script> function toCelsius(farenheit) {
  return (5 / 9) * (farenheit - 32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>

Common Mistakes

  • Forgetting Return A function without return sends back undefined .
  • Expecting Code after Return to Run Code after return is ignored.
  • Confusing console.log() with Return console.log() shows output but does not return a value.
  • Expecting Return If your function does not return a value, storing it in a variable will give undefined .

Expecting Return

Function Arguments

  • Function parameters and arguments are distinct concepts
  • Parameters are the names listed in the function definition
  • Arguments are the values received by the function

Previous

JavaScript Continue

Next

JavaScript toString()

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

Returning Values from FunctionsThe return StatementReturning a Calculated ValueUsing Return Values in ExpressionsReturn ValuesReturn Statements Stop ExecutionFunctions Without returnReturning Values EarlyReturning Values to HTMLCommon MistakesExpecting Return