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.
Nota: recomiendo leer la explicación de let, var y const en JS
Normalmente declaramos nuestras funciones así:
function saludar(nombre){ alert("Hola " + nombre) } // Y para llamar: saludar("Luis"); // O de esta forma let saludar = function(nombre){ alert("Hola " + nombre) } // Y para llamar: saludar("Luis")
Pero con el operador de flecha gorda no necesitamos “function” así como se ve:
let saludar = nombre => { alert("Hola ", nombre) } // Y para llamar: saludar("Luis");
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í:
let saludar = (nombre) => { alert("Hola ", nombre) } // Y para llamar: saludar("Luis");
Y si tuviera más argumentos así:
let saludar = (nombre, edad) => { console.log("Hola %s tienes %d años", nombre, edad) } // Y para llamar: saludar("Luis", 30);
Normalmente, para regresar un valor en JavaScript usamos return. Veamos esto:
function sumar(primerNumero, segundoNumero){ return primerNumero + segundoNumero; } // Y para llamar: let suma = sumar(28, 11);
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:
let sumar = (primerNumero, segundoNumero) => primerNumero + segundoNumero;
Como vemos, omitimos las llaves y la palabra return, y regresamos la suma. También podría quedar así:
let sumar = (primerNumero, segundoNumero) => { return primerNumero + segundoNumero; }
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:
// () significa que no hay argumentos let obtenerMascota = () => { return { nombre: "Maggie", } }
Y si queremos regresar el objeto sin “return” haríamos esto:
let obtenerMascota = () => { nombre: "Maggie" }
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:
let obtenerMascota = () => ({ nombre: "Maggie", })
Así ya podemos regresar el objeto, encerrándolo en paréntesis.
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:
[1, 2, 3].forEach(function(numero){ console.log(numero); });
Y todo bien. Pero con las funciones flecha en JavaScript hacemos esto:
[1, 2, 3].forEach(numero => { console.log(numero) });
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:
[2, 3, 5].map(function(numero){ //O numero ** 2 // O Math.pow(numero, 2) return numero * numero; });
Pero con las funciones flecha se podría simplificar a esto:
[2, 3, 5].map(numero => numero * numero);
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.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.
Ver comentarios