Saltar al contenido

Lección 4 de 12 · Lectura y práctica

Operadores básicos y expresiones

CONCEPTO CLAVE: En JavaScript, una expresión es cualquier unidad de código que produce un valor. Los operadores son los símbolos que nos permiten manipular esos valores, combinarlos, compararlos o transformarlos. Dominar los.

Del concepto a la práctica

Taller de esta lección

Una expresión produce un valor y los operadores determinan cómo se calcula. En un registro de lectura, el operador módulo puede separar turnos, la división puede calcular un promedio y la precedencia evita resultados inesperados. Escribe primero la unidad de cada variable para elegir la operación correcta.

Ejemplo resuelto

Tres sesiones suman 42, 35 y 28 minutos:

js
const sesiones = [42, 35, 28];
const total = sesiones[0] + sesiones[1] + sesiones[2];
const promedio = total / sesiones.length;
console.log(total, promedio); // 105 35
console.log(105 % 2); // 1

El total está en minutos y el promedio también.

Pruébalo

  1. Copia las tres duraciones.

  2. Suma los registros explícitamente.

  3. Divide por tres.

  4. Calcula el resto de 105 entre 2.

Error frecuente: dividir por una cifra inventada o confundir promedio con total. Corrección: usa sesiones.length y conserva las unidades.

El resultado esperado es 105 minutos, 35 minutos de promedio y resto 1.

Comprueba tu resultado

Añade una cuarta sesión de 20 minutos, incluye también sesiones[3] en la suma explícita y verifica que el total sea 125 y el promedio 31.25; el divisor debe cambiar a cuatro.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista.
CursaloMapa de práctica
Cómo avanza un programa

Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.

Ver la infografía en tamaño completo ↗
CONCEPTO CLAVE: En JavaScript, una expresión es cualquier unidad de código que produce un valor. Los operadores son los símbolos que nos permiten manipular esos valores, combinarlos, compararlos o transformarlos. Dominar los operadores es esencial porque constituyen la base de toda la lógica en JavaScript.

Operadores aritméticos

Los operadores aritméticos son los más intuitivos porque funcionan igual que en matemáticas básicas. Se utilizan para realizar cálculos numéricos.

OperadorNombreEjemploResultado
+Suma5 + 38
-Resta10 - 46
*Multiplicación6 * 742
/División20 / 45
%Módulo (resto)17 % 52
**Exponenciación2 ** 416

Ejemplos prácticos en código

// Suma simple
let manzanas = 5;
let naranjas = 3;
let totalFrutas = manzanas + naranjas;
console.log(totalFrutas); // 8

// Módulo: muy útil para saber si un número es par o impar
let numero = 17;
console.log(numero % 2); // 1 (impar, porque queda resto 1)

// Exponenciación: calcular áreas y potencias
let lado = 5;
let areaCuadrado = lado ** 2;
console.log(areaCuadrado); // 25
💡 Consejo: El operador módulo (%) es extremadamente útil en programación. Úsalo para verificar si un número es divisible por otro, crear ciclos que se repitan cada cierta cantidad de iteraciones, o simplemente obtener el "resto" de una división.

Operadores de asignación

Los operadores de asignación asignan valores a las variables. El más básico es =, pero existen operadores combinados que realizan una operación y asignación al mismo tiempo.

OperadorNombreEquivalente aEjemplo
=Asignaciónx = 10let x = 10
+=Suma y asignax = x + 5x += 5
-=Resta y asignax = x - 3x -= 3
*=Multiplica y asignax = x * 2x *= 2
/=Divide y asignax = x / 4x /= 4
%=Módulo y asignax = x % 3x %= 3
let puntos = 100;

// Aumentar puntos
puntos += 50; // Ahora puntos es 150

// Reducir puntos por penalización
puntos -= 20; // Ahora puntos es 130

// Doblar puntos por bonificación especial
puntos *= 2; // Ahora puntos es 260

console.log(puntos); // 260
📌 Recuerda: x += 5 es simplemente una forma más corta de escribir x = x + 5. Ambas expresiones son equivalentes, pero la versión corta es más elegante y legible.

Operadores de incremento y decremento

JavaScript ofrece operadores especiales para aumentar o disminuir una variable en exactamente 1:

let edad = 25;

// Pre-incremento: primero incrementa, luego usa el valor
console.log(++edad); // 26

// Post-incremento: primero usa el valor, luego incrementa
console.log(edad++); // 26 (imprime 26, pero edad ya es 27)
console.log(edad);   // 27

