Funciones en JavaScript

¿Qué es una función?

Una función agrupa un conjunto de instrucciones bajo un nombre para poder reutilizarlas cuantas veces necesites. En JavaScript hay varias formas de definirlas.

// Declaración de función (function declaration)
function saludar(nombre) {
    return `Hola, ${nombre}!`;
}

// Llamar a la función
const msg = saludar("Ana");
document.getElementById("resultado").innerHTML = msg; // "Hola, Ana!"

Parámetros y valores por defecto

// Parámetros simples
function sumar(a, b) {
    return a + b;
}
sumar(3, 5);   // 8
sumar(10);     // NaN — b es undefined

// Valores por defecto (ES6+)
function saludar(nombre = "visitante", saludo = "Hola") {
    return `${saludo}, ${nombre}!`;
}
saludar("Ana");          // "Hola, Ana!"
saludar("Juan", "Hey"); // "Hey, Juan!"
saludar();               // "Hola, visitante!"

// Parámetro rest — captura múltiples argumentos como array
function sumarTodos(...numeros) {
    let total = 0;
    for (const n of numeros) total += n;
    return total;
}
sumarTodos(1, 2, 3, 4, 5);  // 15

Arrow functions — funciones flecha

Las arrow functions son una sintaxis más compacta introducida en ES6. Son ideales para funciones cortas y callbacks.

// Función tradicional
function cuadrado(n) {
    return n * n;
}

// Arrow function equivalente
const cuadrado = (n) => {
    return n * n;
};

// Forma corta — si el cuerpo es una sola expresión, se omiten {} y return
const cuadrado = n => n * n;

// Más ejemplos
const saludar  = nombre => `Hola, ${nombre}!`;
const sumar    = (a, b) => a + b;
const constante = () => 42;        // sin parámetros

// Uso en métodos de array — la forma más común
const numeros  = [1, 2, 3, 4, 5];
const dobles   = numeros.map(n => n * 2);      // [2, 4, 6, 8, 10]
const pares    = numeros.filter(n => n % 2 === 0); // [2, 4]
const suma     = numeros.reduce((acc, n) => acc + n, 0); // 15

Expresiones de función y funciones anónimas

// Expresión de función — asignada a una variable
const multiplicar = function(a, b) {
    return a * b;
};
multiplicar(3, 4);  // 12

// Función anónima como callback — pasada directamente
const numeros = [3, 1, 4, 1, 5, 9];
numeros.sort(function(a, b) { return a - b; });
// equivalente con arrow:
numeros.sort((a, b) => a - b);

Scope — ámbito de las variables

Las variables declaradas dentro de una función solo existen dentro de ella. Las declaradas fuera son accesibles desde adentro.

const global = "soy global";

function miFuncion() {
    const local = "soy local";
    console.log(global);  // ✓ accesible
    console.log(local);   // ✓ accesible
}

miFuncion();
console.log(global);  // ✓ accesible
// console.log(local); // ✗ ReferenceError — no existe fuera

// Funciones dentro de funciones — closures
function crearContador() {
    let count = 0;              // esta variable "vive" en el closure
    return function() {
        count++;
        return count;
    };
}

const contador = crearContador();
contador();  // 1
contador();  // 2
contador();  // 3 — recuerda el valor entre llamadas

Funciones de orden superior

En JavaScript las funciones son ciudadanos de primera clase: se pueden pasar como argumentos, retornar desde otras funciones y asignar a variables.

// Pasar una función como argumento (callback)
function aplicar(array, transformacion) {
    const resultado = [];
    for (const item of array) {
        resultado.push(transformacion(item));
    }
    return resultado;
}

const nums    = [1, 2, 3, 4, 5];
const dobles  = aplicar(nums, n => n * 2);       // [2, 4, 6, 8, 10]
const cuadrados = aplicar(nums, n => n * n);      // [1, 4, 9, 16, 25]
const textos  = aplicar(nums, n => `item-${n}`); // ["item-1", ...]

// Retornar una función desde otra función
function crearMultiplicador(factor) {
    return n => n * factor;   // devuelve una arrow function
}

const doble  = crearMultiplicador(2);
const triple = crearMultiplicador(3);

doble(5);   // 10
triple(5);  // 15

Comparación de sintaxis

Buenas Prácticas

• Una función, una responsabilidad: si hace demasiadas cosas, dividila
• Nombres descriptivos: calcularTotal() en vez de fn()
• Parámetros por defecto: para valores opcionales, evita verificar undefined adentro
• Arrow functions para callbacks: más concisas y no generan su propio this
• Funciones puras: siempre que puedas, que la función solo dependa de sus argumentos y no modifique nada externo
• Máximo 3-4 parámetros: si necesitás más, pasalos como un objeto