Neat JavaScript Hack: use labels to organize code

JavaScript’s built-in labels were not intended for documenting the purpose of blocks of code, but they’re remarkably useful for this.

Take a look at this function. What looks unusual about it?

function test(printTwo) {
  printing: {
    console.log("One");
    if (!printTwo) break printing;
    console.log("Two");
  }
  console.log("Three");
}

(The example above is from this article on JavaScript expressions vs. statements. It’s worth reading if you don’t know the difference. Your interviewer might ask you this to see how thoroughly you understand JavaScript.)

If your first impression of this code is like mine, you probably noticed the printing: label in front of a block of code, as if I were declaring an object property inside a function. Is this even valid syntax? In fact, it is. This is an example of JavaScript’s labeled blocks. Originally, labeled blocks were intended to be used with break statements; upon encountering break followed by a label name, the flow of execution breaks out of the block with that label. (For example, the code in the example above has a break statement that breaks out of the printing block if the variable printTwo is falsy.) Using blocks of labeled code and break statements to exit those blocks is not a good practice; that style of coding is akin to coding in assembly language and does not take advantage of the abstraction you have access to with higher level logical structures. Using logical structures such as for-loops, if and while blocks makes the code easier to understand and less likely to have strange control flow that do unexpected things.

There is, however, one thing that these labels are great for. If you simply omit the use of break, you can use these labels to label sections of code with meaningful names and indicators. Those labels don’t do anything detrimental, and they don’t interfere with scoping. They just sit there, adding clarity to your code in a way that is clear, terse, and stylistically more consistent than depending on people to comment in the same style. Imagine the following function, with major sections labeled:

function exampleFunc(){
  variables:{
    var args = [].slice.call(arguments);
    var results = [];
    ...
  }
  main_logic:{
    ...
  }
  formatting_results:{
    ...
  }
  helper_functions: {
    ...
  }
  return results;
}

*UPDATE*

Apparently, strict mode and linters don’t like the declaration of functions inside these blocks.

A large function with its major sub-sections gathered together into labeled blocks becomes very easy to read and navigate; the intention of each block can be indicated with its label. In fact, the code is very nearly self-documenting without the use of comments. If your text editor permits folding-up blocks of code, you can even hide all the blocks you don’t need to see and focus on the parts that matter.

Concluding thoughts

Your Linter might not like this use of labels, since the use of labeled blocks with break statements is one of the “bad parts” of JavaScript, but I see no reason to not use just the labels themselves for organizing your functions and for communicating intention. Without break statements, they don’t do anything to your code but add clarity and organization, which are great for the maintainability of your code.