When is it proper to add a return at the end of a JavaScript function?

问题

I have seen some developers place a return at the end of their JavaScript functions like this:

$(".items").each(function(){
    mthis = $(this);
    var xposition = some .x() position value;
    if(xposition < 0){
        mthis.remove();
        return;
    }
});

Is having a return even necessary? I know that return false cancels out of a loop early and I know that return x, returns a value, but having just return??? What does that mean?

Sorry - I forgot to put an end } at the very end of the code. the return is in the if conditional.

New Update - just discovered that the intent of the loop was to cancel out the nth .item that entered the loop. so return false is my replacement for a simple return; (which means undefined anyway). Thanks everyone for the help!

回答1:

Your example is specific for how jQuery.each handles the return values from a loop function. From the docs:

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

So there you have it, returning anything else than false makes no difference, it will just move on to the next iteration. false, however, breaks the loop.

Note that return; is exactly the same as return undefined;.

回答2:

Having return with not proceeding it at the end of the function doesn't really do anything. Returning "this" however allows for method chaining.

回答3:

It's just a way to end the function execution without necessarily having to choose a proper return value. At the end of the function it really doesn't make a difference.

回答4:

The behaviour of return; anywhere in your function is exactly the same as when the code reaches the end of your function, the caller receives undefined.

In that code it's used together with a condition. I would have to assume that you didn't show the full code.

This method is used often to jump to the end of the function when a pre-condition is not met as it might be more readable than five indentations, each with another condition.

回答5:

The problem is that your opening and closing { } braces don't line up, so depending on which is correct, this will perform differently. If the closing brace for the if is after the return, then this will act like a continue in a regular for loop.

$(".items").each(function(){
    mthis = $(this);
    var xposition = some .x() position value;
    if (xposition < 0) {
        mthis.remove();
        return;
    }
}

As it turns out, a continue at the end of a for loop is also implicit, so this doesn't really serve a purpose.

Of course, if you're question is more theoretical, the answer is that generally it doesn't make a difference:

function doSomething() {
    alert("Hello, world");
    return; //purely a matter of preference
}

Here, the method would implicitly return even without the direct invocation of return by virtue of being at the end of the code-block; in some cases it can be useful just as an indicator that you are at the end of the function, particular if there was a lot of nesting. If not at the bottom, it definitely makes a difference, since nothing after the return; will be executed. Otherwise the difference is purely stylistic. Saves you a few characters to leave it out of course!

回答6:

Just like return false, it'll cancel out of the block (in this case, the function) early. The return value will be undefined.

At the end of a function, it's equivalent to not using a return statement at all, but your example doesn't look like the end of a function to me.

EDIT: Just to make it a bit clearer: This particular return statement is at the end of the surrounding if clause, not the function as a whole. In other words, the condition of the if clause specifies a situation in which the function should terminate mid-way.

EDIT 2: By "the function", I refer to the inner, anonymous function. return;, being equivalent to return undefined;, will indeed cause jQuery.each() to move on to the next item. (Also, it seems that I was mistaken about there being more code in the function; given the OP's edit to the code sample, it really does look like a pointless return statement.)

来源：https://stackoverflow.com/questions/12709710/when-is-it-proper-to-add-a-return-at-the-end-of-a-javascript-function

标签

javascript

jquery