Introducción

Las funciones flecha (en donde se usa el operador flecha gorda =>) hacen que nuestro código sea más corto, y más entendible. Sin embargo, si somos principiantes tal vez no sepamos qué son o qué hacen las funciones arrow de JavaScript. Por eso hoy veremos una explicación de las funciones flecha en JavaScript.

Explicación de funciones flecha en JavaScript

Nota: recomiendo leer la explicación de let, var y const en JS

Definición de una función

Normalmente declaramos nuestras funciones así:

Pero con el operador de flecha gorda no necesitamos “function” así como se ve:

Aquí el primer punto de confusión es justo en donde dice…

saludar = nombre =>

Pero tranquilo, que sólo es la lista de argumentos que recibe la función. Y en este caso como sólo es uno podemos omitir los paréntesis. Podría igualmente quedar así:

Y si tuviera más argumentos así:

Valores de retorno

Normalmente, para regresar un valor en JavaScript usamos return. Veamos esto:

Ahí simplemente regresamos la suma de ambos números, ese es el único cuerpo de la función. No hay otros cálculos.

Cuando en las funciones flecha gorda sólo tenemos el return, sin cuerpo, podemos omitir las llaves:

Como vemos, omitimos las llaves y la palabra return, y regresamos la suma. También podría quedar así:

Aquí un bonus. Si vamos a regresar un objeto ({}) sus llaves podrían confundirse con las llaves de la función, pero podemos regresarlo si lo encerramos dentro de paréntesis.

Consideremos esto, en donde regresamos un objeto:

Y si queremos regresar el objeto sin “return” haríamos esto:

Pero estamos en un grave error porque las llaves de la función se confunden con las llaves del objeto. Si queremos hacerlo mejor hacemos esto:

Así ya podemos regresar el objeto, encerrándolo en paréntesis.

Como callbacks

Finalmente veamos cómo usar las funciones flechas en callbacks.

Comencemos con el uso de forEach en un arreglo. Normalmente para iterarlo con dicha función hacemos esto:

Y todo bien. Pero con las funciones flecha en JavaScript hacemos esto:

Por otro lado, veamos a map. Si quisiéramos cambiar un arreglo de números por los cuadrados de esos números (por ejemplo, si fuera [2, 3, 5] se cambiaría a [4, 9, 25]) haríamos esto:

Pero con las funciones flecha se podría simplificar a esto:

Conclusión

Como vemos, estas funciones hacen que nuestro código sea más simple y claro, además de corto. Debemos practicar y así podremos llevarnos bien con esta nueva sintaxis.

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

7 Comments

Script para cambiar todas las imágenes de una página web - Parzibyte's blog · septiembre 10, 2018 a las 10:59 am

[…] tiene la función forEach que nos permite iterar por cada imagen. Utilizamos la sintaxis  de las funciones de flecha gorda para simplificar el […]

JavaScript: saber si es número narcisista - Parzibyte's blog · octubre 2, 2018 a las 11:35 pm

[…] Funciones flecha en JavaScript […]

Cómo ordenar arreglos en JavaScript usando sort - Parzibyte's blog · octubre 28, 2018 a las 11:19 pm

[…] recomiendo leer sobre las funciones flecha, son una forma corta de escribir funciones anónimas; las mismas que usaremos para ordenar en los […]

Explicación de watch en Vue JS 2 - Parzibyte's blog · noviembre 5, 2018 a las 7:03 pm

[…] No te confundas por la función, estamos usando sintaxis de funciones flecha. […]

Buscar índice o posición de elemento en arreglo de JavaScript - Parzibyte's blog · diciembre 4, 2018 a las 11:25 am

[…] importante es la parte en donde llamamos a findIndex. Utilizamos una función flecha para regresar un booleano, este booleano le indica a findIndex que hemos encontrado el […]

Factorial de un número en JavaScript con recursividad y ciclos - Parzibyte's blog · diciembre 28, 2018 a las 9:22 pm

[…] usaremos const y funciones flecha en JavaScript, por favor lee los artículos en caso de que no sepas qué son. De esta manera […]

Convertir minutos a texto legible en JavaScript - Parzibyte's blog · enero 3, 2019 a las 12:22 am

[…] cierto, si no entiendes la sintaxis, mira lo que son las arrow functions, plantillas de cadena y let y […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: