Saltar al contenido principal

Funciones Modernas en JavaScript

Las funciones son bloques de código reutilizables diseñados para realizar una tarea particular. Se ejecutan cuando algo las "invoca" (las llama).

En JavaScript moderno, existen dos formas principales de declarar funciones: Funciones Tradicionales y Funciones Flecha (Arrow Functions).

Funciones Tradicionales​

Se declaran utilizando la palabra clave function, seguida de un nombre, paréntesis () que pueden contener parámetros, y llaves {} que encierran el código a ejecutar.

// Declaración
function saludar(nombre, apellido) {
    return `¡Hola, ${nombre} ${apellido}!`;
}

// Invocación (llamada)
const mensaje = saludar("Juan", "Pérez");
console.log(mensaje); // "¡Hola, Juan Pérez!"

Funciones Anónimas​

En JS, las funciones son "ciudadanos de primera clase", lo que significa que pueden ser tratadas como cualquier otra variable. Puedes asignar una función sin nombre (anónima) a una variable const.

const sumar = function(a, b) {
    return a + b;
};

console.log(sumar(5, 10)); // 15

Funciones Flecha (Arrow Functions)​

Introducidas en ES6, las "Arrow Functions" proporcionan una sintaxis mucho más corta y concisa para escribir funciones, y también cambian la forma en que el contexto this se comporta (un tema avanzado vital en frameworks como React).

Sintaxis básica: (parametro1, parametro2) => { código }

// Función Flecha equivalente a 'sumar' de arriba
const sumarFlecha = (a, b) => {
    return a + b;
};

El superpoder de la concisión (Retorno implícito)​

Si tu función flecha solo consta de una única línea de código que devuelve un valor, puedes omitir las llaves {} y la palabra return. El retorno se vuelve implícito.

Además, si la función recibe exactamente un parámetro, puedes omitir los paréntesis ().

// 1. Sintaxis original
const multiplicarPorDos = (numero) => {
    return numero * 2;
};

// 2. Omitiendo paréntesis (1 solo parámetro)
const multiplicarPorDos = numero => {
    return numero * 2;
};

// 3. Retorno IMPLÍCITO (Solo 1 línea de código)
const multiplicarPorDos = numero => numero * 2;

console.log(multiplicarPorDos(5)); // 10

Esta sintaxis ultracorta (la número 3) es la que verás en el 90% del código JavaScript moderno cuando se usan métodos de arreglos (como .map o .filter).