// Decremento funciona igual pero resta 1
let vidas = 3;
console.log(--vidas); // 2
⚠️ Precaución: La diferencia entre ++edad y edad++ es sutil pero importante. En expresiones simples donde solo incrementas, no hay diferencia. Pero cuando usas el valor retornado inmediatamente, el resultado cambia. Siempre considera cuál necesitas.

Operadores de comparación

Los operadores de comparación evalúan si una condición es verdadera o falsa, devolviendo siempre un valor booleano (true o false).

OperadorNombreEjemplo¿Es verdadero?
==Igualdad (valor)5 == "5"true (convierte tipos)
===Igualdad estricta5 === "5"false (tipos diferentes)
!=Diferente (valor)10 != "10"false
!==Diferente estricto10 !== "10"true
>Mayor que8 > 3true
<Menor que2 < 5true
>=Mayor o igual7 >= 7true
<=Menor o igual4 <= 9true
// Comparación relajada (==) - JavaScript convierte tipos
console.log(5 == "5");   // true (string "5" se convierte a número)
console.log(true == 1);  // true
console.log(false == 0); // true

// Comparación estricta (===) - NO convierte tipos
console.log(5 === "5");   // false (son tipos diferentes)
console.log(true === 1);  // false

// En la práctica, SIEMPRE usa === y !==
let password = "abc123";
let inputUsuario = "abc123";

// ✅ CORRECTO - Comparación estricta
if (password === inputUsuario) {
  console.log("Acceso concedido");
}

// ❌ EVITAR - Comparación relajada (puede causar errores)
if (password == inputUsuario) {
  // Funciona, pero es mala práctica
}
CONCEPTO CLAVE: Siempre utiliza === y !== en lugar de == y !=. Las comparaciones estrictas evitan errores sutiles causados por la conversión automática de tipos de JavaScript. Esta es una de las reglas más importantes que debes incorporar desde el principio.

Operadores lógicos

Los operadores lógicos combinan múltiples condiciones booleanas para crear expresiones más complejas.

OperadorNombreDescripciónEjemplo
&&AND (Y)Ambas condiciones deben ser truetrue && false = false
||OR (O)Al menos una condición debe ser truetrue || false = true
!NOT (NO)Invierte el valor booleano!true = false
let edad = 22;
let tieneDinero = true;
let tieneIdentidad = true;

// AND: todas las condiciones deben cumplirse
if (edad >= 18 && tieneDinero && tieneIdentidad) {
  console.log("Puedes comprar alcohol");
}

// OR: al menos una condición debe cumplirse
let esFinDeSemana = true;
let estaDeVacaciones = false;

if (esFinDeSemana || estaDeVacaciones) {
  console.log("Puedes dormir hasta tarde");
}

// NOT: invierte la condición
let usuarioBloqueado = false;
if (!usuarioBloqueado) {
  console.log("Bienvenido al sistema");
}

// Combinación de operadores lógicos
let esMayorDeEdad = edad >= 18;
let tieneLicencia = true;

if (esMayorDeEdad && (tieneDinero || tieneLicencia)) {
  console.log("Puedes rentar un auto");
}
Ver más: Evaluación de cortocircuito (short-circuit evaluation)

JavaScript optimiza la evaluación de operadores lógicos con "cortocircuito":

// Con ||, si el primer valor es "truthy", lo devuelve sin evaluar el segundo
let nombre = "Carlos" || "Anónimo"; // Devuelve "Carlos"

// Si el primer valor es "falsy", devuelve el segundo
let apelido = "" || "Anónimo"; // Devuelve "Anónimo"

// Con &&, si el primer valor es "falsy", lo devuelve sin evaluar el segundo
let resultado = false && "esto no se ejecutará"; // Devuelve false

// Valores "falsy" en JavaScript: false, 0, "", null, undefined, NaN
// Todos los demás valores son "truthy"

Operador de concatenación

En JavaScript, el operador + también se usa para unir cadenas de texto (strings).

let nombre = "María";
let apellido = "García";

// Concatenación básica
let nombreCompleto = nombre + " " + apellido;
console.log(nombreCompleto); // "María García"

// Concatenación con números
let edad = 30;
let presentacion = "Tengo " + edad + " años";
console.log(presentacion); // "Tengo 30 años"

