A pesar de parecer una pregunta basada en opiniones, creo que es un tema interesante, porque muchos no conocíamos esta característica y podría llegar a ser útil en ciertos casos.
¿Es una buena práctica utilizar etiquetas en JavaScript?
No se trata de buena o mala práctica, sino el uso que puedas darle. No hay que confundirlo con sentencias goto
de otros lenguajes, porque solo aplica en ciclos y únicamente comienza a tener sentido cuando son anidados y quieres controlar el comportamiento de los antecesores.
Al tratarse del mismo ciclo (o ciclo único), no tiene sentido usar etiquetas:
let i, j;
loop1:
for (i = 0; i < 3; i++) {
loop2:
for (j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
// Es lo mismo que solo continue, salta esta iteración
continue loop2;
}
// Dos resultados de i = 1
console.log('i = ' + i + ', j = ' + j);
}
}
Teniendo ciclos anidados, ya puede tener un poco más de sentido:
let i, j;
loop1:
for (i = 0; i < 3; i++) {
loop2:
for (j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
// El comportamiento es igual a break (solo en este caso)
// Termina este ciclo y vuelve al for(i...)
continue loop1;
}
// Solo un resultado de i = 1
console.log('i = ' + i + ', j = ' + j);
}
}
Creo que la principal ventaja es poder controlar todos los ciclos desde dentro:
let i, j;
loop1:
for (i = 0; i < 3; i++) {
loop2:
for (j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
// Todo termina cuando i = 1 y j = 1
break loop1;
}
console.log('i = ' + i + ', j = ' + j);
}
}
Estos ejemplos están basados en la documentación para label (en inglés) y ya imagino las posibilidades al tener 3 o más ciclos anidados.
Tratando de hacer un ejemplo más viable, al buscar un valor específico en un arreglo bidimensional, necesitas dos ciclos, uno para filas y otro para columnas:
// Saber si hay un valor falso en este arreglo
let filas = [
[true, true, true, true],
[true, true, false, true],
[true, true, true, true],
[true, true, true, true],
];
/* ***** Sin etiquetas ***** */
// Inicializar un par de variables
let falso = false;
let cuenta = 0;
// Recorrer filas
for(let i = 0; i < filas.length; i++) {
// Recorrer columnas
for(let j = 0; j < filas[i].length; j++) {
if(!filas[i][j]) {
// Se encontró valor falso
falso = true;
// Terminar este ciclo
break;
}
// Valores verdaderos encontrados
cuenta ++;
}
// No hay etiquetas, hay que saber si continuar o no
if(falso) {
// Terminar este ciclo
break;
}
}
console.log('Sin etiqueta:', cuenta);
/* ***** Con etiquetas ***** */
// Inicializar variables
falso = false;
cuenta = 0;
// Recorrer filas
cicloi:
for(let i = 0; i < filas.length; i++) {
// Recorrer columnas, no se necesita etiqueta aquí
for(let j = 0; j < filas[i].length; j++) {
if(!filas[i][j]) {
// Se encontró valor falso
falso = true;
// Terminar ambos ciclos
break cicloi;
}
// Valores verdaderos encontrados
cuenta ++;
}
// Hay etiqueta, no es necesario agregar comparación aquí
}
console.log('Con etiqueta:', cuenta);
Este es un ejemplo muy sencillo y, seguramente, habrá otras formas de lograrlo, solo es cuestión de experimentar para ver qué puede ser más eficiente y legible, de acuerdo a tus preferencias.