Te cuento cuándo es importante tener un código compacto y en qué le ganan las funciones de flecha a las tradicionales. Y además, te explico por qué no siempre puedes reemplazar una por la otra.

Si ya te cansaste de escribir la larguísima palabra function cada vez que creas una función y quieres que tu código de JavaScript se vea más moderno y compacto, ¡entonces las funciones flecha javascript son para ti!

¡Hola! Soy Leo Byte, autor y fundador de codigonautas.com. En este artículo, te voy a contar cómo las funciones de flecha javascript te ayudan a escribir menos código, a que se vea más limpio y a usarlas sin que nada pierda sentido.

Comparativa de sintaxis entre función tradicional y funciones flecha JavaScript
Observa la diferencia de sintaxis entre la función tradicional vs. función flecha en JavaScript. ¡Las funciones flecha permiten un código mucho más conciso!

Funciones Tradicionales: Function Declaration y Expression

Bien, una función se puede declarar usando la palabra clave function, un nombre, parámetros (si los necesitas) y un cuerpo donde puedes ejecutar acciones y devolver un valor. Para que lo veas claro, vamos a escribir una función que calcula la edad a partir del año de nacimiento.

function getAge(year) {
    const currentYear = new Date().getFullYear(); // Año actual
    return currentYear - year;
}

console.log('Edad:', getAge(1997));
Captura de la consola de Chrome mostrando el resultado de una Function Declaration en JavaScript para calcular la edad.
Así se ve el resultado de ejecutar una Function Declaration en la consola de Chrome.

Esta forma de declarar una función se llama Function Declaration.

Function Declaration es una forma de declarar una función en la que se crea como una instrucción independiente, comenzando con la palabra clave function, y recibe un nombre de inmediato.

¿Cuándo es útil usarla?

  • Cuando necesitas declarar una función “como un comando” en tu código.
  • Cuando es importante que la función esté visible en todo el archivo (incluso antes de su declaración).
  • Para las funciones “principales” de tu programa, las que usas una y otra vez.

También puedes escribir una función como una expresión y guardarla en una variable. En realidad, lo que se guarda en la variable es una referencia a la función. Este es un concepto clave que explicaré en detalle en próximos artículos. Por ahora, solo quédate con que puedes asignar una función a una variable (o constante) y llamarla a través de su nombre:

const getAge = function(year) {
    const currentYear = new Date().getFullYear();
    return currentYear - year;
};

console.log('Edad:', getAge(1997));

El resultado en la consola es el mismo, pero hemos usado una sintaxis diferente. A esto se le llama Function Expression.

Function Expression es una expresión funcional en la que la función se crea dentro de otra expresión (normalmente una asignación) y puede ser anónima (sin nombre), pero no se “eleva” (hoisting) al inicio del código como ocurre con Function Declaration.

¿Cuándo es útil usarla?

  • Cuando necesitas pasar una función como un valor, por ejemplo, como el manejador de un evento onclick o como argumento de otra función.
  • Cuando la función es parte de la lógica dentro de otro bloque de código.
  • Cuando es importante controlar dónde es visible la función (su ámbito o scope).

Fíjate que en los ejemplos uso const en lugar de let. Las constantes se diferencian de las variables comunes en que no puedes reasignarles un valor. En JavaScript, es muy común guardar las funciones en constantes para no sobreescribirlas por accidente. Por eso, de ahora en adelante, también usaré const para que te vayas acostumbrando.

Esto es todo lo que ya deberías saber sobre las funciones. Son prácticas, concisas, ayudan a estructurar el código y lo hacen auto-documentado gracias a sus nombres descriptivos. Pero, ¿hay más formas de escribir funciones?

¿Qué Son las Funciones Flecha en JavaScript?

Una función flecha en JavaScript es una sintaxis moderna y compacta para escribir funciones, usando => en lugar de la palabra function. Su principal ventaja es que permite crear código más corto y legible, especialmente para funciones anónimas o callbacks, aunque tiene diferencias clave en el manejo del contexto this.

Usar arrow functions JavaScript ayuda a reducir el código y hacerlo visualmente más compacto. ¡Vamos a reescribir nuestra función en formato de flecha!

// const getAge = function(year) {
//     const currentYear = new Date().getFullYear();
//     return currentYear - year;
// };

const getAge = (year) => {
    const currentYear = new Date().getFullYear();
    return currentYear - year;
};
console.log('Edad:', getAge(1997));

He quitado la palabra clave function y la he reemplazado por una flecha => después de los paréntesis con los parámetros. ¡De ahí su nombre! El código es más corto y fácil de leer. A esta sintaxis se le llama Arrow Function Expression.

Arrow Function Expression es una expresión funcional en la que la función se escribe usando la sintaxis =>.

Un pequeño spoiler: la función se puede acortar todavía más. Pero antes, es importante que conozcas algunas particularidades de las funciones flecha:

  • No tienen su propio this, por lo que se comportan de manera diferente dentro de objetos.
  • No tienen su propio objeto arguments; en su lugar, se usa la sintaxis rest (...args).
  • No se pueden usar como constructores con la palabra clave new.

Hablaré de estas características en detalle más adelante. Por ahora, solo recuerda que es mejor usar una arrow function en JavaScript para operaciones cortas y en situaciones donde la brevedad del código es más importante que trabajar con el contexto (this).

¡Genial, ya entendimos el concepto! Pasemos a las diferentes formas de escribirlas. Te prometo que será aún más corto.

Sintaxis de las Arrow Functions: Cómo Abreviar tu Código

Las funciones flecha son famosas por lo concisas que son. Veamos cómo podemos acortar nuestra función para calcular la edad sin que pierda su funcionalidad.

Opción 1: Sin paréntesis con un solo parámetro

