La versión ES6 del ECMAScript agregó muchos recursos interesantes a JavaScript. Pero, un recurso que definitivamente se destacó fueron las arrow functions. Básicamente, son una nueva forma de crear funciones con JavaScript, con una estructura más corta, pero muy poderosa al mismo tiempo.
Sintaxis básica
Una función convencional puede ser creada con este código:
function() {}
Ya la sintaxis básica de una arrow function es la siguiente:
() => {}
Nota que no escribimos “function”. Además, usamos el símbolo “=>” para crearla, lo que recuerda a una flecha, haciendo justicia al nombre “Arrow Functions”.
Cuando vemos esta estructura, notamos que es una forma más elegante y “bonita” de crear funciones. Pero las arrow functions son mucho más que solo eso. Tienen muchos recursos poderosos, de los que hablaremos ahora.
Recursos de las Arrow Functions
Un punto interesante de las arrow functions es la cuestión del return de estas funciones. Si nuestra función tiene solo un comando return, no necesitamos indicarlo, sino solo el valor que queremos retornar. Imagina que deseamos crear una función que retorne un mensaje de bienvenida para una persona, teniendo en cuenta el nombre que vamos a indicar como parámetro. Esta función podría ser creada con el siguiente código:
const sayHello = function(name) {
return `¡Bienvenido ${name}!!!`;
}
Esta función funcionaría bien, pero usamos tres líneas de código para retornar un mensaje. Sin embargo, podemos obtener el mismo resultado con la siguiente arrow function:
const sayHello = name => `¡Bienvenido ${name}!!!`;
Si ejecutamos sayHello('Mark'), veremos lo siguiente:
Excelente, la función funcionó (perdón por el pleonasmo ?). Mucho más simple, ¿no crees? Pudimos refactorizar una función que ocupaba tres líneas, resumiéndola en solo una línea, lo cual es genial.
Nota que el parámetro name fue definido sin paréntesis. Esto ocurre porque es un parámetro único en la función. Sin embargo, si tuviera más de un parámetro, estaríamos obligados a poner los paréntesis. Podemos ver esto en un segundo ejemplo.
Imagina que queremos crear una función que realizará cualquier cálculo por nosotros. Esperará tres parámetros: los dos números para llevar a cabo el cálculo y la operación de la cuenta. Podríamos definir esta función con este código:
const calc = (num1, num2, operator) => "Resultado: " + eval(`${num1} ${operator} ${num2}`);
Si ejecutamos calc(4, 5, '*'), veremos el siguiente resultado:
El código funcionó correctamente. Pero, nota que fue necesario informar los parámetros con paréntesis para que esto fuera posible.
Otro recurso de ECMAScript 6 que podemos usar con las arrow functions es la desestructuración (Destructuring). Podemos usar esta sintaxis para definir, por ejemplo, valores predeterminados para los parámetros de una función. Imagina ahora que deseamos informar solo la operación para la función calc(), y esta deberá realizar un cálculo con números ya definidos. Esto sería posible con este código:
const calc = (operator, [num1, num2] = [2, 3]) => "Resultado: " + eval(`${num1} ${operator} ${num2}`);
Así, si no informamos ningún valor para la función, los números 2 y 3 serán usados para efectuar la cuenta. Esto significa que podemos ejecutar el siguiente código:
calc('+')
Al ejecutarlo, no veremos un error, sino el siguiente resultado:
La operación se ejecutó correctamente con base en los valores predeterminados. El tema de Destructuring es muy interesante. ¿Les gustaría que escribiéramos un artículo sobre ello? Puedes enviar tus sugerencias para nosotros haciendo clic aquí.
Estos son algunos recursos que podemos utilizar con las arrow functions. Sin embargo, hay otro recurso que podemos usar bastante a nuestro favor: la falta de cambio de ámbito.
Arrow Functions y ámbito de variables
El lenguaje JavaScript tiene lo que llamamos ámbito de variables. Podemos decir que este concepto es, en pocas palabras, la manera en que las variables son identificadas o “vistas” en nuestro código. Las variables que son creadas en la “raíz” de nuestro código están en el ámbito global.
Sin embargo, cuando creamos una función, se crea un nuevo ámbito. Así, las variables creadas dentro de ella son “vistas”, o identificadas, solo allí. Además, podemos referirnos a esta nueva función con la palabra reservada this.
Y es en este punto donde las arrow functions se destacan. No crean un nuevo ámbito. Esto significa que no tienen un this. Quizás al principio pensemos: “Pero, ¡qué cosa más extraña!” Sin embargo, es interesante ver esta peculiaridad de las arrow functions como un recurso, que puede ayudarnos en algunas situaciones.
Mira un ejemplo: vamos a crear una clase que tendrá un atributo llamado list, que contendrá un array vacío. Luego, crearemos un método que tendrá el objetivo de agregar nuevos valores a este array. La estructura de la clase será la siguiente:
class Hcode {
constructor(){
this.list = [];
this.pushArray();
}
pushArray(){
let newList = [1, 2, 3];
newList.forEach(function(value) {
this.list.push(value);
});
console.log(this.list);
}
}
Observa que usamos una función convencional en el forEach() que está dentro del método pushArray(). Al instanciar la clase Hcode, vemos el siguiente resultado:
El error informa un problema con el atributo list. Esto ocurre porque esta función que está dentro del bucle de repetición creó un nuevo ámbito, que no pudo encontrar dentro de su this una propiedad llamada list. Realmente no existe en este ámbito. Cuando escribimos this.list, queremos referirnos al atributo list de nuestra clase, que está en otro ámbito, o contexto. En esta situación, las arrow functions pueden ayudarnos. Vamos a reemplazar ese forEach() por este código:
newList.forEach(value => {
this.list.push(value);
});
Al instanciar la clase Hcode, vemos lo siguiente:
¡Los ítems fueron agregados al array sin errores! Ahora el código funcionó porque el this se refería al ámbito global.
Este ejemplo también nos ayuda a responder una pregunta muy común: “¿Cuándo debo usar arrow functions?” Como vimos en este artículo, las arrow functions son muy poderosas, además de representar un código más elegante y conciso. Si es necesario crear alguna función que necesite hacer referencia a su propio ámbito dentro de sí, no se recomienda el uso de arrow functions. Sin embargo, si no es ese el caso, podrás usarlas en gran parte de tus proyectos tranquilamente, lo que hará que tu código sea aún más moderno y poderoso.
Recordando que hablamos sobre las Arrow Functions y muchos otros recursos de JavaScript en nuestro Curso Completo de JavaScript, donde desarrollamos 7 proyectos reales increíbles usando este lenguaje sensacional, siempre con el método Hcode de enseñanza.
Nos vemos en el próximo artículo :)