Funciones en JavaScript 2

[smartads]

Continuando con el tema de las funciones en JavaScript, proponemos mas maneras de escribir funciones de este lenguaje. Los dividimos de una manera para poder entender mejor, a manera de masterclass, los otros diversos métodos de declarar estas funciones.

Estos métodos son los siguientes:

Funciones anónimas

Las funciones anónimas o llamadas también funciones lambda son un tipo de funciones que se declaran sin nombre de función y se alojan en el interior de una variable, o pasarse como argumento de otra función.

Las funciones anónimas son útiles cuando se necesita una definición rápida de una función y no hay intensión de reutilizarla en otra parte del código.

//Función anónima “saludo”
const saludo = function () {
  return “Hola”;
};
saludo; // ƒ () { return ‘Hola’;}
saludo(); // ‘Hola’

Callbacks

Con el conocimiento de las funciones anónimas, podremos comprender mas fácilmente como utilizar como callbacks, también llamadas funciones callback o retro llamadas. A grandes rasgos, un callback (llamadas hacia atras) es pasar una función B por parámetro a una función A, de modo que la función A puede ejecutar esa función B de forma genérica desde su código y nosotros podemos definirlas desde fuera de dicha función:

// fB = Función B
const fB = function () {
  console.log(“Función B ejecutada.”)
};
// fA = Función A
const fA = function (callbacks) {
  callbacks();
};
fA(fB);

Esto nos podría permitir crear varias funciones para utilizar a modo de Callbacks y reutilizarlas posteriormente con diferentes propósitos. De hecho, los Callbacks muchas veces son la primera estrategia que se suele utilizar para trabajar asincronía en JavaScript.

Funciones autoejecutables

Pueden existir casos en los que necesites crear una función y ejecutarla sobre la marcha. En Javascript es muy sencillo crear funciones autoejecutables. Básicamente, sólo tenemos que envolver entre paréntesis la función anónima en cuestión (no necesitamos que tenga nombre, puesto que no la vamos a guardar) y luego, ejecutarla:

 // Función autoejecutable
(function () {
  console.log(“Hola!!”)
})();
// Función autoejecutable con parámetros
(function (name) {
  console.log(`Hola, ${name} !`);
})(“Nombre”);

De hecho, también podemos utilizar parámetros en dichas funciones autoejecutables. Observa que sólo hay que pasar dichos parámetros al final de la función autoejecutable.

Arrow functions

Las Arrow functions, funciones flecha o «fat arrow» son una forma corta de escribir funciones que aparece en JavaScript a partir de ECMAScript 6. Básicamente, se trata de reemplazar eliminar la palabra function y añadir => antes de abrir las llaves:

const func = function () {
  return “Función tradicional”;
};
const func = () => {
  return “Función flecha.”;
};

Ventajas de las arrow functions

• Si el cuerpo de la función sólo tiene una línea, podemos omitir las llaves ({}).
• Además, en ese caso, automáticamente se hace un return de esa única línea, por lo que podemos omitir también el return.
• En el caso de que la función no tenga parámetros, se indica como en el ejemplo anterior: () =>.
• En el caso de que la función tenga un solo parámetro, se puede indicar simplemente el nombre del mismo: e =>.
• En el caso de que la función tenga 2 ó más parámetros, se indican entre paréntesis: (a, b) =>.
• Si queremos devolver un objeto, que coincide con la sintaxis de las llaves, se puede englobar con paréntesis: ({name: ‘Nombre’}).

Simplificación

const func = () => “Función flecha.“; // 0 parametros: devuelve “función flecha” 
const func = (e) => e + 1;  // 1 parámetro: Devuelve el valor de e + 1
const func = (a , b) => a + b;  // 2 parámetros: Devuelve el valor de a + b

Fuentes

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions

https://lenguajejs.com/javascript/introduccion/funciones

https://codigoencasa.com/funciones-anonimas-y-de-flecha-en-javascript