Punto y coma en JavaScript

Los puntos y comas de JavaScript son opcionales. Personalmente, me gusta evitar el uso de punto y coma en mi código, pero mucha gente los prefiere.

Los puntos y comas en JavaScript dividen a la comunidad. Algunos prefieren usarlos siempre, pase lo que pase. A otros les gusta evitarlos.

Después de usar puntos y comas durante años, en el otoño de 2017 decidí intentar evitarlos según fuera necesario, y configuré Prettier para eliminar automáticamente los puntos y comas de mi código, a menos que haya una construcción de código en particular que los requiera.

Ahora me parece natural evitar el punto y coma, 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 necesitaba un punto y coma, lo agrega detrás de escena.

El proceso que hace esto se llamaInserción automática de punto y coma.

Es importante conocer las reglas que alimentan el punto y coma, para evitar escribir código que generará errores porque no se comporta como esperabas.

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:

  1. cuando la siguiente línea comienza con un código que rompe el actual (el código puede aparecer en varias líneas)
  2. cuando la siguiente línea comienza con un}, cerrando el bloque actual
  3. cuando se alcanza el final del archivo de código fuente
  4. cuando hay unreturndeclaración en su propia línea
  5. cuando hay unbreakdeclaración en su propia línea
  6. cuando hay unthrowdeclaración en su propia línea
  7. cuando hay uncontinuedeclaración en su propia línea

Ejemplos de código que no hace lo que piensas

Según 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ás el errorUncaught TypeError: Cannot read property 'forEach' of undefinedporque basado en la regla1JavaScript intenta interpretar el código como

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Tal pieza de código:

(1 + 2).toString()

huellas dactilares"3".

const a = 1
const b = 2
const c = a + b
(a + b).toString()

en su lugar levanta unTypeError: 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 elcolorpropiedad, pero no lo es. En cambio, esundefined, porque JavaScript inserta un punto y coma despuésreturn.

En su lugar, debe colocar el corchete de apertura justo despuésreturn:

(() => {
  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

Ten cuidado. Algunas personas tienen muchas opiniones sobre el punto y coma. Honestamente, no me importa, la herramienta nos da la opción de no usarla, por lo que podemos evitar el punto y coma.

No estoy sugiriendo nada más que elegir tu propia decisión.

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:

  • ten cuidado conreturndeclaraciones. Si devuelve algo, agréguelo en la misma línea que la devolución (lo mismo parabreak,throw,continue)
  • nunca comience una línea con paréntesis, estos pueden estar concatenados con la línea anterior para formar una llamada de 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


Más tutoriales de js: