Introducción a las funciones de flecha ES6 en JavaScript

Introducción

Con ES6, se realizaron muchas actualizaciones de JavaScript, incluido el operador de propagación, la desestructuración de objetos, nuevos tipos de variables y más. Uno de los cambios más notables fueron las funciones de flecha, una forma nueva y concisa de escribir funciones. Con las funciones de flecha, puede definir una función legible y concisa en una línea. En este artículo, repasaremos los conceptos básicos de las funciones de flecha y analizaremos sus beneficios.

Funciones en ES5

Comencemos por ver cómo definimos funciones con JavaScript ES5. Para definir una función, se necesitaba la palabra clave function. Por ejemplo, si quisiéramos definir una función que multiplicara un número por dos, se vería así.

function multiplyByTwo(num){    return num * 2;}

También podríamos definir la función y asignarla a una variable si quisiéramos.

const multiplyByTwo = function(num){    return num * 2;}

Independientemente de cómo lo hicieras, la función de palabras clave debía incluirse.

Su primera función de flecha de ES6

Para crear una función de flecha, no necesitas la palabra clave function. De hecho, básicamente eliminas esa palabra clave y agregas una flecha justo después de los parámetros pero antes de la llave de apertura. Se vería así:

const multiplyByTwo = (num) = {    return num * 2;}

En este punto, no parece sustancialmente diferente a la antigua forma de hacerlo, pero podemos hacer algunas mejoras.

Cómo eliminar paréntesis innecesarios

Los paréntesis que rodean los parámetros son necesarios si no hay parámetros o si hay más de uno. Sin embargo, cuando la función de flecha solo tiene un parámetro, puede omitir los paréntesis para simplificarla, de la siguiente manera:

const multiplyByTwo = num = {    return num * 2;}

Retorno implícito

Muchas veces, escribimos funciones que retornan después de solo una línea de código. Con la antigua forma de escribir funciones, la cantidad de líneas en la función no afectaba la forma en que se definía la función. Con las funciones de flecha, sí puede afectar.

Si lo único que desea hacer en una función es un retorno de una línea, puede utilizar el retorno implícito para simplificar su función. Al utilizar el retorno implícito, no necesita las llaves ni la palabra clave return. Se vería así:

const multiplyByTwo = num = num * 2;

Aún puedes usar la sintaxis de retorno implícita incluso si no necesitas devolver nada necesariamente. En otras palabras, si quienes llaman a tu función no esperan que devuelva nada, entonces no importa que devuelva algo.

Por ejemplo, si quisieras imprimir algo en la consola, podrías usar el retorno implícito para acortar la longitud de la función:

const printName = (first, last) = console.log(`${first} ${last}`);

Uso de funciones de flecha en el mapa y el filtro

Uno de los lugares más comunes en los que verá el uso de funciones de flecha es con los métodos de matriz de JavaScript como map, reduce, filter, etc. Al usar funciones de flecha con estos métodos, puede realizar transformaciones de matriz completas en una línea.

Veamos dos ejemplos, uno con mapa y otro con filtro. Para la versión con mapa, supongamos que queremos convertir una matriz multiplicando cada número por dos. Se vería así:

const twodArray = [1,2,3,4].map( num = num * 2);

Observe que con esta función de flecha, omitió el paréntesis (porque solo hay un parámetro) y utilizó el retorno implícito. Esto mantuvo toda la transformación en una sola línea.

Ahora, hagamos otra operación con filtro. Digamos que queremos filtrar todos los números que no sean pares. Tendríamos esto:

const filteredArray = [1,2,3,4].filter( num = num % 2 == 0);

Nuevamente sin paréntesis y retorno implícito.

Enlace 'this' con funciones de flecha

Comencemos con un ejemplo que utiliza una definición de función ES5 dentro de un objeto persona:

const person = {    first: "James",    last: "Quick",    getName: function() {        this.first + " " + this.last    }}

En este caso, creamos un objeto de persona con un nombre y apellido, así como una función getName() que devuelve el nombre completo de la persona. Dentro de la función, intentamos hacer referencia a las propiedades first y last llamando this.firsta and this.last.

La razón por la que podemos acceder a esas propiedades a través de la palabra clave this es que cuando esas funciones se definen dentro de un objeto, se vinculan automáticamente al objeto en sí. Por lo tanto, con las funciones ES5, aún podemos hacer referencia a las propiedades del objeto mediante this.

Sin embargo, cuando se utilizan funciones de flecha, las cosas cambian un poco. Las funciones de flecha no realizan ningún tipo de vinculación con la palabra clave this. Por lo tanto, si cambiáramos la definición de la función para que sea una función de flecha, las cosas no funcionarían.

const person = {    first: "James",    last: "Quick",    getName: () = {        return this.first + " " + this.last    }}

En este caso, undefinedse imprimiría tanto para la primera como para la última propiedad, ya que la palabra clave thisno está vinculada al objeto persona y no tiene una primera y última variable a la que hacer referencia.

Conclusión

Las funciones de flecha son una de las muchas características nuevas de JavaScript ES6. Las verás cada vez más utilizadas en ejemplos y documentación, por lo que vale la pena aprender cómo funcionan. También pueden mejorar significativamente la concisión y legibilidad de tu código.