What has return false to do within .each() method? How can it stop the loop?

Question

$("button").click(function () {
    $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow");
        if($(this).is("#stop")) {
            $("span").text("Stopped at div index #" + index);
            return false;
        }
    });
});

What has return false to do within .each() method?

possible duplicate of [How to Break out of Jquery's Each Loop](http://stackoverflow.com/questions/1784780/how-to-break-out-of-jquerys-each-loop) — epascarello, May 01 '13 at 18:27
What do you expect `return false` to actually do? If it returns from the function, the loop is going to stop, isn't it? — Robert Harvey, May 01 '13 at 18:27
@RobertHarvey it is meant for cancelling default action and event propagation — Maizere Pathak.Nepal, May 01 '13 at 18:29
@Maizere: When you return from the click handler. At that point in your code, you are inside another function. — gen_Eric, May 01 '13 at 18:30
It's not working against its definition. It's working in compliance to the jQuery API. — , May 01 '13 at 18:31
@DaveNewton: You won't be in the *function* anymore. Whether or not you keep looping depends on what the return value is. — gen_Eric, May 01 '13 at 18:32
You're returning from inside the `.each`'s callback. `return`ing `false` works as `break` while returning any non-false value works as `continue`. — Fabrício Matté, May 01 '13 at 18:34
@DaveNewton: The "loop" is actually jQuery's `.each` function. It decides whether to call the function again or not depending on the return value (and if there are elements left). — gen_Eric, May 01 '13 at 18:37

gen_Eric · Accepted Answer · 2013-05-01T18:34:00.330

In jQuery's .each, return false; is like using break; in a "normal" for loop.

On the flip side, return true; is like continue;!

Docs: http://api.jquery.com/each/

return false does just that. Returns false. What the calling function does with the return value is a different story. What it's "meant" to do all depends on what function is doing the return. return false is just meant to return false.

If you were to return from the click handler (and not from the .each), then it would stop the default click action, but at that point in your code, you are inside another function.

score 5 · Answer 2 · 2013-05-01T18:40:45.913

"How can it stop the loop?"

Like this:

//    array        callback
each([1,2,3,4,5], function(i, val) {
    if (val === 3)
        return false;
})

function each(array, callback) {
    // iterate the collection
    for (var i = 0; i < array.length; i++) {

        // Invoke the callback, and store its return value
        var result = callback(i, array[i]);

        // If it returned `false`, break the loop
        if (result === false) {
            break;
        }
    }
}

What the value returned from a function is "meant" to do is ultimately up to the caller of that function.

In the above example, you pass the callback to the each() function, and the each() function calls it. Since the code in each() is the caller, it gets to decide what to do in response to the value returned (if anything).

Jonathan Lonowski · Answer 3 · 2013-05-01T18:46:28.010

it is meant for cancelling default action and event propagation

The issue is you have 2 functions and are expecting return false to affect the "other" one. return statements apply to the closest function, which in this case is the one passed to .each().

To use return false for the .click(), you'll have to use it within that function alone:

$("button").click(function () {
    // either here...

    $("div").each(function (index, domEle) {
        // ...
    });

    // ...or here
});

Since it appears to depend on the .each(), you'll want to create a variable that can be modified as needed and then return that at the end:

$("button").click(function () {
    var clickResult; // `undefined` = "no change"

    $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow");
        if($(this).is("#stop")) {
            $("span").text("Stopped at div index #" + index);
            clickResult = false;
            return false; // remove if you want the `.each()` to continue regardless
        }
    });

    return clickResult;
});

score 0 · Answer 4 · answered May 01 '13 at 18:28

0

The return keyword does indeed break out of loops.

Cancelling a default action in JavaScript is usually done with event.preventDefault();, though I’m not sure which default action you’re trying to cancel in this context.

answered May 01 '13 at 18:28

Jezen Thomas

13,619
6
53
91

2

return false also cancels the event propagation – Maizere Pathak.Nepal May 01 '13 at 18:30
If there were an event involved – Kevin B May 01 '13 at 18:46

score 0 · Answer 5 · answered May 01 '13 at 18:39

0

When the callback to .each returns false, jQuery uses break to break it's internal loop. See here:

https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L616

this is why returning false stops the $.each loop from progressing.

Using break will have no effect due to scope, which is why the return false functionality was added.

answered May 01 '13 at 18:39

Kevin B

94,570
16
163
180

1

The "`return false` functionality was added" because you can't use a `break;` statement in a function (outside of a looping structure). – gen_Eric May 01 '13 at 18:42
I just wanted to clarify :-) – gen_Eric May 01 '13 at 18:43

What has return false to do within .each() method? How can it stop the loop?

5 Answers5