const getAge = year => {
    const currentYear = new Date().getFullYear();
    return currentYear - year;
};

console.log('Edad:', getAge(1997));

Aquí hemos quitado los paréntesis alrededor del parámetro year. Esto solo puedes hacerlo si hay un único parámetro. Si tienes dos o más, los paréntesis son obligatorios: (a, b) => { … }.

Opción 2: Retorno implícito (implicit return)

const getAge = year => new Date().getFullYear() - year;
console.log('Edad:', getAge(2001));

Como hemos quitado las llaves, el resultado de la expresión se devuelve automáticamente (un return implícito). Esta es la forma más corta y se usa muchísimo en cálculos sencillos.

Otro caso importante es cuando una función flecha devuelve un objeto. A diferencia del cuerpo normal de una función, el objeto debe ir envuelto en paréntesis, porque si no, JavaScript pensará que las llaves {} son el bloque de código de la función:

const getUser = (name, age) => ({
    name: name,
    age: age
});

console.log(getUser('Andrés', 27));

En general, estas son las formas más populares de escribir funciones flecha. Se usan con especial frecuencia como callbacks (argumentos) en otras funciones.

Caso Práctico: Refactorizando Código con Funciones Flecha

En esta parte del artículo, te tocará analizar con atención un código ya hecho. ¡Es súper útil, sobre todo si estás empezando! Leer y entender el código de otros es una habilidad fundamental para cualquier programador.

Claro que algunas cosas aquí se podrían hacer de otra manera, por ejemplo, usando métodos de arreglos integrados y técnicas más “inteligentes” para crear elementos. Pero lo importante es que en este ejemplo solo uso las estructuras que ya hemos visto.

Ejemplo de mini-aplicación sin funciones flecha:

// Array para guardar los productos
const products = [];

// Creamos una lista <ul> para mostrar los productos
const listEl = document.createElement('ul');

// Creamos un botón "Añadir"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Añadir';

// Manejador del clic para el botón "Añadir"
addButtonEl.onclick = function () {
 const productName = prompt('Introduce el nombre del producto');
 const productPrice = Number(prompt('Introduce el costo del producto'));

 // Verificación de los valores introducidos
 if (!productName || !productPrice) {
   alert('Introduce un valor correcto');
   return;
 }

 // Añadimos el producto al array
 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// Elemento para mostrar el precio total
const totalPriceEl = document.createElement('div');

// Función que crea un <li> para cada producto
function getItemEl(index, item) {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${item.name}, costo: ${item.price} usd.`;

 // Botón "Eliminar" para el producto
 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Eliminar';

 deleteButtonEl.onclick = function () {
   products.splice(index, 1); // eliminamos el producto
   renderList(); // actualizamos la lista
 };

 itemEl.append(deleteButtonEl);
 return itemEl;
}

// Función que dibuja la lista y calcula el costo total
function renderList() {
 let totalPrice = 0;
 listEl.innerHTML = '';

 for (let i = 0; i < products.length; i++) {
   listEl.append(getItemEl(i, products[i]));
   totalPrice += products[i].price;
 }

 totalPriceEl.textContent = `Costo total de la compra: ${totalPrice} usd.`;
}

// Añadimos los elementos a la página
document.body.append(listEl, totalPriceEl, addButtonEl);
Interfaz de una mini aplicación para calcular compras con JavaScript, mostrando una lista de productos y el costo total.
Este es el resultado visual de una mini aplicación para calcular compras hecha con JavaScript. Se puede ver la lista de productos y la suma total del costo.

Sí, el programa es un poco largo y puede parecer intimidante, pero dejé comentarios a propósito para ayudarte a entenderlo.

Ejemplo de mini-aplicación con funciones flecha:

const products = [];

// <ul> para la lista de productos
const listEl = document.createElement('ul');

// Botón "Añadir"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Añadir';

// Manejador del clic - ¡una función flecha!
addButtonEl.onclick = () => {
 const productName = prompt('Introduce el nombre del producto');
 const productPrice = Number(prompt('Introduce el costo del producto'));

 // Verificación de los valores introducidos
 if (!productName || !productPrice) {
   alert('Introduce un valor correcto');
   return;
 }

 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// <div> para el costo total
const totalPriceEl = document.createElement('div');

// Función flecha que crea un <li> para un producto
const getItemEl = (index, item) => {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${item.name}, costo: ${item.price} usd.`;

 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Eliminar';

 deleteButtonEl.onclick = () => {
   products.splice(index, 1);
   renderList();
 };

 itemEl.append(deleteButtonEl);
 return itemEl;
};

// Dibuja la lista y calcula el costo (¡también con una función flecha!)
const renderList = () => {
 let totalPrice = 0;
 listEl.textContent = '';

 for (let i = 0; i < products.length; i++) {
   listEl.append(getItemEl(i, products[i]));
   totalPrice += products[i].price;
 }

 totalPriceEl.textContent = `Costo total de la compra: ${totalPrice} usd.`;
};

document.body.append(listEl, totalPriceEl, addButtonEl);

Admítelo, se ve mucho más corto y limpio, ¿verdad? Ahora, como práctica, intenta mejorar el programa y añadir la opción de introducir la cantidad de cada producto.

Cuándo Usar Funciones Flecha (y Cuándo Evitarlas)

Las funciones flecha Javascript hacen que el código sea más corto y conciso. Esto es especialmente útil cuando necesitas escribir una función sencilla.

Usa las funciones flecha cuando la brevedad sea importante. Pero no olvides que tienen particularidades con el comportamiento de this, de las que hablaremos en los próximos artículos. Para una referencia técnica más profunda, siempre puedes consultar la documentación oficial de MDN sobre funciones flecha.

Categorizado en:

Javascript,