ES6: funciones flecha: arrow functions

Posted by in Javascript y TypeScript

Seguimos profundizando en ES6, y tras la primera entrega sobre trucos, hoy está dedicado por completo a las funciones flecha, arrow functions. El concepto de detrás de estas funciones es reducir la sintaxis, son anónimas, no están vinculadas con «this», y siempre tienen algo que devolver.

Están definidas por una fecha:

() => { }

La sintaxis más sencilla es:


let test = () => 'test';
let test2 = item => item;
let test3 = (item, item2) => item + item2;

que equivale a:

let test = function() { return 'test'; }
let test2 = function(item) { return item} ;
let test3 = function(item, item2) { return item + item2; }

Cómo puede comprobar, es más reducido en síntaxis, y varia si incluye argumentos o no. Por lo general, se da por supuesto que devuelve un valor, y por eso, no hace falta especificar return, aunque es posible escribirlo.

Otro detalle es que las funciones flecha no podrán ser utilizadas como constructores, pues darán error: let test4 = new test2();

Cuando se utilizan

Sobre todo, cuando se necesitan funciones sencillas que SIEMPRE devuelven algo. Es muy habitual cuando se trabajan con matrices, o listas, porque se aplica la misma función a todos los elementos.

Es muy útil cuando a partir de una lista, por ejemplo, quieres componer una lista de objetos, que contengan los datos de la lista.


const names = ["A", "B", "C"]

names.map((item, i) => ({"nombre": item, "pos": (i+1) }) );

arrow function

arrow function

A veces, no es lo que se necesita

Generalmente, cuando estas trabajando con algún objeto, puede no ser necesario que se usen, siendo necesario utilizar function explícitamente. Es decir, si necesitas hacer uso de this, tendrás que explicitarlo.también, cuando necesitas vincular con un método del objeto, o bien necesitas incluir métodos a prototype.

También cuando una función se asocia con algún evento concreto y es necesario hacer uso del objeto que produce la llamada.

Por último, cuando necesitas algo del objeto argumento, no podrás utilizar las funciones flechas.

Tampoco podrás usarla si necesitas utilizar yield.

Valores por defecto en funciones

Otras de las novedades de las últimas versiones de Javascript es la posibilidad de incluir valores por defecto. Esto siempre ha estado en Python, pero ahora ya es una realidad de ES6, de forma que en caso de no recibir valor, se incluye uno por defecto. Los parámetros que incluyen valores por defecto irán al final de la función, y siempre se respeta el orden.

Esto del «orden» es importante, porque en Python, sí es posible asignar independiente del orden, pero no es el caso de Javascript, donde hay que respetar el orden de los parámetros.

Javascript, copiando de Python

Sin duda, los cambios en la sintaxis que están incluyendo en las versiones más actuales de Javascript hacen que muchas cosas se parezcan a Python, y así, las funciones anónimas eran una característica de Python desde sus primeras versiones.  Por otro lado, intercambiar el valor de variables ahora es más sencillo en Javascript, sin utilizar variable intermedia: [uno, dos] = [dos, uno]

La asignación de valores con condicionales es otra característica que me gusta mucho, y reduce complejidad y favorece la lectura, si bien, esto no es nada nuevo.

Los decoradores es otra característica de Python que ya está disponible en Javascript, si bien, no es una de las características que domine, en ninguno de los dos lenguajes.

Happy coding!