CAP 04 · LEC 02·Funciones
Arrow functions: la sintaxis moderna de funciones
Las arrow functions (ES6) son más cortas y tienen un comportamiento de 'this' diferente. Son la forma estándar de escribir funciones hoy — especialmente como callbacks.
¿Encontraste un error o algo que mejorar?Editá esta lección en GitHub →
Sintaxis básica
Las arrow functions eliminan la palabra function y usan =>:
// Función tradicional
const saludar1 = function(nombre) {
return `Hola, ${nombre}`;
};
// Arrow function equivalente
const saludar2 = (nombre) => {
return `Hola, ${nombre}`;
};
// Con un solo parámetro, los paréntesis son opcionales
const saludar3 = nombre => {
return `Hola, ${nombre}`;
};
// Con retorno de una sola expresión: return implícito
const saludar4 = nombre => `Hola, ${nombre}`;
console.log(saludar4("Ana")); // "Hola, Ana"// Función tradicional con tipos
const saludar1 = function(nombre: string): string {
return `Hola, ${nombre}`;
};
// Arrow function equivalente
const saludar2 = (nombre: string): string => {
return `Hola, ${nombre}`;
};
// Con un solo parámetro (paréntesis requeridos en TS)
const saludar3 = (nombre: string): string => {
return `Hola, ${nombre}`;
};
// Con retorno de una sola expresión: return implícito
const saludar4 = (nombre: string): string => `Hola, ${nombre}`;
console.log(saludar4("Ana")); // "Hola, Ana"Salida
Hola, AnaArrow functions como callbacks
Las arrow functions brillan como argumentos de .map, .filter, .reduce:
const numeros = [1, 2, 3, 4, 5];
// Comparación: función tradicional vs arrow
const dobles1 = numeros.map(function(n) { return n * 2; });
const dobles2 = numeros.map(n => n * 2);
console.log(dobles2); // [2, 4, 6, 8, 10]
// Encadenamiento limpio
const resultado = numeros
.filter(n => n % 2 === 0) // [2, 4]
.map(n => n ** 2) // [4, 16]
.reduce((acc, n) => acc + n, 0); // 20
console.log(resultado); // 20const numeros: number[] = [1, 2, 3, 4, 5];
// Comparación: función tradicional vs arrow
const dobles1 = numeros.map(function(n: number): number { return n * 2; });
const dobles2 = numeros.map((n: number): number => n * 2);
console.log(dobles2); // [2, 4, 6, 8, 10]
// Encadenamiento limpio
const resultado = numeros
.filter((n: number) => n % 2 === 0) // [2, 4]
.map((n: number) => n ** 2) // [4, 16]
.reduce((acc: number, n: number) => acc + n, 0); // 20
console.log(resultado); // 20Salida
[2, 4, 6, 8, 10]
20La diferencia clave: this
La diferencia más importante entre arrow functions y funciones tradicionales es cómo tratan this:
const temporizador = {
nombre: "Mi timer",
iniciar() {
// 'this' aquí es temporizador ✅
console.log(`Iniciando: ${this.nombre}`);
// ❌ función tradicional pierde 'this'
// setTimeout(function() {
// console.log(this.nombre); // undefined
// }, 100);
// ✅ arrow function hereda 'this' del contexto léxico
setTimeout(() => {
console.log(`Corriendo: ${this.nombre}`);
}, 100);
},
};
temporizador.iniciar();
// Iniciando: Mi timer
// Corriendo: Mi timerRegla de this
Las arrow functions no tienen su propio this — lo heredan del contexto donde fueron definidas (léxico). Las funciones tradicionales reciben this según cómo son llamadas.
Cuándo NO usar arrow functions
// ❌ Como método de objeto (this incorrecto)
const contador = {
valor: 0,
incrementar: () => {
this.valor++; // this NO es contador — es el contexto externo
},
};
// ✅ Usar función tradicional para métodos
const contador2 = {
valor: 0,
incrementar() {
this.valor++;
},
};
// ❌ Como constructor (arrows no pueden usarse con new)
// const Persona = (nombre) => { this.nombre = nombre; };
// new Persona("Ana"); // TypeError