Lo que realmente necesitan las funciones de flecha en JavaScript

¡Hola, Habr! Les presento a su atención la traducción del artículo "La verdadera razón por la que JavaScript tiene funciones de flecha" de Martin Novák.





* frase de meme del juego Skyrim



Si aún no usa las funciones de flecha, no se culpe a sí mismo, ese es el trabajo de sus padres; en su lugar, piense en los beneficios que puede obtener al usarlas como un estudiante diligente. Hoy todo mi código está escrito usando funciones de flecha.



Este es un ejemplo del mismo código, escrito también en el estilo tradicional:

const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};

Puede notar que el código es mucho más corto cuando se escribe usando una función de flecha. Todo lo que está escrito antes de la flecha son los argumentos, después de la flecha es el resultado devuelto.

Si necesita una función que contenga múltiples acciones, puede escribirla así:

const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};

Las funciones de flecha también se denominan a menudo funciones lambda y no solo se utilizan en JavaScript. Python es un buen ejemplo de dónde también se pueden encontrar funciones lambda.



En Python, su sintaxis es la siguiente:

lambdaFunction = lambda a, b : a + b

Simplificar

El uso de funciones de flecha lo motiva a simplificar su código de acuerdo con el principio KISS (Keep-it-simple-stupid) y el principio de responsabilidad única (cada función es responsable de una sola acción específica).



En general, los escribo sin llaves {}. Si una función es difícil de leer o necesita usar varias expresiones en ella, le aconsejo que la divida en varias más pequeñas.

Este código es más fácil de escribir, más fácil de reutilizar y probar. Además, las funciones pueden recibir nombres más descriptivos para representar con precisión el trabajo que están haciendo.

Funciones de primera clase

JavaScript tiene funciones de primera clase. Estas son funciones que se utilizan como variables regulares. Pueden actuar como argumentos para otras funciones o devolverlas como resultado. Un ejemplo con el que probablemente esté familiarizado:

document.querySelector('#myButton').addEventListner('click', function() {
  alert('click happened');
});

Aquí se muestra una función anónima pasada como argumento a addEventListener. Este método se usa a menudo en Javascript para devoluciones de llamada.



Un ejemplo de devolución de una función es diferente, se muestra a continuación:

const myFirstClassFunction = function(a) {
  return function(b) {
    return a + b;
  };
};

myFirstClassFunction(1)(2); // => 3

Sin embargo, con la función de flecha, todo se ve mucho más limpio:

const myFirstClassArrow = a => b => a + b;

myFirstClassArrow(1)(2); // => 3

Aquí todo es simple: lo que está escrito antes de la última flecha son los argumentos, y después está el cálculo. De hecho, estamos trabajando con varias funciones y también podemos usar múltiples llamadas fn (call1) (call2);

Aplicación parcial

Puede comenzar a usar funciones de flecha para componer, como ladrillos de Lego, funciones parcialmente aplicables. Esto le permitirá crear funciones personalizadas pasándoles argumentos específicos. Desglosémoslo en el siguiente ejemplo:

const add = a => b => a + b;

const increaseCounter = counter => add(1)(counter);
increaseCounter(5); // => 6

const pointFreeIncreaseCounter = add(1);
pointFreeIncreaseCounter(5); // => 6

Esto es similar a usar funciones con variables predeterminadas, pero la aplicación parcial brinda más flexibilidad.



Estas funciones se llaman curry. Son una secuencia de funciones unarias y mónadas que son comunes en la programación funcional.

Programación funcional

Como habrá adivinado, la razón principal de las funciones de flecha es la programación funcional. Es un paradigma de estilo declarativo basado en la composición de funciones simples.



La programación funcional es una alternativa a la programación orientada a objetos preferida por muchos desarrolladores (incluido el autor del artículo). Puedes defender cualquier estilo, pero creo que la programación funcional es genial y debería hacerte sentir incómodo pensar que alguna vez pensaste de manera diferente.



Las funciones puras se basan solo en la entrada y siempre devuelven algún valor. Nunca cambian (mutan) otras variables y no dependen de datos externos fuera de los valores de entrada. Esto conduce a la transparencia referencial, lo que facilita la programación.



Y sí, siempre es posible escribir una gran cantidad de código sin cambiar una sola variable.



Como habrá notado, las funciones de flecha están diseñadas para transformar datos entre entradas y salidas. Ni siquiera necesitan devolver una expresión taquigráfica sin llaves.

Funciones de flecha - conclusión

Las funciones de flecha acortan su sintaxis, reduciendo el tiempo para escribir, leer y probar su código, y simplificarlo. Piense en ello, porque lo más probable es que sea un desarrollador avanzado, y aplicar estos consejos lo hará más avanzado y aumentará su relevancia. La programación funcional es realmente genial. Te convierte en un artista que hace elegantes funciones cortas de código.

Ejemplo funcional real

Para comprender lo que se esconde en la madriguera del conejo, echemos un vistazo a un ejemplo del uso de la biblioteca de código abierto @ 7urtle / lambda

import {trim, upperCaseOf, lengthOf, lastLetterOf, includes, compose} from '@7urtle/lambda';

const endsWithPunctuation = input =>
  includes(lastLetterOf(input))('.?,!');

const replacePunctuationWithExclamation = input =>
  substr(lengthOf(input) - 1)(0)(input) + '!';

const addExclamationMark = input =>
  endsWithPunctuation(input)
    ? replacePunctuationWithExclamation(input)
    : input + '!';

const shout = compose(addExclamationMark, upperCaseOf, trim);

shout(" Don't forget to feed the turtle.");
// =>    !

Usar funciones de flecha y aprender programación funcional es muy adictivo. Esto le permite escribir código más corto con mejor rendimiento y reutilización.



JavaScript puede ser complicado por su inconsistencia entre el uso de sintaxis similar a C y características de programación funcional. Para ayudar a las personas a comprender mejor y proporcionar acceso a los materiales de aprendizaje, desarrollé la biblioteca @ 7urtle / lambda. Puede dominar la programación funcional a su propio ritmo y www.7urtle.com le ayudará a aprender este paradigma proporcionándole todas las herramientas que necesita.