Você pode rotular uma instrução JavaScript ‘if’

Os rótulos são um recurso que existe desde a criação do JavaScript. Eles não são novos! Não acho que tantas pessoas saibam sobre eles e até diria que são um pouco confusos. Mas, como veremos, os rótulos podem ser úteis em casos muito específicos.

Mas primeiro: um rótulo JavaScript não deve ser confundido com um HTML <label>, o que é uma coisa completamente diferente!

Um rótulo JavaScript é uma forma de nomear uma instrução ou um bloco de código. Normalmente: loops e instruções condicionais. Isso permite que você breakou continuea declaração rotulada de dentro. Para aplicar um rótulo a uma instrução, inicie a instrução com label:e o que quer que você coloque como “rótulo” será o rótulo ao qual poderá fazer referência mais tarde.

Esta é a sintaxe básica para um rótulo:

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

Os rótulos são apenas uma referência interna a uma instrução e não são algo que pode ser pesquisado, exportado ou armazenado em um valor. Eles também não entram em conflito com os nomes das variáveis, então se você realmente quiser confundir as pessoas, você pode ter um loop e uma variável com o mesmo nome! Por favor, não faça isso  - no futuro você e qualquer outra pessoa que tenha que ler seu código irá agradecer. Os casos de uso de rótulos são limitados, mas incrivelmente poderosos nas mãos certas.

Uma breve introdução para breakecontinue

Vamos voltar um pouco e falar sobre breake continue. Uma breakinstrução encerrará o loop ou instrução condicional em execução. É mais comumente usado em uma switchinstrução para encerrar a case, mas também pode ser usado para encerrar uma ifinstrução mais cedo ou também para fazer com que um loop forou whiletermine e pare o loop. É uma ótima maneira de escapar de uma instrução condicional ou encerrar um loop mais cedo.

Aqui está um exemplo básico de breakem uso:

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!'

Da mesma forma, a continueinstrução pode ser usada com loops para encerrar a iteração atual mais cedo e iniciar a próxima execução do loop. No entanto, isso só funcionará dentro de loops.

Aqui está continueem 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 um rótulo com break

Normalmente, um caso de uso para rótulos surge quando você entra em instruções aninhadas de qualquer tipo. Usá-los com breakpode interromper um loop ou condicional profundamente aninhado e fazê-lo parar imediatamente.

Vamos ver o título desta postagem do blog!

// Our outer if statement
outerIf: 
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!');
}

Aí está, você pode rotular uma ifdeclaração.

Usando um rótulo com continue

Houve momentos em que fiz um loop aninhado e queria pular algumas iterações do loop externo enquanto estava dentro do loop interno. Normalmente acabo interrompendo o loop interno, verificando se estou no estado que desejo pular e, em seguida, continuo o loop externo. Ser capaz de simplificar esse código em uma instrução mais fácil de ler é ótimo!

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 declarações e rótulos

As instruções de bloco em JavaScript são uma forma de definir o escopo de suas variáveis conste letpara apenas uma parte do código. Isso pode ser útil se você deseja localizar algumas variáveis ​​sem ter que criar uma função. A (grande) ressalva para isso é que as instruções de bloco são inválidas no modo estrito , que é o que os módulos ES são por padrão.

Aqui está uma declaração de bloco rotulada:

// This example throws a syntax error in an ES module
const 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); // undefined
document.body.appendChild(myElement);

Uso no mundo real

Demorei um pouco para descobrir um motivo para usar um rótulo no código de produção do dia a dia. Isso pode ser um pouco exagerado, mas um lugar onde um rótulo em JavaScript pode ser útil é escapar antecipadamente de um loop enquanto estiver dentro de uma switchinstrução. Como você pode breakenquanto estiver em um switch, ser capaz de aplicar um rótulo a um loop que o encerra mais cedo pode tornar seu código mais eficiente.

Veja como podemos usar isso em um aplicativo 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.
  }
}

Dessa forma, podemos sair do calculateloop quando uma condição for correspondida, em vez de permitir que o script continue!

Conclusão

É raro que você precise usar um rótulo JavaScript. Na verdade, você pode levar uma carreira muito gratificante sem nunca saber que isso existe. Mas, na chance improvisada de descobrir que um lugar onde essa sintaxe ajuda, você agora está habilitado para usá-la.