how can function calls be used in place of loop jump?

Question

I'm currently studying how to use "labeled" loops in javascript on MDN and have encountered the following phrase.

I understand that labeled loops are sometimes used to transfer code execution to a outer loop several layers up. But I dont understand what the author meant by "often function calls can be used instead of loop jumps". Could someone please provide me with an example?

Answer 1

Here's an example, that searches a 2D array, array, for element n, and prints the coordinates when found:

function searchAndLogCoords(array, n) {
    // The "searching" portion of the function
    outterLoop:
    for (i = 0; i < array.length; i++) {
        row = array[i]

        for (j = 0; j < row.length; j++) {
            // Break out of the "searching" portion of the function,
            // and continue on to the "logging" portion
            if (row[j] == n) break outterLoop
        }
    }

    // The "logging" portion of the function
    console.log("x: " + i + ", y: " + j)
}

var array = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];

searchAndLogCoords(array, 1)

Here's the same code, better written by extracting the "searching" part into its own function:

searchAndLogCoords(array, 1)
function searchAndLogCoords(array, n) {
    for (i = 0; i < array.length; i++) {
        row = array[i]

        for (j = 0; j < row.length; j++) {
            if (row[j] == n) return {x: i, y: j}
        }
    }
}

function getCoords(array, n) {
    var coords = searchAndLogCoords(array, n)
    console.log("x: " + coords.x + ", y: " + coords.y)
}

var array = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];

searchAndLogCoords(array, 1)

You can try this online, here.

Answer 2

I can think of two somewhat common cases for needing labels. The first one is when you need to exit nested loops.

outerloop: while (conditionA) {
  innerloop: while (conditionB) {
    doSomething();
    if (exitCondition) break outerloop;
  }
}

One way this could be made is with the following code instead:

(function () {
  while (conditionA) {
    while (conditionB) {
      doSomething();
      if (exitCondition) return;
    }
  }
})();

This takes advantage of a self-executing function's return statement to break out of both loops at once.

The other case would be when you want to continue an outer loop without finishing the current one.

outerloop: while (conditionA) {
  innerloop: while (conditionB) {
    doSomething();
    if (continueCondition) {
      continue outerloop;
    }
  }
  doSomething(); // we don't want this to run if continueCondition is true
}

Which I managed to replace with this:

function innerLoop() {
  doSomething();
  return continueCondition;
}

while (conditionA) {
  if (innerLoop()) continue;
  doSomething(); // we don't want this to run if continueCondition is true
}

Which I decided to make with a named function for readability this time. But honestly, I'd find a way to rewrite the loop in a way that doesn't require a continue like that if I could. Complex loops are hard to maintain.

The important thing to remember is that there's not just one way to do things.