Puede etiquetar una declaración `if` de JavaScript

Las etiquetas son una característica que existe desde la creación de JavaScript. ¡No son nuevos! No creo que mucha gente se sepa sobre ellos e incluso diría que son un poco confusos. Pero, como veremos, las etiquetas pueden resultar útiles en casos muy específicos.

Pero primero: una etiqueta JavaScript no debe confundirse con HTML label, ¡que es algo completamente diferente!

Una etiqueta de JavaScript es una forma de nombrar una declaración o un bloque de código. Normalmente: bucles y declaraciones condicionales. Eso le permite breako continuela declaración etiquetada desde dentro. Para aplicar una etiqueta a una declaración, comience la declaración con label:y lo que ponga como “etiqueta” será la etiqueta a la que podrá hacer referencia más adelante.

Aquí está la sintaxis básica de una etiqueta:

let x = 0;// Label a loop as "myLoop"myLoop:while (true) {  if (x = 10) {    // This will cause "myLoop" to end.    break myLoop;  }  x++;}

Las etiquetas son solo una referencia interna a una declaración y no son algo que pueda buscarse, exportarse o almacenarse en un valor. Tampoco entrar en conflicto con los nombres de las variables, por lo que si realmente quieres confundir a la gente, puedes hacer que un bucle y una variable tengan el mismo nombre. No hagas esto  : tu futuro y cualquier otra persona que tenga que leer tu código lo agradecerán. Los casos de uso de las etiquetas son limitados, pero increíblemente poderosos en las manos adecuadas.

Una breve introducción breakycontinue

Retrocedamos un poco y habremos de breaky continue. Una breakdeclaración finalizará el bucle o la declaración condicional que se está ejecutando actualmente. Se usa más comúnmente en una switchdeclaración para finalizar un case, pero también se puede usar para finalizar una ifdeclaración antes de tiempo, o también para hacer que un bucle foro whilefinalice y deje de repetirse. Es una excelente manera de escapar de una declaración condicional o finalizar un ciclo antes de tiempo.

A continuación se muestra un ejemplo básico de breakuso:

const x = 1;switch(x) {  case 1:    console.log('On your mark!');    break; // Doesn't check the rest of the switch statement if 1 is true  case 2:    console.log('Get set!');    break; // Doesn't check the rest of the switch statement if 2 is true  case 3:    console.log('GO!');    break; // Doesn't check the rest of the switch statement if 3 is true}// logs: 'On your mark!'

De manera similar, la continuedeclaración se puede usar con bucles para finalizar la iteración actual antes de tiempo e iniciar la siguiente ejecución del bucle. Sin embargo, esto sólo funcionará dentro de los bucles.

Aquí está continueen uso:

for (let x = 0; x  10; x++) {  if (x !== 5) continue; // If the number isn't five, go to the next pass of the loop.  console.log(x);}// logs: 5

Usando una etiqueta conbreak

Normalmente, surge un caso de uso para etiquetas cuando se accede a declaraciones anidadas de cualquier tipo. Usarlos breakpuede detener un bucle profundamente anidado o condicional y hacer que se detenga inmediatamente.

¡Vayamos al título de esta publicación de blog!

// Our outer if statementouterIf: if (true) {  // Our inner if statement  innerIf:  if (true) {    break outerIf; // Immediately skips to the end of the outer if statement  }  console.log('This never logs!');}

Ahí lo tienes, puedes etiquetar una ifdeclaración.

Usando una etiqueta concontinue

Ha habido ocasiones en las que hice un bucle anidado y quise omitir algunas iteraciones del bucle exterior mientras estaba dentro del bucle interior. Por lo general, termino rompiendo el bucle interno, luego compruebo si estoy en el estado que quiero omitir y luego continúo con el bucle externo. ¡Poder simplificar ese código en una declaración más fácil de leer es genial!

let x = 0;outerLoop:while (x  10) {  x++;  for (let y = 0; y  x; y++) {    // This will jump back to the top of outerLoop    if (y === 5) continue outerLoop;    console.log(x,y);  }  console.log('----'); // This will only happen if x  6}

Bloquear declaraciones y etiquetas

Las declaraciones de bloque en JavaScript son una forma de limitar el alcance de sus variables consty leta solo una parte de su código. Esto puede resultar útil si desea localizar algunas variables sin tener que crear una función. La (gran) advertencia a esto es que las declaraciones de bloque no son válidas en modo estricto, que es lo que son los módulos ES de forma predeterminada.

Aquí hay una declaración de bloque etiquetada:

// This example throws a syntax error in an ES moduleconst myElement = document.createElement('p');myConditionalBlock: {  const myHash = window.location.hash;  // escape the block if there is not a hash.  if (!myHash) break myConditionalBlock;  myElement.innerText = myHash;}console.log(myHash); // undefineddocument.body.appendChild(myElement);

Uso en el mundo real

Me tomó un tiempo encontrar una razón para usar una etiqueta en el código de producción cotidiano. Esto puede ser un poco exagerado, pero un lugar donde una etiqueta en JavaScript puede resultar útil es para escapar temprano de un bucle mientras se encuentra dentro de una switchdeclaración. Como puede hacerlo breakmientras está en un switch, poder aplicar una etiqueta a un bucle que lo finalice antes de tiempo podría hacer que su código sea más eficiente.

Así es como podríamos usarlo en una aplicación de calculadora:

const calculatorActions = [  { action: "ADD", amount: 1 },  { action: "SUB", amount: 5 },  { action: "EQ" },  { action: "ADD", amount: 10 }];    let el = {};let amount = 0;calculate: while (el) {  // Remove the first element of the calculatorActions array  el = calculatorActions.shift();  switch (el.action) {    case "ADD":      amount += el.amount;      break; // Breaks the switch    case "SUB":      amount -= el.amount;      break; // Breaks the switch    case "EQ":      break calculate; // Breaks the loop    default:      continue calculate; // If we have an action we don't know, skip it.  }}

De esta manera, podemos salir del calculatebucle cuando se cumple una condición en lugar de permitir que el script continúe.

Conclusión

Es raro que necesites utilizar una etiqueta de JavaScript. De hecho, puedes llevar una carrera muy satisfactoria sin siquiera saber que existe. Pero, en el caso de que encuentres un lugar donde esta sintaxis te ayude, ahora estás autorizado a utilizarla.