Declaraciones etiquetadas JavaScript

Un tutorial sobre una característica de JavaScript que se usa muy raramente: declaraciones etiquetadas

JavaScript tiene una funcionalidad relativamente desconocida que le permite etiquetar declaraciones.

Recientemente vi esta función utilizada en Svelte para impulsar declaraciones reactivas, que se vuelven a calcular cada vez que cambian las variables declaradas en la declaración:

$: console.log(variable)

También permiten utilizar unbloque de declaración, otra característica de JavaScript que te permite definir un bloque siempre que puedas definir una declaración:

$: {
  console.log(variable)
  console.log('another thing')
  //...
}

Esto puede parecer extraño, pero es JavaScript correcto. Este bloque de instrucciones se asigna al$ etiqueta.

El compilador de Svelte lo utilizará internamente para potenciar las declaraciones reactivas.

Nunca usé esta función en ningún otro lugar, pero el caso de uso principal es romper una declaración que no es el bucle o conmutador circundante más cercano.

Aquí hay un ejemplo simple para explicar lo que quiero decir.

Llamar break en cualquiera de esos puntos rompe el interruptor, para evitar ejecutar los otros casos:

for (let y = 0; y < 3; y++) {
  switch (y) {
    case 0:
      console.log(0)
      break
    case 1:
      console.log(1)
      break
    case 2:
      console.log(2)
      break
  }
}

Esto imprimirá0 1 2a la consola, como se esperaba.

Pero, ¿y si queremos escapar deforcuando llegamoscase 1? Aquí es cómo:

loop: for (let y = 0; y < 3; y++) {
  switch (y) {
    case 0:
      console.log(0)
      break
    case 1:
      console.log(1)
      break loop
    case 2:
      console.log(2)
      break
  }
}

Esto imprimirá0 1a la consola.


Más tutoriales de js: