Qué son y cómo usar funciones arrow en JavaScript

Una función arrow en JavaScript es una sintaxis concisa para definir una función anónima que se puede definir en línea sin necesidad de nombrarla formalmente.

Se les conoce formalmente como una “función flecha” debido a la notación de flecha (=>) que se utiliza para definirla (también se les puede llamar funciones lambda).

Estas funciones ofrecen una forma más breve de escribir funciones. Es especialmente útil en situaciones donde necesitas definir una función simple, que vas a usar una única vez.

Además, tienen comportamientos específicos relacionados con el contexto de this (que simplifican su uso).

Sintaxis básica

La sintaxis de una función lambda es la siguiente:

const nombreFuncion = (param1, param2, ...) => {
    // Bloque de código
};

Ejemplo básico

const sumar = (a, b) => {
    return a + b;
};

console.log(sumar(5, 3)); // Salida: 8

Contexto de this

Una de las características más importantes de las funciones lambda es que no tienen su propio contexto de this.

En lugar de eso, this se hereda del contexto en el que se define la función. Esto puede ser útil cuando se trabaja con métodos dentro de objetos y se desea mantener el contexto de this.

class Contador {
    constructor() {
        this.numero = 0;
    }

    incrementar() {
        setTimeout(() => {
            this.numero++;
            console.log(this.numero);
        }, 1000);
    }
}

const contador = new Contador();
contador.incrementar(); // Salida después de 1 segundo: 1

Limitaciones

No se puede usar como constructor

Las funciones lambda no se pueden usar como constructores. No pueden ser invocadas con el operador new, y si se intenta hacerlo, se produce un error.

const Funciona = () => {};
const instancia = new Funciona(); // TypeError: Funciona is not a constructor

No tienen arguments

Las funciones lambda no tienen el objeto arguments que está disponible en funciones tradicionales. Si necesitas acceder a los argumentos de una función, deberías utilizar los parámetros rest (...args).

const sumarTodos = (...numeros) => {
    return numeros.reduce((acumulado, actual) => acumulado + actual, 0);
};

console.log(sumarTodos(1, 2, 3, 4)); // Salida: 10

Usos comunes de las funciones Lambda

const numeros = [1, 2, 3, 4, 5];
const cuadrados = numeros.map(num => num * num);

console.log(cuadrados); // Salida: [1, 4, 9, 16, 25]

fetch('https://api.example.com/datos')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

const operaciones = {
    valor: 10,
    aumentar: function() {
        setTimeout(() => {
            this.valor++;
            console.log(this.valor);
        }, 1000);
    }
};

operaciones.aumentar(); // Salida después de 1 segundo: 11