Funciones de flecha en JavaScript 🏹

Introducción

Las funciones de flecha son una característica introducida en ECMAScript 6 (ES6) que permiten escribir funciones de una manera más concisa y clara. En este artículo, explicaremos qué son las funciones de flecha en JavaScript, cómo se escriben y cuándo se deben usar.

Descripción

Las funciones de flecha son una alternativa compacta a las funciones tradicionales en JavaScript, con algunas diferencias sintácticas y limitaciones en su uso. Se llaman "funciones de flecha" porque se representan con una flecha ⇒ .Las funciones de flecha ayudan en la legibilidad del código así como soluciona algunos problemas en la manera que se comporta el enlace this pero esto lo veremos con más detalle en otro momento.

Las funciones de flecha tienen algunas características clave que las hacen diferentes de las funciones tradicionales en JavaScript:

Las funciones de flecha no tienen su propio valor this. En su lugar, heredan el valor de this del contexto en el que se crean. Esto significa que las funciones de flecha son ideales para el uso dentro de objetos, ya que permiten mantener el valor this del objeto padre.
Las funciones de flecha no tienen su propio objeto arguments. En su lugar, se pueden pasar argumentos a través de la sintaxis de desestructuración de parámetros.

Sintaxis

const nombreDeLaFuncion = (parámetros){
    cuerpo de la función
}

Como podemos ver, la función se almacena en una variable. En el ejemplo usé const pero también puede ser let. Pero también puede ser una función anónima, es decir no le asignamos a ninguna variable:

(parámetros) => {
    cuerpo de la función
}

Este tipo de funciones anónimas son especialmente útiles cuando usadas como callback, lo veremos más adelante.

Descomposición de una función tradicional a una función de flecha

// Función tradicional
function divisionPorDos (dividendo) {
    return dividendo / 2;
}

// 1. Función de flecha
const divisionPorDos = (dividendo) => {
    return dividendo / 2;
}

// 2. Función de flecha de un sólo parámetro
const divisionPorDos = dividendo => {
    return dividendo / 2;
}

// 3. Función de flecha de un sólo parámetro y return implícito
const divisionPorDos = dividendo => dividendo / 2;

En éste ejemplo, podemos identificar las diferencias entre una función tradicional y una función de flecha.
En este caso, podemos omitir los paréntesis, caso contrario, es decir si no tiene ningún parámetro, o parámetros por defecto, parámetros rest o parámetros desestructurados, los paréntesis son obligatorios.
En este punto queda explícito como podemos simplificarla aún más en caso de que lo único que hagamos en el cuerpo de nuestra función fuese devolver algo con un return. Los corchetes sólo pueden omitirse si la función devuelve directamente una expresión. Si el cuerpo tiene líneas adicionales , los corchetes son obligatorios, al igual que la palabra clave return.

Función de flecha y parámetros

Al igual que en las funciones tradicionales, las funciones de flecha también admiten parámetros rest, parámetros por defecto y desestructuración, para estos casos se requiere que siempre vayan entre paréntesis.

Si quieres saber un poco más sobre los operadores spread y rest , tengo un artículo sólo sobre estos.

// 1. Función de flecha con parámetro por defecto
const miColorFav = (color = "Morado") => `Mi color favorito es ${color}`;
console.log(miColorFav()); // "Mi color favorito es Morado"

// 2. Función de flecha con parámetros rest
const misColoresFav = (...colores) => `Tenemos ${colores.length} colores`;
console.log(misColoresFav("Azul","Amarillo")); // "Tenemos 2 colores"

// 3. Función de flecha usando desestructuración de objetos
const usuario = {
    username: "Juan",
  password: "aH23.!"
}

const datosUsuario = ({username:nombreDeUsuario, password:contrasena}) => `Su nombre de usuario es: ${nombreDeUsuario} y su contraseña es ${contrasena}`;

console.log(datosUsuario(usuario));//"Su nombre de usuario es: Juan y su contraseña es aH23.!"

// 4. Función de flecha usando desestructuración de arreglos
const miArreglo = [1,2,3,4,5];

const numerosFunc = ([posicion1,...resto] = numeros) => resto;

console.log(numerosFunc(miArreglo)); // [2, 3, 4, 5]

Casos práctico y común de uso de funciones de flecha

Las funciones de flecha son especialmente útiles cuando se trabaja con objetos y eventos. Debido a que las funciones de flecha heredan el valor this del objeto padre, son ideales para mantener el contexto correcto al trabajar con objetos.

Además, las funciones de flecha son útiles cuando se trabaja con eventos, ya que las funciones de flecha son más cortas y más fáciles de escribir que las funciones tradicionales.

Cuando estamos trabajando con funciones de orden superior (funciones que toman como argumento otra función y/o retorna una función como valor), las funciones de flecha se muestran especialmente útiles, dado que mejora mucho la legibilidad de nuestro código.

Vamos usar un ejemplo con el método integrado forEach(). Este método ejecuta una función callback una vez por cada elementro dentro de un arreglo. La manera tradicional de usarlo sería:

const arregloNumeros = [1,2,3,4];

arregloNumeros.forEach(function (elemento){
        console.log(elemento); //1,2,3,4
    }
);

En ejemplo de arriba seria mucho más legible y compacto si usásemos una función de flecha:

const arregloNumeros = [1,2,3,4]

arregloNumeros.forEach( elemento => console.log(elemento)); // 1,2,3,4

Conclusión

Las funciones de flecha son un requisito básico si queremos que nuestro código sea más legible, más compacto al brindarnos la opción de omitir tanto paréntesis,llaves y la palabra-clave return. Además particularmente, he percibido que esto se muestra sumamente útil en React,js , que usa muchas características de next-gen Javascript.

Dev.lucas