Lección 26: Arrow Functions

🧠 Concepto

Las arrow functions (funciones flecha) son una sintaxis más concisa para escribir funciones introducida en ES6. Se definen con => y tienen diferencias importantes respecto a las funciones tradicionales.

Sintaxis básica:

// Función tradicional
function sumar(a, b) {
  return a + b;
}

// Arrow function equivalente
const sumar = (a, b) => a + b;

Variantes de sintaxis:

// Sin parámetros
const saludar = () => 'Hola';

// Un solo parámetro (paréntesis opcionales)
const cuadrado = x => x * x;

// Varios parámetros
const sumar = (a, b) => a + b;

// Cuerpo con llaves {} — requiere return explícito
const obtenerUsuario = (id, nombre) => {
  const tipo = id > 100 ? 'premium' : 'normal';
  return { id, nombre, tipo };
};

💻 Ejemplo

// Retorno implícito vs explícito
const doble = n => n * 2;                    // implícito
const triple = n => { return n * 3; };       // explícito

// Retornar un objeto literal requiere paréntesis
const crearPersona = (nombre, edad) => ({ nombre, edad });
console.log(crearPersona('Ana', 30)); // { nombre: 'Ana', edad: 30 }

// Arrow function como callback
const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter(n => n % 2 === 0);
const cuadrados = numeros.map(n => n * n);
console.log(pares);      // [2, 4]
console.log(cuadrados);  // [1, 4, 9, 16]

⚠️ Nota

Las arrow functions NO tienen su propio this, arguments, super ni new.target. Esto las hace ideales para callbacks y métodos funcionales, pero inadecuadas como métodos de objeto o constructores.

NO se pueden usar con new:

const Persona = (nombre) => { this.nombre = nombre; };
// const p = new Persona('Luis'); // TypeError: Persona is not a constructor

🎯 Tip

Usa arrow functions cuando necesites preservar el this del contexto circundante (ej. dentro de un método que usa setTimeout). Usa funciones tradicionales cuando necesites un this dinámico, el objeto arguments, o quieras usar la función como constructor.

// Buen uso de arrow: this heredado
const contador = {
  valor: 0,
  incrementar() {
    setInterval(() => {
      this.valor++; // this hereda de incrementar()
      console.log(this.valor);
    }, 1000);
  }
};

📝 Ejercicio

Escribe una función arrow que reciba un array de números y devuelva un nuevo array con solo los números mayores a 10. Usa arrow function y el método filter.

// Completa:
const mayoresQueDiez = ???;

console.log(mayoresQueDiez([5, 12, 8, 20, 3, 15])); // [12, 20, 15]