JavaScript ofrece varias formas de definir y utilizar funciones. Dos tipos de funciones de uso común son las funciones anónimas y las funciones de flecha.

En este blog, aprenderemos sobre estas dos funciones en detalle.

¡Empecemos!

Funciones anónimas


Una función anónima es una función que no tiene ningún nombre. Estas funciones suelen definirse inline y pueden asignarse a una variable o pasarse como argumento a otra función.

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

Sintaxis de las funciones anónimas

// Anonymous function assigned to a variable
var myFunction = function() {
  console.log("This is an example of an anonymous function.");
};

// Invoking the anonymous function
myFunction();

En este ejemplo, myFunction` es una función anónima asignada a una variable y puede invocar esta función utilizando el nombre de la variable.

Casos de uso de funciones anónimas


Funciones de devolución de llamada

// Using an anonymous function as a callback
setTimeout(function() {
  console.log("This is invoked after 2 seconds");
}, 2000);

En el ejemplo anterior, se da una función anónima como argumento a otra función.

Manejadores de eventos

// Anonymous function as an event handler
document.querySelector("Button").addEventListener("click", function() {
  console.log("Button clicked!");
});

Cuando desee adjuntar un manejador de eventos de forma dinámica, puede utilizar la función anónima.

Expresiones de función de invocación inmediata (IIFE)

// IIFE using an anonymous function
(function() {
  console.log("This is an example of IIFE.");
})();

Si desea crear una función y ejecutarla inmediatamente después de la declaración, entonces puede utilizar la función anónima como en el ejemplo anterior.

Métodos de matriz

// Using anonymous function with array map method
const numbers = [1, 2, 3]
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6]

Puedes utilizar las funciones anónimas con métodos de array como map, filter y reduce.

Ventajas de las funciones anónimas


Las funciones anónimas son a menudo más concisas en escenarios donde:

  • Una función es simple y no será reutilizada.
  • Cuando las funciones anónimas se utilizan en patrones IIFE, reducen el riesgo de conflictos de variables en el ámbito global.

Limitaciones de las funciones anónimas

  • Las funciones anónimas pueden disminuir la legibilidad del código.
  • Con funciones anónimas, la depuración puede ser más difícil, ya que carecen de nombres significativos.
  • Las funciones anónimas tienen su propia vinculación, lo que puede conducir a un comportamiento inesperado en ciertos contextos.

Arrow Functions


Las Arrow Functions, introducidas en ECMAScript 6 (ES6), proporcionan una sintaxis más concisa para escribir funciones. Son especialmente útiles para funciones cortas y de una sola línea.

Sintaxis de las Arrow Functions (funciones en flecha)

 // Basic arrow function
const add = (a, b) => {
  return a + b;
};

Si tiene una única expresión en el cuerpo de la función, puede omitir las llaves {} y la palabra clave return como se muestra en el siguiente ejemplo.

const add = (a, b) => a + b;

Si tienes un único parámetro en la función, puedes omitir los paréntesis alrededor del parámetro como se muestra en el siguiente ejemplo

const square = x => x * x;

Para las funciones en las que no hay parámetros, es necesario incluir paréntesis vacíos, como se muestra en el siguiente ejemplo.

const randomNumber = () => Math.random();

Este léxico this  Arrow Functions


Una de las características más significativas de las funciones en flecha es que no tienen su propio enlace this. En su lugar, heredan this de su ámbito padre.

Este comportamiento puede ser especialmente útil cuando se trabaja con manejadores de eventos o retrollamadas dentro de métodos.

const obj = {
  name: "John",
  greet: () => {
    console.log(`Hello, ${this.name}`); // Lexical 'this' refers to the global scope, not obj
  }
};

obj.greet(); // Output: Hello, undefined

En el ejemplo anterior, la función de flecha greet no tiene su propio enlace this, por lo que utiliza el valor this de su ámbito padre, que es el ámbito global. Como name no está definido globalmente, su salida es indefinida.

Casos de Uso de las Arrow Functions


Manipulación de matrices

const numbers = [1, 2, 3, 4, 5];
// Using regular function
const squared = numbers.map(function (num) {
  return num * num;
});
// Using arrow function
const squaredArrow = numbers.map(num => num * num);

Callback Functions

const numbers = [1, 2, 3, 4, 5, 6];
//Using regular function
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
//Using arrow function
const evenNumbersArrow = numbers.filter(num => num % 2 === 0);

Asynchronous Operations

const fetchFromAPI = () => {
  return new Promise((resolve, reject) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};
fetchFromAPI().then(data => console.log(data));

Ventajas de las Arrow Functions

  • Las Arrow Functions  tienen una sintaxis más concisa, especialmente para funciones cortas de una sola línea.
  • Las Arrow Functions  no tienen su propio enlace this. En su lugar, heredan this de su ámbito padre.
  • Las Arrow Functions a menudo dan como resultado un código más limpio y legible, especialmente cuando se usan con métodos de array como map, filter y reduce.

Limitaciones de las Arrow Functions

  • Las Arrow Functions no tienen su propio objeto de argumentos.
  • La sintaxis concisa de las Arrow Functions puede llevar a nombres de función menos descriptivos, lo que a veces puede afectar a la legibilidad del código.
  • Las Arrow Functions no pueden ser usadas como constructores, intentar usar new con una función flecha resultará en un error.

Esto es todo por hoy.

Espero que haya sido útil.

Gracias por leer =) .

Fuente