JavaScript executing code after a false return

Question

I am using a function to check if required fields are filled. I have these two functions, that should do the same, however the first one does not. Shouldn't javascript stop executing code, after it meets a return?

This functions returns true:

//Checks if various stages are ready
function trnReady(area) {
    switch (area)
    {
        case 'settings':
            $('input.required').each(function(){

                if($(this).val() == '')
                {
                    return false;
                }
            }); 
        break;
    }
    return true;
}

While this one returns false:

//Checks if various stages are ready
function trnReady(area) {
    var r = true;
    switch (area)
    {
        case 'settings':
            $('input.required').each(function(){

                if($(this).val() == '')
                {
                    r = false;
                }
            }); 
        break;
    }
    return r;
}

I thought the first return would stop executing code? I'm wondering if it has anything to do with scope?

Answer 1

In first code snippet return false; stops execution only of inner function passed to jquery each method. Also it stops jquery iteration accordingly to jquery API. But in any case trnReady returns true.

Second code snippet is correct, but you can optimise it, replacing r = false; to return r = false; (it will stop iteration by jquery when you already know that one of fields isn't filled)

Answer 2

In the first snippet, the return applies to the function that is the argument of each . The return does not apply to the trnReady function. So, the return false is for the anonymous function in each .

In the second snippet, the return is correctly the return of the trnReady function, so it works fine.

Answer 3

Each of these functions contains a second function nested inside of it, and it's the returns inside the nested functions that you're expecting to take effect - but they don't. You can't return to the outer function's caller from the inner function. The best you can do is set a variable in the inner function, and then return that variable's value from the outer function, as your second example does.

Answer 4

In the first example, your function return false but only in scope of current case statement. Your false has any effect, any action is not invoked when it occured.

EDIT: Return false has effect only inside anonymous function which you passed to .each .

Answer 5

the jQuery each is an iterator that passes each object to your defined function.

When the defined function returns true, the iteration continues (to the next object)l When the function return false, the iteration stops.

But only the iteration is stopped

The code hits break , but there is no other return statement to be executed in such a case.