Javascript function doesn't break on return?

Question

I know you are supposed to be able to break out of an each statement by returning, which is what I'm trying to do, but I must be doing something wrong and it seems so simple I can't find it.

I have code like this

function create() {
  var test = hasThing();
  if (test) {
    $('#myForm').submit();
  } else {
    alert('you suck!')
  }
}

function hasThing() {
  $('.selects').each(function() {
    if (this.value != "") {
      return true;
    }
  });
  return false;
}

I have set breakpoints on "return true;" and hit it but var test is always false because for some reason the .each() loop continues and the hasThing() function continues. I've tried switching things around so that I return false in the .each() just in case for some reason that mattered but it didn't change anything.

I don't get it. Seems counter to how the documentation says it should work.

To break .each you have to return false, and returning from inside the each loop does not return from the outer function. — adeneo
– adeneo, Commented Jul 21, 2014 at 17:40
Seems counter to how the documentation says it should work. - the documentation says "You can stop the loop from within the callback function by returning false". How is the behavior not inline with the docs? — Ian
– Ian, Commented Jul 21, 2014 at 17:44

dee-see · Accepted Answer · 2014-07-21 17:43:13Z

15

Your return true; statement returns from the anonymous function given to each. The return false; line is always executed which explains why var test is always false.

Change your code to

function hasThing() {
  var hasThing = false;
  $('.selects').each(function() {
    if (this.value != "") {
      hasThing = true;
      return false; // breaks the $.each, but does not return from hasThing()
    }
  });
  return hasThing;
}

answered Jul 21, 2014 at 17:43

dee-see

24.1k6 gold badges63 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

erosebe Over a year ago

Thank you. That explains my mistake very well.

adeneo · Accepted Answer · 2017-01-05 19:58:50Z

3

You could use Array.some() to check if any of the selects have a selected value

function hasThing() {
    return $('select').toArray().some(function(el) {
        return el.value != "";
    })
}

function create() {

    var test = hasThing();

    if (test) {
        alert('at least one select was changed');
        //$('#myForm').submit();
    } else {
        alert('you suck!');
    }
}

function hasThing() {
	return $('select').toArray().some(function(el) {
    	return el.value != "";
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select at least one option !</p>
<form id="myForm">
    <select class="selects">
        <option value="">blank</option>
        <option value="2">option1</option>
    </select>
    
    <select class="selects">
        <option value="">blank</option>
        <option value="2">option1</option>
    </select>
    
    <input type="button" onclick="create()" value="submit" />
    
</form>

edited Jan 5, 2017 at 19:58

answered Jul 21, 2014 at 17:43

adeneo

319k29 gold badges410 silver badges392 bronze badges

12 Comments

JDB Over a year ago

Much easier to read (and, thus, maintain), though potentially much less efficient as the other suggestion supports "short-circuiting". Depends on how complex the this.value = logic actually is and how many elements are matched. Wish vanilla jQuery had a ".any()" function.

adeneo Over a year ago

@JDB - It does, Array.some, but then the values would have to be mapped to an array, it's not really any more efficient, using a filter shouldn't be an issue here.

JDB Over a year ago

Doh. That would save you, on average, half the computation cycles (and time) and would not be particularly more difficult to implement.

adeneo Over a year ago

@JDB - I don't see how, it would look something like -> jsfiddle.net/Lxg4k/1

Pointy Over a year ago

... [].some.call($('.selects'), function(e) { return !!e.value; }) ?? (or with $.trim() of course)

|

Collectives™ on Stack Overflow

Javascript function doesn't break on return?

2 Answers 2

1 Comment

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related