15 - Funciones de flecha
¿Qué es una función de flecha?
Es otro tipo de función anónima con las mismas características que la anterior. La principal diferencia es la estructura de la misma.
Estructura inicial
En nuestra carpeta de proyecto crearemos la siguiente estructura:
/
├── js/
│ └── 15-funciones-de-flecha.js
└── index.htmlY un código sencillo para nuestro HTML:
<!DOCTYPE html>
<html lang="es">
<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">
<script src="./js/15-funciones-de-flecha.js"></script>
<title>15 - Funciones de flecha</title>
</head>
<body>
<h1>Temario de JavaScript</h1>
</body>
</html>Estructura de una función flecha
Lo más normal es asignar una función flecha a una variable o usarla como callback (respuesta a un evento)
/* Asignar a variable */
let variable = () => {
// Código de la función
}
variable()
/* Función callback */
elemento.addEventListener("tipoevento", () => {
// Código de la función
})Nota: En lugar de declarar la función en el callback, podemos llamar a una ya existente
Las {} pueden omitirse si el código de la función es una única línea
Ejemplos de funciones flecha
let holaMundo = () => console.log("Hola mundo")
holaMundo() //Hola mundo
let suma = (num1, num2) => {
return num1 + num2
}
console.log(suma(2, 3)) //5
window.addEventListener("click", () => {
alert("¡Has hecho clic en la pantalla!")
})