🔒 Día 25 — Destructuring, Spread Operator, Map, Filter, Reduce y ES6+

Aquí tienes el DÍA 25 cerrando este bloque del nivel Mid-Level de JavaScript.

Objetivo:
Hoy nos adentraremos en las técnicas modernas de JavaScript que permiten escribir código más limpio, eficiente y expresivo. Aprenderás Destructuring, Spread Operator, y los métodos de arrays más potentes: Map, Filter y Reduce.

Estas herramientas son fundamentales para programar de forma profesional en JavaScript moderno (ES6+).

📚 Formación Teórica

1. Destructuring

Permite extraer valores de objetos o arrays de manera más rápida y clara.

2. Spread Operator

Permite expandir arrays u objetos de forma sencilla para combinarlos o clonarlos.

3. Métodos modernos de arrays

  • map(): crear un nuevo array aplicando una función a cada elemento.
  • filter(): crear un nuevo array filtrando elementos según una condición.
  • reduce(): reducir todo un array a un único valor (acumulador).

🎥 Vídeos para complementar (no específicos del curso original)

(Como el vídeo principal no cubre bien esta parte, se recomienda complementar con el enlace superior para reforzar.)

🧠 Apuntes Técnicos del Día

📌 Destructuring de objetos y arrays

// Objetos
const persona = { nombre: "Jesús", edad: 34 };
const { nombre, edad } = persona;
console.log(nombre); // Jesús
console.log(edad);   // 34

// Arrays
const frutas = ["Manzana", "Banana", "Naranja"];
const [fruta1, fruta2] = frutas;
console.log(fruta1); // Manzana
  • Extraes directamente las propiedades o elementos.

📌 Spread Operator (…)

// Clonar arrays
const original = [1, 2, 3];
const copia = [...original];

// Combinar arrays
const combinados = [...original, 4, 5];

console.log(combinados); // [1,2,3,4,5]

// Clonar objetos
const originalObj = { nombre: "Jesús" };
const copiaObj = { ...originalObj, edad: 34 };
console.log(copiaObj); // {nombre: "Jesús", edad: 34}
  • Permite expandir arrays u objetos de manera sencilla.

📌 Métodos modernos de arrays

map()

const numeros = [1, 2, 3];
const duplicados = numeros.map(num => num * 2);
console.log(duplicados); // [2, 4, 6]
  • Aplica una función a cada elemento y crea un nuevo array.

filter()

const edades = [12, 17, 22, 30];
const mayoresDeEdad = edades.filter(edad => edad >= 18);
console.log(mayoresDeEdad); // [22, 30]
  • Crea un array filtrando los elementos que cumplan una condición.

reduce()

const suma = [1, 2, 3, 4].reduce((acumulador, actual) => acumulador + actual, 0);
console.log(suma); // 10
  • Reduce un array a un solo valor (acumulando resultados).

🛠️ Tareas prácticas del Día 25

Tarea 1 — Usar destructuring:

  • Crea un objeto usuario con propiedades nombre, edad, email.
  • Extrae esas propiedades usando destructuring y muestra los valores en consola.

Tarea 2 — Usar spread operator:

  • Crea dos arrays de números.
  • Combínalos en un solo array usando el operador ... y muestra el resultado en consola.

Tarea 3 — Trabajar con métodos de arrays:

  • A partir de un array de números:
    • Usa .map() para multiplicarlos por 3.
    • Usa .filter() para obtener los números mayores a 10.
    • Usa .reduce() para sumar todos los números filtrados.

Entrega:

  • Crea un documento PDF donde adjuntes:
    • Código de destructuring, spread, y métodos de arrays.
    • Capturas de pantalla mostrando resultados en consola.

🚀 Resultado esperado al finalizar el día

  • Dominar las técnicas modernas de JavaScript (ES6+).
  • Escribir código más limpio, más rápido y más eficiente.
  • Estar preparado para integrarse a proyectos profesionales que usan JavaScript moderno.

✅ ¡Con esto finalizas el nivel Mid-Level de JavaScript dentro de tu certificación!
Has alcanzado un nivel en el que puedes manipular datos de APIs, gestionar asincronía, almacenar información localmente y escribir código limpio y actualizado.

Pronto estarás aplicando todo este conocimiento en la integración completa en WordPress y proyectos reales. 🚀

¡Claro! Aquí tienes un párrafo de felicitación para cerrar el bloque de nivel Mid-Level en JavaScript, en un tono motivador y elegante para tu WordPress:

🎉 ¡Felicidades, Desarrollador Mid-Level en JavaScript!

Has alcanzado un gran hito en tu formación:
Ahora eres oficialmente un Desarrollador Mid-Level en JavaScript. 🚀

Dominas no solo los fundamentos del lenguaje, sino también el trabajo con APIs, la gestión de asincronía con promesas y async/await, la manipulación avanzada de datos y las técnicas modernas de ES6+.
Has adquirido herramientas reales y actuales que utilizan los profesionales para construir aplicaciones web robustas, dinámicas y eficientes.

Este logro es el resultado de tu esfuerzo, tu disciplina y tu capacidad de ir siempre un paso más allá.

¡Enhorabuena! 🎉
Lo mejor todavía está por venir. Vamos a seguir creciendo, integrando todo este poder en proyectos reales de WordPress, seguridad, y DevSecOps.
¡Sigamos avanzando juntos hacia el siguiente nivel! 🔥


¿Listo para seguir con tu certificación?