🔒 Día 26 — Conceptos Avanzados de Funciones y Programación en JavaScript

📚 Curso JavaScript Master — Introducción

¡Enhorabuena por llegar hasta aquí! 🎉
Has demostrado disciplina, perseverancia y pasión por dominar el desarrollo web.

Ahora entras en una etapa aún más emocionante: el nivel Master de JavaScript.
Aquí aprenderás conceptos avanzados de programación, profundizarás en las APIs más potentes del navegador y descubrirás herramientas que usan los desarrolladores senior para crear aplicaciones web modernas, rápidas, seguras y capaces de trabajar incluso sin conexión a Internet.

En este nivel aprenderás a pensar como un programador experto, a optimizar el rendimiento, y a sacar todo el poder del navegador para llevar tus proyectos WordPress y aplicaciones web a un nivel profesional superior.

🚀 Es el momento de pasar de ser desarrollador avanzado a empezar a pensar como arquitecto de aplicaciones.
¡Vamos a por ello!

🔒 Día 26 — Conceptos Avanzados de Funciones y Programación en JavaScript

Objetivo:
Hoy nos adentraremos en conceptos de programación avanzados como prototipos, this contextual, recursividad, strict mode, closures y parámetros avanzados, que son fundamentales para programar de manera limpia, profesional y eficiente en JavaScript.

📚 Formación Teórica

1. Prototipos y herencia en JavaScript

  • Todo objeto en JavaScript hereda de un prototipo.
  • Permiten extender funcionalidades sin modificar objetos originales.

2. Strict Mode

  • Impone reglas más estrictas al escribir JavaScript para evitar errores comunes y malas prácticas.

3. Funciones Flecha y this contextual

  • Las funciones flecha no crean su propio this, usan el de su contexto superior.
  • Mejora la claridad del código y previene errores al trabajar con eventos o callbacks.

4. Recursividad

  • Función que se llama a sí misma para resolver un problema de manera repetitiva y controlada.

5. Closures (Clausuras)

  • Permiten que una función recuerde su contexto léxico aunque se ejecute en otro lugar del programa.

6. Parámetros Rest y Operador Ternario

  • Parametrizar funciones con cantidad indefinida de argumentos.
  • Operador ternario para escribir condicionales en una línea.

🎥 Vídeos de hoy

Instrucciones para el vídeo:
Concéntrate en entender:

  • Cómo funcionan prototipos y herencia.
  • Qué ventajas da usar «modo estricto».
  • Qué significa que las funciones flecha no tengan su propio this.
  • Cómo y cuándo utilizar recursividad y closures.

🧠 Apuntes Técnicos del Día

📌 Prototipos

function Persona(nombre) {
  this.nombre = nombre;
}

Persona.prototype.saludar = function() {
  console.log(`Hola, soy ${this.nombre}`);
};

const persona1 = new Persona("Jesús");
persona1.saludar(); // Hola, soy Jesús
  • Puedes añadir métodos o propiedades a todos los objetos creados con un constructor.

📌 Strict Mode

'use strict';
x = 10; // Error: x is not defined
  • Activa reglas más estrictas para evitar malas prácticas.

📌 Funciones Flecha y this contextual

const persona = {
  nombre: "Jesús",
  saludar: function() {
    setTimeout(() => {
      console.log(`Hola, soy ${this.nombre}`);
    }, 1000);
  }
};
persona.saludar();
  • this dentro de una función flecha apunta al objeto exterior.

📌 Recursividad

function cuentaAtras(numero) {
  if (numero <= 0) return;
  console.log(numero);
  cuentaAtras(numero - 1);
}
cuentaAtras(5); // 5, 4, 3, 2, 1
  • La función se llama a sí misma hasta cumplir la condición de parada.

📌 Closures

function saludar(nombre) {
  return function() {
    console.log(`Hola ${nombre}`);
  }
}

const saludarAJesus = saludar("Jesús");
saludarAJesus(); // Hola Jesús
  • La función interior recuerda el valor de nombre aún después de haberse ejecutado la función exterior.

📌 Parámetro Rest y Operador Ternario

function sumar(...numeros) {
  return numeros.reduce((acum, actual) => acum + actual, 0);
}
console.log(sumar(1, 2, 3)); // 6

const edad = 20;
const mensaje = edad >= 18 ? "Mayor de edad" : "Menor de edad";
console.log(mensaje);
  • ... permite capturar cualquier número de argumentos.
  • Ternario para simplificar condicionales.

🛠️ Tareas prácticas del Día 26

Tarea 1 — Crear un prototipo personalizado:

  • Crea un constructor Animal que tenga propiedades nombre y especie.
  • Añade un método presentarse al prototipo.

Tarea 2 — Recursividad básica:

  • Crea una función que imprima todos los números del 10 al 1 utilizando recursividad.

Tarea 3 — Uso de closures:

  • Crea una función crearContador() que devuelva otra función capaz de incrementar y mostrar un contador interno.

Tarea 4 — Parámetros Rest y Ternario:

  • Crea una función que reciba una lista de edades y devuelva cuántas son mayores de edad usando filter y ternario.

Entrega:

  • Crea un documento PDF donde adjuntes:
    • Código de prototipos, recursividad, closures, y funciones avanzadas.
    • Capturas de pantalla mostrando resultados.

🚀 Resultado esperado al finalizar el día

  • Comprender conceptos avanzados de programación en JavaScript.
  • Escribir funciones de manera moderna, eficiente y segura.
  • Prepararte para integrar estos conceptos en proyectos de alto nivel en WordPress y aplicaciones web.