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;  
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

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());

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
mellen profile image
Matt Ellen

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

return 3;
Enter fullscreen mode Exit fullscreen mode

is not the same as

return
3;
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
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>
Enter fullscreen mode Exit fullscreen mode

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

   return ( 
          <div>
              <span style={someStyle}>{content}</span>
         </div>
    )
Enter fullscreen mode Exit fullscreen mode
Collapse
mellen profile image
Matt Ellen

Parenthesis insertion to combat semicolon insertion! Amazing 😁

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.