// Template literals (alternativa moderna y recomendada)
let bio = `Hola, soy ${nombre} ${apellido} y tengo ${edad} años.`;
console.log(bio); // "Hola, soy María García y tengo 30 años."
💡 Consejo: Los template literals (backticks `` ` ``) con ${} son la forma moderna y recomendada de interpolar variables en cadenas. Son más legibles y evitan problemas con las comillas.

Precedencia de operadores

Cuando hay múltiples operadores en una expresión, JavaScript los evalúa en un orden específico. Los operadores con mayor precedencia se evalúan primero.

// Sin paréntesis: la precedencia determina el orden
let resultado1 = 2 + 3 * 4;  // 2 + 12 = 14 (multiplicación primero)
let resultado2 = (2 + 3) * 4; // 5 * 4 = 20 (paréntesis primero)

console.log(resultado1); // 14
console.log(resultado2); // 20

// Tabla de precedencia (de mayor a menor):
// 1. () - Paréntesis
// 2. ** - Exponenciación
// 3. * / % - Multiplicación, División, Módulo
// 4. + - - Suma, Resta
// 5. < <= > >= - Comparación
// 6. == === != !== - Igualdad
// 7. && - AND lógico
// 8. || - OR lógico
// 9. = += -= *= /= %= - Asignación
"Siempre usa paréntesis para hacer explícito el orden de evaluación. Un código que depende de conocer la tabla de precedencia es propenso a errores y difícil de leer."

Expresiones en JavaScript

Una expresión es cualquier combinación de valores, variables, operadores y funciones que JavaScript puede evaluar para producir un resultado.

  1. Expresiones aritméticas: Generan un número. Ejemplo: 10 + 5 * 2 → 20
  2. Expresiones de cadena: Generan un string. Ejemplo: "Hola" + " " + "Mundo" → "Hola Mundo"
  3. Expresiones lógicas: Generan true o false. Ejemplo: 5 > 3 && 2 < 4 → true
  4. Expresiones de asignación: Asignan un valor y retornan ese valor. Ejemplo: x = 10 → 10
📌 Aplicación práctica: Las expresiones pueden anidarse y combinarse. Por ejemplo: let esValido = (edad >= 18 && tieneDocumento) || esAdmin === true; combina expresiones lógicas con operadores de comparación y asignación.

Ejercicios prácticos

// EJERCICIO 1: Calcula el área de un círculo
const PI = 3.14159;
let radio = 7;
let area = PI * radio ** 2;
console.log("Área del círculo:", area);

// EJERCICIO 2: Determina si alguien puede votar
let edadPersona = 16;
let esCiudadano = true;
let puedeVotar = edadPersona >= 18 && esCiudadano;
console.log("¿Puede votar?", puedeVotar);

// EJERCICIO 3: Calcula el precio final con descuento
let precioOriginal = 150;
let descuento = 20; // porcentaje
let precioFinal = precioOriginal - (precioOriginal * descuento / 100);
console.log("Precio final:", precioFinal);

// EJERCICIO 4: Verifica si un número es divisible por 3 y 5
let numero = 45;
let esDivisiblePor3y5 = numero % 3 === 0 && numero % 5 === 0;
console.log("¿Divisible por 3 y 5?", esDivisiblePor3y5);
🧠 Quiz

¿Cuál es el resultado de console.log(10 + 5 * 2 - 8 / 4)?

  • A) 24
  • B) 18
  • C) 8
  • D) 12
✅ Respuesta: B) 18. Primero se evalúa la multiplicación (5 * 2 = 10) y la división (8 / 4 = 2). Luego: 10 + 10 - 2 = 18.
🧠 Quiz

¿Cuál es la diferencia entre == y ===?

  • A) No hay diferencia
  • B) === compara valor y tipo, == solo compara valor
  • C) == es más rápido
  • D) === solo funciona con números
✅ Respuesta: B) === compara tanto el valor como el tipo de dato, mientras que == realiza conversión de tipos antes de comparar. Siempre usa ===.
🧠 Quiz

¿Qué valor devuelve "5" + 3?

  • A) 8
  • B) "53"
  • C) NaN
  • D) "8"
✅ Respuesta: B) "53". Cuando usas + con un string, JavaScript convierte el número 3 a string y concatena. Es importante recordar que + tiene preferencia por concatenación cuando hay strings involucrados.

Resumen

En esta lección hemos cubierto los operadores fundamentales de JavaScript:

  • Aritméticos: + - * / % ** para cálculos matemáticos
  • Asignación: = += -= *= /= %= para asignar y modificar valores
  • Comparación: === !== > < >= <= para evaluar condiciones
  • Lógicos: && || ! para combinar expresiones booleanas
  • Concatenación: + para unir strings

Los operadores son la base sobre la cual construiremos lógica más compleja. Practica con cada tipo de operador hasta que te sientas cómodo, y siempre favorece la claridad sobre la brevedad.

Sigue con JavaScript Esencial: Domina los Cimientos del Lenguaje

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

01 / ELEGIR UNA RUTA

El próximo paso

Aprende IA mientras construyes algo que sí necesitas.

Empieza por el curso inicial o explora el catálogo para encontrar una práctica alineada con tu trabajo.