So far our functions have printed things. But most of the time, you want a function to calculate something and give the answer back to you, so you can use it later. That's what return does:
function add(a, b) {
return a + b;
}
const result = add(3, 4);
console.log(result);It prints
7
When JavaScript reaches return a + b, it works out a + b and sends that value back out of the function, to wherever the function was called. So add(3, 4) effectively becomes 7, and we store that in result.
Because a function call with a return turns into a value, you can use it anywhere you'd use a value:
console.log(add(10, 5));
console.log(add(1, 1) * 100);
console.log(add(add(1, 2), add(3, 4)));
console.log(`Two plus two is ${add(2, 2)}`);It prints
15 200 10 Two plus two is 4
That third one is fun: the inner calls run first (add(1, 2) is 3 and add(3, 4) is 7), and then the outer call adds those: add(3, 7) is 10.
This is the biggest point of confusion for new programmers, so let's be extra clear.
console.logshows a value to you, the human, in the console. The program can't use it afterwards.returngives a value back to the program, so it can be stored, used in math, or passed to another function.
function doubleAndShow(n) {
console.log(n * 2);
}
function doubleAndReturn(n) {
return n * 2;
}
const a = doubleAndShow(5);
const b = doubleAndReturn(5);
console.log(`a is ${a}`);
console.log(`b is ${b}`);It prints
10 a is undefined b is 10
doubleAndShow printed 10, but gave nothing back, so a is undefined. doubleAndReturn didn't print anything itself, but handed back 10, so b holds 10. If you want to use the answer, you need return.
Functions without return give back undefined
Every function gives back something. If there's no return statement, or return has nothing after it, the function gives back undefined.
Remember back in Kindergarten, when Node printed a mysterious undefined after console.log("Hi from Node!")? Now you know why! console.log is a function with no return value, so it gives back undefined, and the Node playground shows you what came back. Mystery solved. 🕵️
return stops the function
When JavaScript hits a return, the function ends immediately. Any code after it is skipped:
function checkAge(age) {
if (age < 0) {
return "That's not a real age!";
}
if (age < 18) {
return "Minor";
}
return "Adult";
console.log("This line never runs.");
}
console.log(checkAge(-3));
console.log(checkAge(12));
console.log(checkAge(40));It prints
That's not a real age! Minor Adult
This is super useful. Using return early to handle special cases at the top of a function is called a guard clause, and it keeps your code nice and flat instead of deeply nested.