Label statements in JS loops

GoTo a specific point in the workflow of a JS loop

JavaScript labels support the GoTo^[1] programming construct. Although GoTo's are often controversial in many programming languages since they can reduce readability and lead to "spaghetti" workflows, GoTo's serve to change the execution workflow of a program to a predetermined line of code.

In the context of for loops, labels can be particularly helpful to change the execution workflow in nested loops. While the break and continue statements are used to completely exit a loop or prematurely exit a loop iteration, they do so in the context of a single loop. In order to exit loop iterations in either form when more than one loop is involved, label statements are used in conjunction with the break and continue statements to indicate to what line of code to break or continue a workflow.

Label names in JavaScript are declared as words followed by a colon : to indicate a potential location where workflow control can be sent, which means they're typically declared right before the start of a for loop. In order to send workflow control to a given label, the break and continue statements are used in conjunction with a label's name, where a break or continue statement is followed by a label name. It's worth pointing out label statements are applicable to any JavaScript type of loop and not just loops created with the for statement presented earlier.

Listing 6-3 illustrates the use of labels in for loops.

Listing 6-3. For loops with labels

let primeNumbers = [2,3,5,7,11];

const primeLength = primeNumbers.length;

// Outer label
xPlane:
for (let x = 0; x < primeLength; x++) {
  // Inner label
  yPlane:
  for (let y = 0; y < primeLength; y++) {
     console.log("Processing ", primeNumbers[x], primeNumbers[y]);
     if (primeNumbers[x] == primeNumbers[y]) { 
      console.log("Symmetrical coordinate ", primeNumbers[x], primeNumbers[y]);
      // Continue to outer label after symmetrical match
      continue xPlane;
     }
  }
}


let vowels = ["a","e","i","o","u"];

const vowelsLength = vowels.length;

// Placeholder array to use inside loop
let diphthongs = [];

// Outer loop
outerLoop:
for (let i = 0; i < vowelsLength; i++) {
  // Inner loop
  innerLoop:
  for (let j = 0; j < vowelsLength; j++) {
    // Continue to inner loop if vowels are the same
    if (vowels[i] == vowels[j]) { 
      continue innerLoop;
    }
    // Add up to ten diphthongs to diphthongs array 
    if (diphthongs.length < 10) { 
      diphthongs.push(`${vowels[i]}${vowels[j]}`);
    // Break to outer label after ten diphthongs
    } else { 
      break outerLoop;
    }
  }
}
// Output all diphthongs added to diphthongs array
console.log("First ten diphthongs ", diphthongs);

The first example in listing 6-3 creates a pair of loops to iterate over the primeNumbers array to output coordinates. Notice that preceding each for statement are the labels xPlane: and yPlane:. When the values for each iteration in primeNumbers are the same, the symmetrical coordinate is logged and the continue xPlane; statement is used to send the workflow back to the start of the outer loop and avoid making unnecessary iterations over values that aren't symmetrical. The log statement console.log("Processing ", primeNumbers[x], primeNumbers[y]); confirms the continue xPlane; statement works, since coordinates where values of the outer loop are larger than the inner loop are never processed.

The second example in listing 6-3 creates a pair of loops to iterate over the vowels array to place diphthongs in a separate array. Notice that preceding each for statement are the labels outerLoop: and innerLoop:. When the values for each iteration in vowels are the same, the continue innerLoop; statement is used which has the effect of a plain continue statement because it's applied to the inner most loop. If the values for each iteration in vowels are the same, a diphthong is created with the values and added to the diphthongs array. Once the tenth diphthong is added to the diphthongs array, the loop enters the break outerLoop statement which is used to send the workflow to the outer loop and terminate the loop. Finally, you can see the diphthongs array is logged with ten diphthong elements in it.

1. https://en.wikipedia.org/wiki/Goto    ↑