JavaScript Label Statement

Learning more on JavaScript — Label

---

Photo by Irvan Smith on Unsplash

In my other article where I share about break and continue statements, there might seem to be something missing or incomplete.

If you notice, those statements can only be used in a loop or rather, can only be used by the innermost loop in nested loops. So, does that mean the two statements cannot target the outer loop? Can’t they be used to break out of the parent loop or skip an iteration of the parent loop instead of the loop they are in?

JavaScript has a relatively unknown functionality which allows us to identify a loop. This identification can allow the two statements to target any loop in nested loops. This is the label statement which allows us to identify a statement which can then be referred to.

It can be applied to any statements. Once the labeling is done, it acts as an identifier that can be referred to elsewhere in the program.

To label JavaScript statements, simply precede the statements with a label name and a colon, and then followed by the statements themselves.

Syntax:

label:
statements

Description:

• label — Naming as an identifier
• statement(s) — Any JavaScript statement

For an example, you can use a label to identify a loop, and then use the break or continue statements to indicate whether your program wants to interrupt the identified loop or continue its execution.

Example:

markedLoop:
    while (theMark === true){
        doSomething();
    }

Both break and continue statements can then be used to target certain loops by addressing their identifiers. The syntax would be as follows.

Syntax:

break labelName;
continue labelName;

The “continue” statement (without a label reference) can only be used to skip current iteration of the innermost enclosing loop statement and continues execution of the loop with the next iteration. It does not terminate the execution of the loop entirely unlike “break”.

In a “while” loop, it jumps back to the condition. In a “for” loop, it jumps to the “final-expression”.

The “break” statement (without a label reference) can only be used to terminate innermost enclosing loops or a switch immediately and transfers control to the following statement.

With a label reference, the break statement can be used to jump out of any code block; it terminates the specified enclosing labeled statement.

Example:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";

list: {
    text += cars[0] + "<br>";
    text += cars[1] + "<br>";
    break list;
    text += cars[2] + "<br>";
    text += cars[3] + "<br>";
}

document.getElementById("demo").innerHTML = text;

// Output:
BMW
Volvo

As you can see from the above example, there is a “list” label in which it has a bunch of string concatenations. However, in the middle of it, there is a break targeting the label. Hence, for the output, it only has two out of the four words concatenated.

Another example:

let x = 0;
let z = 0;

labelCancelLoops:
  while (true) {
    console.log('Outer loops: ' + x);
    x += 1;
    z = 1;
    while (true) {
      console.log('Inner loops: ' + z);
      z += 1;
      if (z === 5 && x === 3) {
        break labelCancelLoops;
      } else if (z === 5) {
        break;
      }
    }
  }

// Output:
Outer loops: 0
Inner loops: 1
Inner loops: 2
Inner loops: 3
Inner loops: 4
Outer loops: 1
Inner loops: 1
Inner loops: 2
Inner loops: 3
Inner loops: 4
Outer loops: 2
Inner loops: 1
Inner loops: 2
Inner loops: 3

For the example above, we can see that when the x value is 3 and z value is 5, it will break out of the outer while loop. Otherwise, it will break out of the inner while loop when the x value does not satisfy.

It works similarly with the “continue” statement as well when in used together with the “label” statement.

Example:

let i = 0;
let j = 10;

checkIandJ:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) === 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
    console.log('i = ' + i);
    console.log('j = ' + j);
  }

// Output:
0
10
9 is odd.
9
8
7 is odd.
7
6
5 is odd.
5
i = 1
j = 4
1
i = 2
j = 4
2
i = 3
j = 4
3
i = 4
j = 4

A statement labeled checkIandJ contains a statement labeled checkj. If continue is encountered, the program terminates the current iteration of checkj and begins the next iteration. Each time continue is encountered, checkj reiterates until its condition returns false. When false is returned, the remainder of the checkIandJ statement is completed, and checkIandJ reiterates until its condition returns false. When false is returned, the program continues at the statement following checkIandJ. If continue had a label of checkIandJ, the program would continue at the top of the checkIandJ statement.

---

You can use multiple labels just like demonstrated in the last example. The labels seem to be useful for loop breakers. They are especially useful if one has nested loops (loops inside loops) and using these identifiers, you can conditionally specify when and which loop to break out from.

That’s all for the label for now. I hope this article is of help to you. If you think that this article is helpful and it can be of help to other people, please share for them to read as well. Your thoughts and comments are also welcome!

Thanks for reading~

You can support me by tipping me (optional) through: Medium link

Or directly by clicking on either of these:

Ko-fi (recommended):

Get me a coffee: