1.1Repaso de JavaScript moderno (ES6+)
Lo esencial en 30 segundos
- const por defecto, let si hace falta, nunca var: const para lo que no se reasigna, let para lo que evoluciona — ambos con ámbito de bloque, predecible.
- La sintaxis que realmente se escribe: funciones flecha, desestructuración (const { nom } = obj), template literals (`Bonjour ${nom}`), spread/rest (...).
- Colecciones en funcional: map (transformar), filter (conservar), reduce (agregar) — sin un JS moderno fluido, todo Node parece confuso.
Minicaso hilado — Salim, desarrollador junior en Argel
Salim, desarrollador junior en una startup en Argel, retoma un script antiguo escrito con var y bucles for anidados: las variables «se escapan» de los bloques y nadie entiende lo que calcula el código. Reescribe el script en JavaScript moderno — const por defecto, funciones flecha, desestructuración de los objetos recibidos de la API y un encadenamiento filter/map para extraer los nombres de los usuarios activos. El código pasa de 40 líneas oscuras a 12 líneas legibles.
Este mismo caso vuelve en el curso, el esquema, el guion y el reto 48h — y continúa en 1.2, 1.3 y 1.4.
1. const, let, nunca var
Node ejecuta JavaScript: dominar el JS moderno (ES6+) es el prerrequisito de todo. Para declarar una variable: const (no reasignable, a priorizar por defecto porque la mayoría de las variables no cambian de referencia), let (reasignable, para contadores y acumuladores) y nunca var (ámbito de función desconcertante, fuente de errores). const y let tienen ámbito de bloque (limitado a las llaves), mucho más predecible. El reflejo moderno: const por defecto, let si hace falta reasignar, nunca var.
Salim sustituye cada var de su script antiguo por const, salvo el contador del bucle que pasa a let: las variables dejan de «escaparse» de los bloques if y la mitad de los comportamientos extraños desaparecen.
2. La sintaxis que realmente se escribe
Los imprescindibles del día a día: las funciones flecha ((a, b) => a + b, ideales para los callbacks omnipresentes en Node, sin this propio), la desestructuración (const { nom, age } = personne — omnipresente para las importaciones y los datos), los template literals (`Bonjour ${nom}` en lugar de concatenar con +), el spread/rest (... para fusionar o agrupar).
Salim muestra sus usuarios con un template literal y extrae nom y email por desestructuración: se acabaron los user.name repetidos diez veces y las concatenaciones ilegibles.
3. map / filter / reduce: pensar en intenciones
Los métodos de arrays son la manera moderna y funcional de tratar las colecciones: map transforma cada elemento (nuevo array del mismo tamaño), filter conserva los que cumplen una condición, reduce agrega todo en un valor (suma, agrupación). Cada uno expresa una intención legible de un vistazo — y todo código Node moderno los emplea constantemente.
Salim sustituye su bucle for por users.filter(u => u.actif).map(u => u.nom): la línea se lee como una frase («quédate con los activos, toma sus nombres») y su compañero la entiende sin comentarios.
🔎 Ejemplo concreto — 🔎 Ejemplo concreto — map, filter, reduce
Expresar una intención, como Salim para sus usuarios.
const users = [{ nom: "Amine", actif: true }, { nom: "Sara", actif: false }];
const noms = users.filter(function (u) { return u.actif; }).map(function (u) { return u.nom; });
console.log(noms); // ["Amine"]
const total = [1, 2, 3].reduce(function (s, n) { return s + n; }, 0);
console.log(total); // 6
const { nom } = users[0];
console.log("Bonjour " + nom);Lectura: «quédate con los activos, toma sus nombres» se lee de un vistazo, sin gestionar índices.
Lección: const por defecto; map/filter crean nuevos arrays en lugar de modificar el original.
Vocabulario de la sección
- const / let (frente a var)
- const: variable no reasignable, a priorizar por defecto. let: variable reasignable. Ambas con ámbito de bloque; var debe evitarse (ámbito de función desconcertante).
Ejemplo sencillo: El const users y el let contador del script reescrito por Salim.
Lo que no es: un var declarado en un if que «se escapa» fuera del bloque.
Reflejo: const por defecto, let si hay reasignación, nunca var.
- Función flecha (arrow)
- Sintaxis concisa para escribir funciones, muy usada para los callbacks; no tiene su propio this, lo que evita muchas trampas.
Ejemplo sencillo: El u => u.actif pasado a filter por Salim.
Lo que no es: una function clásica con un this que cambia según la llamada.
Reflejo: callbacks cortos = flecha.
- Desestructuración
- Extracción de valores de objetos o arrays en una línea: const { nom } = obj o const [a, b] = arr.
Ejemplo sencillo: Salim extrae nom y email de cada usuario recibido de la API.
Lo que no es: repetir user.name y user.email en diez líneas.
Reflejo: extraer en una línea, nombrar con claridad.
- Template literal
- Cadena entre acentos graves que permite insertar variables limpiamente, sin concatenar con +.
Ejemplo sencillo: La visualización de los usuarios de Salim sin concatenar trozos de cadenas.
Lo que no es: "Bonjour " + nom + ", tu as " + age + " ans".
Reflejo: en cuanto una variable entra en una cadena, acentos graves.
- map / filter / reduce
- Métodos modernos de arrays: transformar (map), conservar según una condición (filter), agregar en un valor (reduce) — de forma funcional.
Ejemplo sencillo: El filter + map de Salim para los nombres de los usuarios activos.
Lo que no es: un bucle for con índice, array inicializado y push manuales.
Reflejo: una intención por método, encadenados de forma legible.
En la práctica — En la práctica — Consolidar el JavaScript moderno
- Declare variables con const (por defecto) y let (si hay reasignación); compruebe el ámbito de bloque. Destierre var.
- Escriba funciones flecha y úselas como callbacks; compárelas con la sintaxis function clásica.
- Practique la desestructuración (const { a, b } = obj) y los template literals con ejemplos concretos.
- Trate un array con map (transformar), filter (filtrar) y reduce (agregar) en lugar de bucles for clásicos.
Guion listo para decir — justificar la reescritura en JS moderno (30 s)
«Propongo que reescribamos este script en JavaScript moderno: const por defecto, funciones flecha y filter/map en lugar de bucles for. El código será dos veces más corto, cada línea expresará su intención y eliminaremos los errores de ámbito debidos a los var.»
Para decir en la revisión de código; mostrar el antes/después en un fragmento real del proyecto.
Modelo copiar-pegar — fragmento JS moderno
const users = [
{ nom: "Amine", actif: true },
{ nom: "Sara", actif: false }
];
const nomsActifs = users
.filter(function (u) { return u.actif; })
.map(function (u) { return u.nom; });
console.log(nomsActifs);
const total = [10, 20, 30].reduce(function (s, n) { return s + n; }, 0);
console.log(total);Script antiguo que retomar
No reescribir todo de golpe: sustituir primero los var por const/let, luego convertir un bucle for en filter/map — como Salim, paso a paso verificados con node.
Datos de API en Argel
Salim desestructura los objetos recibidos de la API (const { nom, email } = user): los campos usados se ven de un vistazo al inicio de cada función.
Visualizaciones consola limpias
En cuanto un mensaje contenga una variable, pasar al template literal: se acabaron las concatenaciones con + que rompen la lectura de los logs.
Arrays grandes en preparación
Acostumbrarse a encadenar filter/map/reduce prepara directamente la sección 1-2: estos métodos estarán en todas partes en el tratamiento de resultados asíncronos.
✓ Buenas prácticas
- const por defecto, let si hay reasignación.
- Una intención por método (filter/map).
- Probar cada fragmento con node.
✗ Errores frecuentes
- Creer que const = objeto inmutable.
- Mantener var «por costumbre».
- Bucles for donde basta filter/map.
Puntos clave
- JS MODERNO (ES6+) = prerrequisito de Node. Variables: const por defecto, let si hay reasignación, NUNCA var (ámbito de bloque, predecible).
- Funciones FLECHA: concisas, ideales para los callbacks omnipresentes en Node; sin this propio.
- DESESTRUCTURACIÓN, TEMPLATE LITERALS, SPREAD/REST: la sintaxis que realmente se escribe hoy.
- MÉTODOS DE ARRAYS (map/filter/reduce) = tratamiento moderno y funcional de las colecciones.
Reto 48h — aplíquelo mañana
Reescriba un fragmento de código antiguo (modelo anterior): var → const/let, un bucle for → filter/map, una concatenación → template literal. Ejecútelo con node y verifique el resultado. 20 minutos bastan.
- Puedo explicar const frente a let frente a var (ámbito de bloque).
- Sé escribir flecha, desestructuración y template literals.
- He convertido un bucle for en filter/map.
Preguntas frecuentes
const, let o var: ¿cuál usar y por qué evitar var?
La regla moderna, para aplicar sistemáticamente: const por defecto, let si debe reasignar, nunca var. const expresa que la referencia no cambiará, protege contra reasignaciones accidentales (error detectado pronto) y hace el código legible. Matiz: const impide la reasignación, pero el contenido de un objeto o array sigue siendo modificable (arr.push(1) funciona). let sirve para los valores que evolucionan (contadores, acumuladores). var debe evitarse: ámbito de función (una var declarada en un if «se escapa» fuera del bloque) y hoisting tramposo — mientras que const/let tienen un ámbito de bloque predecible y seguro.
¿Hay que dominar realmente map/filter/reduce o bastan los bucles for?
Los bucles for funcionan, pero map/filter/reduce son el estilo moderno e idiomático — y como mínimo debe entenderlos porque están en todas partes en el código Node real. map transforma cada elemento (nuevo array del mismo tamaño), filter conserva los que cumplen una condición, reduce agrega todo en un valor. Ventajas: expresividad (users.filter(u => u.actif).map(u => u.nom) se lee como una frase), menos errores (sin índices que gestionar) y crean nuevos arrays en lugar de modificar el original. Como Salim, convierta sus bucles uno por uno: la ganancia de legibilidad es inmediata.
¿Qué reflejo adoptar para declarar variables en JS moderno?