Use return to send a value from a JavaScript function to its caller, then use the function call where you need that value. For example, const result = getValue(); stores the returned result. Calling console.log() inside a function only displays a value; it does not return it.
Return a value, then use the function call
The return statement ends a function and specifies the value the caller receives. The function call expression evaluates to that value.
function getValue() {
return 42;
}
const value = getValue();
console.log(value); // 42You can store the result, pass it to another function, or use the call directly in a larger expression:
function add(a, b) {
return a + b;
}
const total = add(2, 3); // 5
console.log(add(2, 3) * 10); // 50Returning a local variable works the same way as returning an expression. Use whichever form makes the calculation easiest to read:
#1 Best Overall
function calculateArea(width, height) {
const area = width * height;
return area;
}
// Equivalent:
function calculateArea(width, height) {
return width * height;
}See MDN’s JavaScript return reference and guide to return values.
Why does a function return undefined?
An ordinary function returns undefined if it reaches its end without a value-bearing return. A bare return; also returns undefined, but exits the function immediately.
Rank #2
function showMessage() {
console.log("Hello");
}
const result = showMessage(); // Logs "Hello"; result is undefinedLogging is not returning
console.log(result) writes a value for inspection; it does not make that value the result of the function call. If the caller needs the value, return it and then capture or use the call:
function getResult() {
const result = 10 + 5;
return result;
}
const answer = getResult(); // 15Keep the expression with return
Do not put a line break between return and the expression. JavaScript’s automatic semicolon insertion treats the following example as a bare return, so it produces undefined:
function getValue() {
return
42;
}Keep the expression on the same line, or open a parenthesis after return when the expression spans multiple lines:
function getValue() {
return 42;
}
function getTotal() {
return (
20 +
22
);
}MDN documents these behaviors in its return statement reference and function reference.
Rank #4
Return multiple related values together
A function call has one return value, but that value can be an object or an array. An object is often a clear way to return several named results:
function getRange(values) {
return {
min: Math.min(...values),
max: Math.max(...values),
};
}
const { min, max } = getRange([3, 8, 5]);
console.log(min, max); // 3 8Arrays are useful when the values form an ordered group and their positions are clear to the caller. MDN’s functions reference covers JavaScript functions and returned values.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Returning a function is not the same as calling it
return someFunction; returns the function itself. return someFunction(); calls it and returns the value produced by that call.
function getValue() {
return 42;
}
function getFunction() {
return getValue; // Returns the function
}
function getComputedValue() {
return getValue(); // Returns 42
}Choose based on what the caller needs: a result, a deliberate side effect such as logging, or a function it can call later.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
