Gráffica Academy
Creado para la ComunidadAprende a programar
Escribir al equipo

Contacta con el equipo de Gráffica Estudio Academy.

IG @ X in
Fundamentos

Sintaxis y operadores

Ya sabes dónde vive el código y cómo sacar un resultado a pantalla. Ahora toca el vocabulario básico: cómo se escribe una instrucción en JavaScript sin que el motor se queje, y los operadores que vas a usar en prácticamente cada línea que escribas a partir de aquí — sobre todo uno que sorprende a casi todo el mundo la primera vez: la diferencia entre == y ===.

Las reglas básicas de sintaxis

Sensible a mayúsculas

miVariable y mivariable son dos cosas completamente distintas para JavaScript.

Punto y coma

Cada instrucción termina, por convención, en ;. JavaScript a veces lo añade solo si lo olvidas, pero confiar en eso genera bugs raros — escríbelo siempre.

camelCase

La convención de nombres en JavaScript: precioTotal, nombreUsuario, calcularDescuento — primera palabra en minúscula, el resto con mayúscula inicial.

Comentarios

// para una línea, /* ... */ para un bloque — exactamente igual que en CSS.

Y para guardar un valor, usas let o const: const cuando el valor no va a cambiar nunca, let cuando sí. Verás la diferencia con más detalle en el módulo de scope — por ahora, usa siempre const salvo que sepas que necesitas reasignar.

variables.js
1
Pulsa "Ejecutar" para ver el resultado.

Operadores aritméticos y de asignación

+ - * /

Suma, resta, multiplicación, división. + también concatena strings: 'a' + 'b' da 'ab'.

%

Módulo: el resto de una división. 10 % 3 da 1. Muy usado para saber si un número es par: n % 2 === 0.

**

Potencia. 2 ** 3 es 2 elevado a 3, es decir 8.

+= -= *= /=

Atajos: total += 5 es exactamente lo mismo que total = total + 5.

++ --

Incrementa o decrementa una unidad. contador++ es lo mismo que contador += 1.


Comparación: == contra ===

Este es probablemente el detalle que más sorprende a quien llega nuevo a JavaScript. Hay dos formas de comprobar si dos valores son iguales, y no hacen lo mismo:

== (igualdad suelta)

Compara los valores tras intentar convertirlos al mismo tipo. '5' == 5 da true, aunque uno es texto y el otro número.

=== (igualdad estricta)

Compara valor Y tipo, sin conversiones. '5' === 5 da false. Es la que deberías usar casi siempre.

comparaciones.js
1
Pulsa "Ejecutar" para ver el resultado.
⚠️ Error común

Usar == por costumbre y llevarte una sorpresa cuando compara cosas que "no deberían" ser iguales. La recomendación casi universal en JavaScript moderno es: usa siempre === y !==, y olvídate de == salvo que sepas exactamente por qué lo necesitas.


Operadores lógicos y el operador ternario

&&

Y lógico: true solo si ambos lados son true.

||

O lógico: true si al menos uno de los lados es true.

!

Niega un valor: !true es false.

condicion ? a : b

El operador ternario: una forma corta de escribir un if/else que devuelve un valor. Lo verás en detalle en el próximo módulo.

💡 Consejo

&& y || no solo sirven para condiciones booleanas: en JavaScript también se usan como atajo para dar un valor por defecto, por ejemplo nombre || 'Invitado'. Lo verás en más de un módulo a partir de ahora.

Comprueba lo que has aprendido

3 preguntas · sin nota, solo para afianzar lo de hoy

1. ¿Qué diferencia hay entre == y ===?

2. ¿Qué devuelve 10 % 3?

3. ¿Cuándo deberías usar const en lugar de let?

Síguenos IG @ X in