Materias · 🏛️ Universidad y trabajo
JavaScript
Ejercicios resueltos de JavaScript paso a paso, con el error que más se comete en cada uno: Tipos y coerción, Closures y ámbito de variables y más. Gratis y en español.
Preguntarle al tutor de JavaScriptSin instalar nada. Puedes probar antes de crear cuenta.
Ejercicios resueltos de JavaScript
Resueltos paso a paso, como te los explicaría el tutor, y con el error que más se comete.
Tipos y coerción
Un formulario de pedidos suma el valor del producto y el del domicilio:
const producto = document.querySelector("#producto").value; // "12000"
const domicilio = document.querySelector("#domicilio").value; // "5000"
console.log(producto + domicilio);
Muestra 120005000. ¿Por qué y cómo se arregla?
Cómo se resuelve
- 1La propiedad value de un input en el DOM siempre devuelve una cadena de texto, aunque el input sea type="number". Nunca devuelve un número.
- 2En JavaScript el operador + está sobrecargado: si alguno de los dos operandos es cadena, no suma, concatena. "12000" + "5000" pega los dos textos y da "120005000".
- 3Por eso el error no aparece con − ni con *: esos operadores no tienen versión para texto, así que JavaScript convierte los valores a número antes de operar. "12000" − "5000" sí da 7000, y eso confunde todavía más.
- 4La solución es convertir explícitamente antes de sumar: Number(producto) + Number(domicilio), que da 17000.
- 5Conviene además validar, porque si el campo viene vacío Number("") da 0 y si trae letras da NaN: const valor = Number(producto); if (Number.isNaN(valor)) { ... }
Respuesta: Porque .value entrega texto y el + con cadenas concatena. Se arregla con Number(producto) + Number(domicilio), que da 17000.
El error de siempre: Usar parseInt(producto) confiando en que limpia cualquier cosa. parseInt("12000 pesos") devuelve 12000 sin avisar de nada, y parseInt("12.5") devuelve 12 y se pierden los centavos. Number es más estricto: lo que no sea un número completo devuelve NaN, y ese NaN sí se puede detectar.
Closures y ámbito de variables
Este código debería imprimir 0, 1, 2 y en cambio imprime 3, 3, 3:
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
¿Qué está pasando?
Cómo se resuelve
- 1var no crea una variable por vuelta del ciclo. Su alcance es la función completa (o el ámbito global), así que hay una sola i compartida por las tres iteraciones.
- 2setTimeout no ejecuta la función ahí mismo: la encola para después. El ciclo termina de correr completo antes de que se dispare el primer temporizador.
- 3Cuando el ciclo termina, i vale 3, porque el ciclo para justo cuando la condición i < 3 falla.
- 4Las tres funciones encoladas no guardaron una copia del valor: guardaron una referencia a esa única variable i. Al ejecutarse, las tres leen la misma i, que ya vale 3.
- 5El arreglo es cambiar var por let. let tiene alcance de bloque y el motor crea una variable nueva en cada vuelta del for, así que cada función captura su propia copia: 0, 1, 2.
Respuesta: Porque var comparte una sola variable entre todas las vueltas y los setTimeout se ejecutan cuando el ciclo ya terminó, con i valiendo 3. Se arregla usando let en vez de var.
El error de siempre: Creer que el problema son los 100 milisegundos y poner un retardo de 0. Da igual: incluso con 0 la función entra a la cola de tareas y solo corre cuando el hilo principal queda libre, o sea después del ciclo. El problema es el alcance de var, no el tiempo.
¿Y si tu ejercicio no es ninguno de estos?
No hace falta buscar el ejercicio exacto en internet. Trae el tuyo, o pide los que te falten.
Todo esto es gratis y sin instalar nada. Puedes probar antes de crear cuenta.
Lo que cubre
- Tipos y coerción
- Closures y ámbito de variables
Preguntas que le puedes hacer
- Tipos y coerciónExplícame «Tipos y coerción» con un ejemplo práctico y dime en qué suele equivocarse la gente.
- Closures y ámbito de …Explícame «Closures y ámbito de variables» con un ejemplo práctico y dime en qué suele equivocarse la gente.
Cómo enseña este tutor
Es riguroso y completo: justifica cada paso y nombra el teorema, la norma o la buena práctica que está aplicando, para que puedas citarla en tu trabajo o en el parcial.
- · Te muestra el camino completo, no solo el resultado.
- · Si algo no te cuadra, te lo explica otra vez de otra manera.
- · Con una foto de tu cuaderno te dice dónde está el error.
- · Te arma quizzes de lo que acabas de ver para saber si de verdad quedó.
Otras materias de Universidad y trabajo
