DEV Community

Cover image for What does return do in JavaScript
Coderslang: Become a Software Engineer
Coderslang: Become a Software Engineer

Posted on Originally published at learn.coderslang.com

What does return do in JavaScript

Like other programming languages, JavaScript allows using return statements in functions. A return statement does the following:

  • Halts function execution and returns control to calling module
  • Returns one or many values. This is optional.

In this tutorial, you'll learn more about syntax and usage of this return statement.

The general syntax

The return statement has the following syntax:

return value;  
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

The keyword value refers to a value that will be returned by your function. This is optional. You can use a return statement without specifying any value.

You can use a single value variable such as string, integer, etc to return a single value.

You can use an array with a return statement, if you need return many values.

The return statement also can return objects of user defined types.

Coding Samples

Here comes a few simple examples. It helps in learning various ways to use return statements in JavaScript functions.

You can use the return statement to put an immediate halt in function execution and return a value -

function checkPrimeNumber(num) {
    if (num == 0)
        return true; 
    if (num == 1)
        return false; 
    for (i = 2; i < num / 2; i++) {
        if (num % i == 0)
            return false;
    }
    return true;
}

console.log(checkPrimeNumber(7));
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

The function checkPrimeNumber() accepts a number as parameter. It checks if the number is a prime number or not. Once it makes a decision, it halts execution and return a true or false value to calling module.

The example passes a prime number, 7 as input. Thus the program responds with a true value. You can try running the source code with different input values.

Often developers use a return statement with no value, to stop the function execution. The below example uses the function greetUser() to display a greetings message to the user. The function uses a return statement with no value to halt the function execution.

function greetUser(name) {
    alert("Hello " + name + "!");
    return;
}
console.log(greetUser("Steve"));
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

The program outputs a message, "Hello Steve!".

A return statement can return user-defined types also. The below functions return JavaScript objects and an array of objects.

//Example of a return statement returns an object
function returnObj(FirstName, LastName, Course) {
    var student = {
        firstName: FirstName,
        lastName: LastName,
        course: Course
    };
    return student;
}

console.log(returnObj("John", "Smith", "Chemistry"));

// Example of a return statement returns an array of objects
function returnObjectArray() {
    var student = [{
        firstName: "John",
        lastName: "Smith",
        course: "Physics"
    }, {
        firstName: "Steve",
        lastName: "Owen",
        course: "Chemistry"
    }];
    return student;
}

console.log(returnObjectArray());

ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

Any JavaScript console can run the above source code. You can try experimenting, modifying these programs, or writing something new.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Top comments (3)

ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”
 
mellen profile image
Matt Ellen-Tsivintzeli •

Fun fact about return statements. They get semicolon insertion if they're by themselves. That is:

return 3;
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

is not the same as

return
3;
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

While it doesn't usually come up, because who would write code like that?, it is a difference between javascript and say, c or c++ where both return styles would return 3.

ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”
 
miketalbot profile image
Mike Talbot ⭐ •

Agreed, but it's more likely to write code like this in React...

   return 
          <div>
              <span style={someStyle}>{content}</span>
         </div>
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”

Which is why most editors will insert a parenthesis....

   return ( 
          <div>
              <span style={someStyle}>{content}</span>
         </div>
    )
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ” ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”
ðŸ”ī Hot News: coderslang/what does return do in javascript cg - āļŠāļĢāļļāļ›āļ”āļĢāļēāļĄāđˆāļēāļĨāđˆāļēāļŠāļļāļ”
 
mellen profile image
Matt Ellen-Tsivintzeli •

Parenthesis insertion to combat semicolon insertion! Amazing 😁