Para usarlos, o no usarlos ...
El punto y coma en JavaScript divide a la comunidad. Algunos prefieren usarlos siempre, pase lo que pase. A otros les gusta evitarlos.
Publiqué una encuesta en Twitter para probar las aguas y encontré muchos partidarios del punto y coma:
Después de usar punto y coma durante años, en el otoño de 2017 decidí intentar evitarlos cuando pudiera. Configuré Prettier para eliminar automáticamente los puntos y comas de mi código, a menos que hubiera una construcción de código en particular que los requiriera.
Ahora me parece natural evitar el punto y coma, y creo que el código se ve mejor y es más limpio de leer.
Todo esto es posible porque JavaScript no requiere estrictamente punto y coma. Cuando hay un lugar donde se necesita un punto y coma, lo agrega detrás de escena.
Esto se llama inserción automática de punto y coma .
Es importante conocer las reglas que impulsan el punto y coma. Esto le permitirá evitar escribir código que generará errores antes de que no se comporte como espera.
Las reglas de la inserción automática de punto y coma de JavaScript
El analizador de JavaScript agregará automáticamente un punto y coma cuando, durante el análisis del código fuente, encuentre estas situaciones particulares:
- cuando la siguiente línea comienza con un código que rompe el actual (el código puede aparecer en varias líneas)
- cuando la siguiente línea comienza con a
}, cerrando el bloque actual - cuando se llega al final del archivo de código fuente
- cuando hay una
returndeclaración en su propia línea - cuando hay una
breakdeclaración en su propia línea - cuando hay una
throwdeclaración en su propia línea - cuando hay una
continuedeclaración en su propia línea
Ejemplos de código que no hace lo que piensas
Con base en esas reglas, aquí hay algunos ejemplos.
Toma esto:
const hey = 'hey'const you = 'hey'const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))Obtendrá el error Uncaught TypeError: Cannot read property 'forEach' of undefinedporque, según la regla 1, JavaScript intenta interpretar el código como
const hey = 'hey';const you = 'hey';const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))Este fragmento de código:
(1 + 2).toString()impresiones "3".
const a = 1const b = 2const c = a + b(a + b).toString()En cambio, genera una TypeError: b is not a functionexcepción, porque JavaScript intenta interpretarlo como
const a = 1 const b = 2 const c = a + b(a + b).toString()Otro ejemplo basado en la regla 4:
(() => { return { color: 'white' }})()Es de esperar que el valor de retorno de esta función invocada inmediatamente sea un objeto que contenga la colorpropiedad, pero no lo es. En cambio, es undefinedporque JavaScript inserta un punto y coma después return.
En su lugar, debe colocar el corchete de apertura justo después return:
(() => { return { color: 'white' }})()Pensaría que este código muestra '0' en una alerta:
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)pero muestra 2 en su lugar, porque JavaScript (por regla 1) lo interpreta como:
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)Conclusión
Tenga cuidado, algunas personas tienen muchas opiniones sobre el punto y coma. No me importa, honestamente. La herramienta nos da la opción de no usarla, por lo que podemos evitar el punto y coma si queremos.
No estoy sugiriendo nada de un lado o del otro. Simplemente tome su propia decisión en función de lo que funcione para usted.
Independientemente, solo debemos prestar un poco de atención, incluso si la mayoría de las veces esos escenarios básicos nunca aparecen en su código.
Elija algunas reglas:
- Tenga cuidado con las
returndeclaraciones. Si devuelve algo, añadir en la misma línea que el retorno (lo mismo parabreak,throw,continue) - Nunca comience una línea con paréntesis, ya que estos podrían estar concatenados con la línea anterior para formar una llamada a función o una referencia de elemento de matriz
Y, en última instancia, siempre pruebe su código para asegurarse de que hace lo que desea.
Publico 1 tutorial de programación gratuito por día en flaviocopes.com, ¡compruébalo!Publicado originalmente en flaviocopes.com.