La especificación ECMAScript 2015 introduce una nueva forma de crear funciones en JavaScript, las funciones de flecha (también conocidas como funciones arrow functions) que son una forma abreviada de definir funciones.
Sintaxis
La sintaxis para definir una función de flecha es la siguiente:
(param1, param2, ...) => { cuerpo de la función } Donde:
(param1, param2, …) son los parámetros de la función.
{cuerpo de la función} es el código que se ejecutará cuando se llama a la función.
Ventajas
- Son más cortas y fáciles de leer que las funciones tradicionales.
- No tienen this implicito, lo que puede ser útil para evitar errores comunes.
- Pueden ser utilizadas como métodos dentro de objetos o como callbacks.
Desventajas
- No pueden ser utilizadas como constructors (construcciones) para crear objetos.
- No pueden ser utilizadas como métodos para objetos primarios (como String, Number, etc.).
Veamos algunos ejemplos del uso de las funciones de flecha.
const sumar = (a, b) => a + b;
console.log(sumar(2, 3)); // Output: 5 En este ejemplo, se define una función que suma dos números y la asignamos a una variable llamada sumar. Luego, llamamos a la función con los argumentos 2 y 3 y el resultado es 5.
Una función con un sólo parámetro
const doblar = x => x * 2;
console.log(doblar(4)); // Resultado: 8 En este ejemplo, estamos definiendo una función que dobla un número y la estamos asignando a una variable llamada doblar. Luego, llamamos a la función con el argumento 4 y el resultado es 8.
Algo importante, es que si solamente tenemos un argumento, se pueden omitir los paréntesis, tal y como vemos en este ejemplo.
Una función con varios parámetros
const calcularArea = (largo, ancho) => largo * ancho;
console.log(calcularArea(4, 5)); // Resultado: 20 En este ejemplo, estamos definiendo una función que calcula el área de un rectángulo y la estamos asignando a una variable llamada calcularArea. Luego, llamamos a la función con los argumentos 4 y 5 y el resultado es 20.
En este caso, al agregar varios parámetros, es necesario encerrarlos dentro de paréntesis.
Una función sin parámetros
Si no hay parámetros, los paréntesis estarán vacíos:
const saludar = () => {
console.log('Hola!');
};
saludar(); // Resultado: "Hola!"Nota: Si la función no tiene argumentos, pero se define con paréntesis vacíos () => { … }, se considera una función con un sólo parámetro vacío, que no es lo mismo que no tener argumentos.
Funciones de flecha multilíneas
Las funciones de flecha pueden contener múltiples líneas de código:
const sumar = (a, b) => {
const resultado = a + b;
return resultado;
};
console.log(sumar(2, 3)); // Resultado: 5En este ejemplo, la función sumar es una función de flecha multilinea que calcula la suma de dos números y devuelve el resultado. La función se define con un paréntesis para indicar que es una función, y luego se utiliza una indentación para definir el bloque de código que se ejecutará.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024
