Las Arrow Function / Función Flecha son una implementación que vino a mejorar la forma en como escribimos nuestra sintaxis de funciones. Es una sintaxis más expresiva, más sintética y más sencilla para alguien que comienza o no sepa de programación.
Es una nueva forma de definir funciones anónimas expresadas.
La sintaxis es
const saludo = () => {};
Cuando una función flecha no recibe parámetros, obligatoriamente que poner los paréntesis, si sólo recibe un parámetro no es necesario incluir dichos paréntesis.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arrow Function - Función Flecha</title>
</head>
<body>
<h1>Arrow Function - Función Flecha</h1>
<script>
// EJM DE FUNCIÓN ANÓNIMA EXPRESADA
const saludo = function () {
console.log("Hola Mundo");
};
saludo();
// EJM CON ARROW FUNCTION
const saludo2 = () => console.log("Hola");
saludo2();
const saludo3 = (nombre) => console.log(`Hola ${nombre}`);
saludo3("Francisco");
const saludo4 = (nombre, edad) =>
console.log(`Hola ${nombre} y tengo ${edad} años`);
saludo3("Francisco");
// OTRO EJM FUNCIÓN EXPRESADA NORMAL
const sumar = function (num1, num2) {
return num1 + num2;
};
// ARROW FUNCTION - NO ES NECESARIO UTILIZAR return
const sumar2 = (a, b) => a + b;
console.log(sumar2(3, 4));
console.log(sumar2(3, 10));
</script>
</body>
</html>
Veamos el uso de funciones flecha con arrays.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arrow Function con Arrays</title>
</head>
<body>
<h1>Arrow Function con Arrays</h1>
<script>
const numeros = [1, 2, 3, 4, "Hola"];
numeros.forEach((e, index) => {
console.log(`El elemento "${e}" está en la posición ${index}`);
});
</script>
</body>
</html>
Una característica que tienen las Arrow Function es que capturan el objeto this del contexto en el que se encuentren.
Nota: No utilizar Arrow Function en objetos. No se considera buena práctica hacerlo.