How to Use the return Statement - Images: Japanese

Hey there, everyone!

Next up, let's take a look at the return statement.

The return statement lets you specify what value a function (method) gives back when it runs. At the same time, it also stops the function's execution right there — which makes it an extremely common piece of syntax.

Let's write some code using the return statement. Define a function as you normally would, then write 'return' inside it followed by the value you want to send back. In the sample below, the function returns '0'.

function hoge(){
    return 0; // Specifies that '0' will be returned.
}
var x = hoge(); // The variable 'x' gets assigned the value '0' returned by the function 'hoge'.

console.log(x); // Outputs '0'.

function hoge(){ // The return value of this function is '0'.
    return 0;
}

You can also put an expression after 'return'.

function hoge(){
    return 1 + 2; // Returns the result of '1 + 2', which is '3'.
}
var x = hoge(); // The variable 'x' gets assigned the value '3' returned by the function 'hoge'.

console.log(x); // Outputs '3'.

This means you can do things like add up arguments and return the result:

function hoge(text1, text2){
    return text1 + text2; // Returns 'text1' and 'text2' added together (string concatenation).
}
var x = hoge("Hello ", "World"); // The variable 'x' gets the concatenated value of 'Hello ' and 'World'.

console.log(x); // Outputs 'Hello World'.

By the way — just because a function has a return statement doesn't mean you have to capture its return value in a variable. You can call a function with a return statement just like any other function:

function hoge(){
    return 0; // Returns '0'.
}
hoge(); // Calling 'hoge' gives back '0', but you don't have to assign it anywhere — that's perfectly fine.

In JavaScript, the return statement can also be used without a value, like return;. In that case, undefined is returned.

function hoge(){
    return; // An empty return statement. Returns 'undefined'.
}
var x = hoge(); // The variable 'x' gets 'undefined' returned by the function 'hoge'.

console.log(x); // Outputs 'undefined'.

One important note: the return statement can only be used inside a function (method). Writing it outside a function causes an error:

return; // Writing a return statement outside a function causes an error.

function hoge(){
    return; // An empty return statement. Returns 'undefined'.
}
var x = hoge(); // The variable 'x' gets 'undefined' returned by the function 'hoge'.

console.log(x); // Outputs 'undefined'.

Also, once a return statement executes, the function stops right there.

function hoge(){
    return; // Execution stops here.
    alert("Hello World"); // This never runs because the return statement comes before it.
    alert("Hello World2"); // This never runs either.
}
var x = hoge(); // The variable 'x' gets 'undefined' returned by the function 'hoge'.

console.log(x); // Outputs 'undefined'.

You can use this to build logic that exits a function early — for example, bailing out if an element isn't found:

function changeColor(id, color){ // Changes the text color of an element.
    var x = document.getElementById(id); // Tries to get the element. Returns 'null' if it can't be found.
    if(x === null) return; // If 'x' is 'null', the return statement fires and the function exits — preventing an error.
    x.style.color = color;
}

This pattern — using a return statement to exit early — is something you'll use constantly. Keep it in your toolkit. Honestly, about 98% of return statements in JavaScript code are there specifically to stop a function mid-execution.

function hoge(){} // An empty function.

var x = hoge(); // A function with no return statement gives back 'undefined'.
console.log(x); // Outputs 'undefined'.

function hoge(){
    return [0, 1]; // Returns '[0, 1]'.
}
var x = hoge(); // '[0, 1]' is assigned. Note that x is an array.
console.log(x); // Outputs '[0, 1]'.

function hoge2(){
    return {"hoge": 0, "hoge1":1}; // Returns '{"hoge": 0, "hoge1":1}'.
}
var y = hoge2(); // '{"hoge": 0, "hoge1":1}' is assigned. Note that y is an object.
console.log(y); // Outputs '{"hoge": 0, "hoge1":1}'.

function hoge(){
    return // A semicolon gets inserted here automatically, so the return value ends up as 'undefined'.
    0;
}

var x = hoge();
console.log(x); // Outputs 'undefined'.

function hoge(){
    return { // This is fine.
        "hoge": 0,
        "hoge1":1
    };
}
var x = hoge();
console.log(x); // Outputs '{"hoge": 0, "hoge1":1}'.

And that wraps up the return statement. The return statement exists in other programming languages too, but the exact behavior can vary quite a bit — so pay attention to how return values work in each language you use.

In the next article, we'll go over null and undefined. Keep it up — see you there!

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする