Funciones flecha: Arrow functions

Una de las novedades de ES6 (ECMA Script 2015) son las funciones flecha que puede llegar a desestabilizar a los programadores tradicionales en JavaScript. Si eres de los que ha utilizado o conoces un poco de coffeeScript, ya estás del otro lado. La estructura de las funciones flecha puede llegar a ser un tanto cómoda, menos redundante que las funciones habituales y, que tienen como idea, solucionar esos dolores de cabeza que suceden cuando existen malos entendidos con los valores this 💆

Pero antes de comenzar, explicaré un poquito de teoría para ir entendiendo mejor esta novedad 🙂

Una expresión de función flecha es una alternativa compacta a una tradicional, pero es limitada y no se puede utilizar en todas las situaciones.

Entonces, ¿Qué nos permite la funcionalidad de la función flecha? A continuación analizaremos la estructura.

( parametro1, parametro2 ) => { expresión; }

Tenemos un ejemplo que inicia siendo una función tradicional, se convertirá en una función flecha e irá simplificándose.

function (suma){
  return suma + 50;
}

Como se muestra a continuación, los { } corchetes, ( ) paréntesis y el «return» son opcionales, pero pueden ser obligatorios.

suma => suma + 50

Esto puede cambiar, siempre y cuando se tomen en cuenta los siguientes puntos:

Si tienes varios argumentos o ningún argumento, deberás volver a introducir paréntesis alrededor de los argumentos.

(suma, numero) => suma + numero

let a = 10;
let b = 20;

() => a + b

Del mismo modo, si el cuerpo requiere líneas de procesamiento adicionales, deberás volver a introducir los corchetes y el «return».

(suma, numero) => {
     let extra = 3;
     return suma + numero + extra;
}

Algo muy importante en las funciones con nombre, es que se tratan como si fueran variables.

let saludo = (nombre, apPaterno, apMaterno) => {
     let nombreCompleto = nombre + apPaterno + apMaterno;
     return "Hola " + nombreCompleto;
}

Ya que conocemos cómo trabajan estas funciones, aquí debajo les dejaré algunas limitaciones y diferencias con las tradicionales.

• No tiene sus propios enlaces a this o super y no se debe usar como métodos.
• No tiene argumentos o palabras clave new.target.
• No apta para los métodos call, apply y bind, que generalmente se basan en establecer un ámbito o alcance
• No se puede utilizar como constructor.
• No se puede utilizar yield dentro de su cuerpo

---

Genial. Si te ha gustado este post, no olvides dejar tu «me encanta».

Nos vemos pronto con un nuevo tema.

Saludos a la distancia y abrazos virtuales 😉

• DevOps
• Funciones flecha: Arrow functions
• Diseño Atómico: Diseño por componentes