JavaScript: What is the return statement?

JavaScript tips & tricks in 3 minutes or less. Today’s topic: return — when to use it and what it does.

Photo by Oliver Thomas Klein

If you’re a new developer, it’s important you understand the role of the return statement in JavaScript.

Note: If you’re using Google Chrome, open up your developer console so you can type the examples in and code along. [WINDOWS]: Ctrl + Shift + J [MAC]: Cmd + Opt + J

Rule #1

Every function in JavaScript returns undefined unless otherwise specified.

To test this, we’ll just create an empty function, then invoke it:

function test(){};
test();
// undefined

As expected, when we invoke our function undefined is returned in the console.

Now we’ll actually specify a return value. Let’s recreate our test() function, but include the return statement this time:

function test(){
  return true;
};
test();
// true

As you can see, our explicitly returned true value replaces the default undefined value.

Rule #2

The return statement ends function execution

This is important. Using return causes your code to short-circuit and stop executing immediately.

Consider this example where we have two return statements in our test function:

function test(){
  return true;
  return false;
};
test();
// true

The first return statement immediately stops execution of our function and causes our function to return true. The code on line three: return false; is never executed.

Rule #3

The return statement returns a value to the function caller.

In the below example we’re creating a function named double() which returns double the value that is input:

let double = function(num) {
   return num * 2;
}

Since a value is being returned to the function caller, we can create a variable and set it equal to an invocation of our function:

let six = double(3);
// 6

Cool. We can even do it again, this time plugging in our six variable into our function:

let twelve = double(six);
// 12

Ending a Function

Since return stops a function’s execution immediately, it can also be used to interrupt or end a function.

Consider the following example:

let countTo = function(num){
  if(typeof num != 'number') return false;
  for(var i = 1; i <= num; i++){
    console.log(i);
  }
}

In this example, our function countTo() counts up to a user input number. However, if the user doesn’t input a number and instead inputs a string, Boolean, Array, etc. the function will short circuit and return false instead:

countTo(3);
// 1
// 2
// 3
countTo('cat');
// false

Interrupting a Loop/Function

return can also interrupt a loop and stop execution midway through. Here’s an example:

function stopAtThree(){
 for(var i = 0; i <= 10; i++){
   if(i === 3) return i;
 }
}

Even though our for loop can go all the way up to 10, it is interrupted at 3 where it returns and the loop stops executing.

stopAtThree()
// 3

Returning a Function

Finally, you can even return a function from within a function:

This example is a bit more complicated and introduces a JavaScript concept known as closures. If you want to learn more about returning functions, read my previous article: Understand Closures in JavaScript

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇ And don’t forget to check out my other recent articles:

• How I built an Interactive 30-Day Bitcoin Price Graph with React & an API
• And when you’re ready to really learn to build cool things, check out my Best Courses for Learning Full Stack Web Development