Lo primero que estudiaremos son los componentes básicos del código.
Las declaraciones son construcciones de sintaxis y comandos que realizan acciones.
Ya hemos visto una declaración, alert('Hello, world!')
, que muestra el mensaje "¡Hola, mundo!".
Podemos tener tantas declaraciones en nuestro código como queramos. Las declaraciones se pueden separar con punto y coma.
Por ejemplo, aquí dividimos "Hola mundo" en dos alertas:
alerta('Hola'); alerta('Mundo');
Normalmente, las declaraciones se escriben en líneas separadas para que el código sea más legible:
alerta('Hola'); alerta('Mundo');
En la mayoría de los casos, cuando existe un salto de línea, se puede omitir un punto y coma.
Esto también funcionaría:
alerta('Hola') alerta('Mundo')
Aquí, JavaScript interpreta el salto de línea como un punto y coma "implícito". Esto se denomina inserción automática de punto y coma.
En la mayoría de los casos, una nueva línea implica un punto y coma. ¡Pero “en la mayoría de los casos” no significa “siempre”!
Hay casos en los que una nueva línea no significa punto y coma. Por ejemplo:
alerta(3 + 1 + 2);
El código genera 6
porque JavaScript no inserta punto y coma aquí. Es intuitivamente obvio que si la línea termina con un signo más "+"
, entonces es una “expresión incompleta”, por lo que un punto y coma sería incorrecto. Y en este caso, funciona según lo previsto.
Pero hay situaciones en las que JavaScript "no logra" asumir un punto y coma cuando realmente es necesario.
Los errores que se producen en estos casos son bastante difíciles de encontrar y corregir.
Un ejemplo de error
Si tiene curiosidad por ver un ejemplo concreto de dicho error, consulte este código:
alerta("Hola"); [1, 2].forEach(alerta);
No es necesario pensar todavía en el significado de los corchetes []
y forEach
. Los estudiaremos más tarde. Por ahora, solo recuerde el resultado de ejecutar el código: muestra Hello
, luego 1
, luego 2
.
Ahora eliminemos el punto y coma después de la alert
:
alerta("Hola") [1, 2].forEach(alerta);
La diferencia con el código anterior es solo un carácter: el punto y coma al final de la primera línea desapareció.
Si ejecutamos este código, solo se muestra el primer Hello
(y hay un error, es posible que tengas que abrir la consola para verlo). Ya no hay números.
Esto se debe a que JavaScript no asume un punto y coma antes de los corchetes [...]
. Por tanto, el código del último ejemplo se trata como una única declaración.
Así es como lo ve el motor:
alerta("Hola")[1, 2].forEach(alerta);
Parece raro, ¿verdad? En este caso, tal fusión es simplemente incorrecta. Necesitamos poner un punto y coma después de alert
para que el código funcione correctamente.
Esto también puede suceder en otras situaciones.
Recomendamos poner punto y coma entre declaraciones incluso si están separadas por nuevas líneas. Esta regla es ampliamente adoptada por la comunidad. Notemos una vez más: es posible omitir el punto y coma la mayor parte del tiempo. Pero es más seguro, especialmente para un principiante, utilizarlos.
A medida que pasa el tiempo, los programas se vuelven cada vez más complejos. Se hace necesario agregar comentarios que describan qué hace el código y por qué.
Los comentarios se pueden colocar en cualquier lugar de un script. No afectan su ejecución porque el motor simplemente los ignora.
Los comentarios de una línea comienzan con dos caracteres de barra diagonal //
.
El resto de la línea es un comentario. Puede ocupar una línea completa propia o seguir una declaración.
Como aquí:
// Este comentario ocupa una línea propia alerta('Hola'); alerta('Mundo'); // Este comentario sigue la declaración
Los comentarios de varias líneas comienzan con una barra diagonal y un asterisco /*
y terminan con un asterisco y una barra diagonal */
.
Como esto:
/* Un ejemplo con dos mensajes. Este es un comentario de varias líneas. */ alerta('Hola'); alerta('Mundo');
El contenido de los comentarios se ignora, por lo que si ponemos código dentro de /* … */
, no se ejecutará.
A veces puede resultar útil desactivar temporalmente una parte del código:
/* Comentando el código alerta('Hola'); */ alerta('Mundo');
¡Usa teclas de acceso rápido!
En la mayoría de los editores, se puede comentar una línea de código presionando la tecla de acceso rápido Ctrl + / para un comentario de una sola línea y algo como Ctrl + Shift + / – para comentarios de varias líneas (seleccione un fragmento de código y presione la tecla de acceso rápido). Para Mac, pruebe Cmd en lugar de Ctrl y Opción en lugar de Shift .
¡No se admiten comentarios anidados!
Puede que no haya /*...*/
dentro de otro /*...*/
.
Dicho código morirá con un error:
/* /* comentario anidado?!? */ */ alerta('Mundo');
Por favor, no dudes en comentar tu código.
Los comentarios aumentan la huella general del código, pero eso no es un problema en absoluto. Existen muchas herramientas que minimizan el código antes de publicarlo en un servidor de producción. Eliminan comentarios, por lo que no aparecen en los scripts de trabajo. Por tanto, los comentarios no tienen ningún efecto negativo sobre la producción.
Más adelante en el tutorial habrá un capítulo sobre Calidad del código que también explica cómo escribir mejores comentarios.