Fundamentos de JavaScript

1. Las reglas básicas del lenguaje

Un programa en JavaScript es una secuencia de sentencias que el navegador ejecuta de arriba abajo. Cada sentencia suele ir en una línea y terminar en punto y coma. El punto y coma es técnicamente opcional, porque el motor lo inserta solo, pero ponerlo evita algún susto raro y es lo que verás en casi todo el código profesional.

El lenguaje distingue entre mayúsculas y minúsculas (nombre y Nombre son variables distintas), los bloques se delimitan con llaves y los comentarios se escriben con // para una línea o /* … */ para varias. Tu mejor amigo mientras aprendes es console.log(): escribe en la consola lo que le pases, y es la forma más rápida de ver qué está pasando dentro de tu programa.

1console.log("Hola, mundo");
2console.log("La suma es", 2 + 3);   // puedes pasar varios valores
3console.table([{ nombre: "Ana", nota: 8 }, { nombre: "Luis", nota: 6 }]);

2. Variables: let, const y por qué olvidar var

Una variable es un nombre que apunta a un valor. En JavaScript moderno se declaran con const o con let. Usa const siempre que el nombre no vaya a apuntar a otro valor (que es la mayoría de las veces) y let solo cuando necesites reasignarlo, como un contador. Así, quien lea tu código sabe de un vistazo qué puede cambiar y qué no.

1const iva = 0.21;         // no cambiará
2let total = 100;          // lo vamos a modificar
3total = total * (1 + iva);
4
5const alumno = { nombre: "Ana" };
6alumno.nombre = "Lucía";  // permitido: cambia el objeto, no la variable
7// alumno = {};           // error: no se puede reasignar una const

Verás var en código antiguo y en muchos tutoriales. Tiene dos comportamientos que causan errores difíciles de encontrar: su ámbito es la función entera, no el bloque de llaves donde se declara, y se puede usar antes de declararla (vale undefined, en lugar de dar error). let y const corrigieron ambas cosas en 2015, así que no hay motivo para seguir usando var.

3. Tipos de datos

JavaScript tiene tipado dinámico: no declaras el tipo de una variable, sino que cada valor tiene el suyo y una misma variable puede guardar primero un número y después un texto. Es cómodo, pero te obliga a estar atento, porque el lenguaje no te avisará si mezclas tipos por error. El operador typeof te dice el tipo de un valor.

Dos valores del tipo number merecen atención. NaN (Not a Number) aparece cuando una operación numérica no tiene sentido, como Number("abc"), y tiene la curiosidad de no ser igual a sí mismo: para detectarlo usa Number.isNaN(x). Y los decimales se guardan en binario, por lo que 0.1 + 0.2 da 0.30000000000000004. Para mostrar precios, redondea al presentar con toFixed(2) o, mejor aún, trabaja en céntimos.

4. Operadores y conversiones de tipo

Los operadores aritméticos (+ - * / % **) funcionan como esperas, con una excepción famosa: el + también sirve para unir textos, y si uno de los dos lados es un texto, gana el texto. Por eso "5" + 3 da "53", mientras que "5" - 3 da 2. Cuando un valor llega de un formulario siempre es un texto, así que conviértelo antes de operar con Number().

Valores verdaderos y falsos

Cuando pones un valor que no es booleano en un if, JavaScript lo convierte. Solo hay seis valores que se consideran falsos (falsy): false, 0, "", null, undefined y NaN. Todo lo demás es verdadero, incluidos "0", "false", un array vacío y un objeto vacío. Aprovecharlo hace el código más corto, pero ten cuidado con el 0: if (cantidad) es falso cuando la cantidad es 0, que a lo mejor es un valor válido.

Operadores lógicos y los atajos modernos

1const nombre = entrada || "Anónimo";      // si entrada es falsy (incluido ""), usa "Anónimo"
2const cantidad = entrada ?? 1;            // solo si entrada es null o undefined; respeta el 0 y ""
3const ciudad = usuario?.direccion?.ciudad; // undefined si falta algún nivel, en lugar de un error
4const mayor = edad >= 18 ? "adulto" : "menor";

La diferencia entre || y ?? es de las que salen en los exámenes: || sustituye cualquier valor falsy, mientras que ?? (el operador de fusión de nulos) solo sustituye null y undefined. Si un 0 o un texto vacío son valores válidos, necesitas ??.

5. Decisiones y repeticiones

Las estructuras de control son iguales que las de Java en casi todo, así que si vienes de Programación te sentirás en casa. if / else if / else elige un camino, switch compara un valor con varios casos (con ===, y sin olvidar el break), y el operador ternario resume un if sencillo en una expresión.

Para repetir tienes while (mientras se cumpla una condición), do…while (al menos una vez) y for (cuando sabes cuántas vueltas das). JavaScript añade dos variantes muy útiles: for…of recorre los valores de un array o de un texto, y for…in recorre las propiedades de un objeto.

1const notas = [7, 4, 9];
2for (const nota of notas) console.log(nota);        // 7, 4, 9
3
4const alumno = { nombre: "Ana", curso: "2º DAW" };
5for (const clave in alumno) console.log(clave, alumno[clave]);  // nombre Ana, curso 2º DAW
6
7let intentos = 0;
8while (intentos < 3) {
9  intentos++;
10  if (intentos === 2) continue;   // salta a la siguiente vuelta
11  console.log("Intento", intentos);
12}

Juega con estos ejemplos: cambia valores, añade console.log y pulsa ejecutar.

(sin mensajes)

6. Retos

Escribe el código que falta y pulsa Comprobar: unas pruebas automáticas llaman a tu función con distintos valores, incluidos los casos límite que suelen olvidarse.

7. Errores típicos al empezar

• Sumar textos sin querer. Un input.value siempre es un texto: "2" + "3" da "23". Convierte con Number() antes de sumar.
• Usar = en lugar de ===. if (edad = 18) asigna 18 y siempre es verdadero. Los linters como ESLint lo detectan al momento.
• Comparar con NaN. x === NaN siempre es falso. Usa Number.isNaN(x).
• Olvidar el break en un switch. Sin él, la ejecución continúa por el siguiente caso.
• Confiar en que 0.1 + 0.2 es 0.3. Redondea al mostrar o trabaja con enteros (céntimos).