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

Question

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!

I haven't a clue about why people would do this (unless it's some insistence on always having a `return` statement), but `return;` at the end of the function body is precisely the same as omitting it. — lonesomeday, Oct 03 '12 at 13:40
you won't likely get better answers than [here](http://stackoverflow.com/q/3717420/944681) — Michal Klouda, Oct 03 '12 at 13:40

score 3 · Answer 1 · answered Oct 03 '12 at 13:42

3

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

answered Oct 03 '12 at 13:42

Jordan Denison

2,649
14
14

score 2 · Accepted Answer · answered Oct 03 '12 at 13:46

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;.

score 1 · Answer 3 · answered Oct 03 '12 at 13:39

1

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.

answered Oct 03 '12 at 13:39

Hugo Mota

11,200
9
42
60

skunkfrukt · Answer 4 · 2012-10-03T14:00:19.370

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.)

That is not true, `return false` in jQuery.each will break the loop. `return;` or `return undefined;` will continue the loop. — David Hellsing, Oct 03 '12 at 13:48
@David Good point. I was referring to the inner, anonymous function, though, as opposed to jQuery.each(). I will make another edit to remove any ambiguity. — skunkfrukt, Oct 03 '12 at 13:54

nbrooks · Answer 5 · 2012-10-03T13:56:51.300

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!

score 1 · Answer 6 · answered Oct 03 '12 at 13:52

1

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.

answered Oct 03 '12 at 13:52

Ja͢ck

170,779
38
263
309

yes, yes and yes. You are right jack. I just corrected the issue. so based on your thoughts, it still doesn't matter....ok that sounds good to me! – klewis Oct 03 '12 at 13:56
I just got done emailing the developer. he told me that he is not trying to abort the each() function with a return false, but simply wants to remove the current .item that is in the loop if it meets the conditional statement, then move on to the next .item that comes into the .each function. in that case would it then make sense to use a return; like i have above? – klewis Oct 03 '12 at 15:47
You can see the code that I'm talking about if you go here - http://gamequeryjs.com/demos/3/tutorial.js and search the code towards the mid section of the page for $(".enemy").each(function(){... you will then see the return; I am talking about. – klewis Oct 03 '12 at 15:56
I just discovered that using return false; produces the same results I am looking. so no need for simply return; in the if conditional statement. Thanks Jack for all the tips! – klewis Oct 03 '12 at 17:15
@blachawk return false; is not the same because that would also stop the .each() – Ja͢ck Oct 03 '12 at 18:03
I thought the same thing initially Jack but it's not stopping the .each() in my case. The current item leaves the DOM by its x position, and the .each loop continues to process to the next item... – klewis Oct 03 '12 at 18:18
@blachawk then xposition is never a negative number :) – Ja͢ck Oct 03 '12 at 18:26
I know. I checked web console and there are no errors thrown, and the dom continouse to process the .each function(). this is driving me crazy. if using return false will break the .each function(), how come I'm not seeing the loop stop? – klewis Oct 03 '12 at 18:30

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

6 Answers6