Introducción a las funciones

¿Qué es una Función y Por Qué la Necesitas?

Imagina que estás escribiendo un programa y necesitas realizar la misma operación múltiples veces: calcular el área de un círculo, mostrar un mensaje de bienvenida, o validar una dirección de correo electrónico. Sin funciones, tendrías que copiar y pegar el mismo código una y otra vez, lo cual genera problemas enormes:

• Tu código se vuelve extremadamente largo y difícil de leer
• Si encuentras un error, tendrás que corregirlo en múltiples lugares
• Mantener el código se convierte en una pesadilla

Las funciones resuelven todos estos problemas. Una función es un bloque de código agrupado bajo un nombre que puedes invocar (llamar) cada vez que la necesites. Es como tener un asistente personal que hace exactamente lo que le pides, cada vez que se lo solicitas, sin necesidad de repetir instrucciones.

Declaración de Funciones en JavaScript

JavaScript ofrece varias formas de crear funciones. Comenzaremos con la más tradicional y fácil de entender: la declaración de función (function declaration).

// Sintaxis básica de una declaración de función
function nombreDeLaFuncion(parametro1, parametro2) {
    // Código que ejecuta la función
    return resultado;
}

// Ejemplo práctico: función para saludar
function saludar(nombre) {
    return "¡Hola, " + nombre + "! Bienvenido";
}

// Llamando a la función
let mensaje = saludar("María");
console.log(mensaje); // Output: "¡Hola, María! Bienvenido"

// Podemos llamarla múltiples veces
console.log(saludar("Carlos")); // Output: "¡Hola, Carlos! Bienvenido"
console.log(saludar("Ana")); // Output: "¡Hola, Ana! Bienvenido"

Parámetros y Argumentos

Los parámetros son las variables que una función espera recibir cuando se define. Los argumentos son los valores reales que se pasan cuando se llama a la función. Es una distinción importante que muchos principiantes confunden.

// 'nombre' y 'edad' son PARÁMETROS (variables en la definición)
function presentarPersona(nombre, edad) {
    console.log("Me llamo " + nombre + " y tengo " + edad + " años");
}

// "Luis" y 28 son ARGUMENTOS (valores reales en la llamada)
presentarPersona("Luis", 28);
presentarPersona("Sofía", 25);
presentarPersona("Miguel", 35);

// Parámetros con valores por defecto
function crearUsuario(nombre, rol = "usuario") {
    return {
        nombre: nombre,
        rol: rol,
        fechaCreacion: new Date()
    };
}

let usuario1 = crearUsuario("Pedro");
let usuario2 = crearUsuario("Laura", "administrador");

console.log(usuario1); // { nombre: "Pedro", rol: "usuario", ... }
console.log(usuario2); // { nombre: "Laura", rol: "administrador", ... }

La Sentencia return

La palabra clave return indica el valor que la función devuelve al código que la llamó. Una función puede devolver cualquier tipo de dato: números, cadenas, booleanos, objetos, e incluso otras funciones.

// Función que retorna un número
function sumar(a, b) {
    return a + b;
}

let resultado = sumar(5, 3);
console.log(resultado); // 8

// Función que retorna un objeto
function crearRectangulo(ancho, alto) {
    return {
        ancho: ancho,
        alto: alto,
        area: ancho * alto,
        perimetro: 2 * (ancho + alto)
    };
}

let rectangulo = crearRectangulo(10, 5);
console.log("Área:", rectangulo.area); // 50
console.log("Perímetro:", rectangulo.perimetro); // 30

Funciones sin return

No todas las funciones necesitan devolver un valor. Algunas funciones realizan efectos secundarios como modificar el DOM, mostrar alertas, o guardar datos. Estas funciones "retornan" implícitamente undefined.

// Función que muestra un mensaje (efecto secundario)
function mostrarBienvenida(nombre) {
    console.log("═══════════════════════════════");
    console.log("   ¡Bienvenido/a, " + nombre + "!");
    console.log("═══════════════════════════════");
}

mostrarBienvenida("Roberto");
// Output:
// ═══════════════════════════════
//    ¡Bienvenido/a, Roberto!
// ═══════════════════════════════

let valor = mostrarBienvenida("Ana");
console.log(valor); // undefined

Expresiones de Función

Además de las declaraciones, puedes crear funciones como expresiones, asignándolas a variables. Esto es especialmente útil para funciones anónimas y callbacks.

// Expresión de función
const multiplicar = function(a, b) {
    return a * b;
};

console.log(multiplicar(4, 5)); // 20

// Las expresiones de función no son "hoisted" como las declaraciones
// Esto funcionaría:
console.log(doble(10)); // 20
function doble(x) {
    return x * 2;
}

// Esto NO funcionaría:
// console.log(triple(10)); // Error: triple is not defined
const triple = function(x) {
    return x * 3;
};

Arrow Functions (Funciones Flecha)

Las arrow functions son una sintaxis más concisa introducida en ES6. Se llaman así por el símbolo =>. Son especialmente populares para funciones cortas y callbacks.

// Sintaxis tradicional
function sumar(a, b) {
    return a + b;
}

// Arrow function equivalente
const sumarArrow = (a, b) => {
    return a + b;
};

// Versión aún más corta (sin llaves, return implícito)
const sumarCorta = (a, b) => a + b;

console.log(sumar(2, 3));       // 5
console.log(sumarArrow(2, 3));  // 5
console.log(sumarCorta(2, 3));  // 5

// Con un solo parámetro, puedes omitir los paréntesis
const cuadrado = x => x * x;
console.log(cuadrado(5)); // 25

// Sin parámetros
const generarId = () => Math.random().toString(36).substr(2, 9);
console.log(generarId()); // String aleatorio como "x7zg3j2n9"

Ejemplo Práctico Completo

Vamos a crear un sistema simple de calculadora de precios con descuento para entender mejor cómo se combinan todos los conceptos.

1. Definir la función principal de cálculo: Creamos una función que aplique descuentos según el monto total.
2. Agregar validaciones: Verificamos que los datos de entrada sean válidos.
3. Retornar información detallada: La función devuelve un objeto con todos los detalles del cálculo.
4. Probar con diferentes casos: Verificamos que funcione correctamente.

// Sistema de cálculo de precios con descuento
function calcularPrecioFinal(precioOriginal, tipoCliente, tieneCupon) {
    // Validaciones
    if (typeof precioOriginal !== 'number' || precioOriginal < 0) {
        return { error: "Precio inválido" };
    }
    
    if (precioOriginal === 0) {
        return { 
            precioOriginal: 0, 
            descuentoTotal: 0, 
            precioFinal: 0,
            mensaje: "El producto es gratis"
        };
    }
    
    let descuentoPorcentaje = 0;
    
    // Descuento por tipo de cliente
    const descuentosCliente = {
        'premium': 20,
        'frecuente': 10,
        'nuevo': 5,
        'estándar': 0
    };
    
    descuentoPorcentaje += descuentosCliente[tipoCliente] || 0;
    
    // Descuento adicional por cupón
    if (tieneCupon) {
        descuentoPorcentaje += 15;
    }
    
    // Limitar descuento máximo al 40%
    descuentoPorcentaje = Math.min(descuentoPorcentaje, 40);
    
    // Cálculos finales
    const montoDescuento = precioOriginal * (descuentoPorcentaje / 100);
    const precioFinal = precioOriginal - montoDescuento;
    
    return {
        precioOriginal: precioOriginal,
        tipoCliente: tipoCliente,
        descuentoAplicado: descuentoPorcentaje + '%',
        montoDescuento: montoDescuento.toFixed(2),
        precioFinal: precioFinal.toFixed(2),
        ahorro: `Has ahorrado $${montoDescuento.toFixed(2)}`
    };
}

// Probando el sistema
console.log("═══ Caso 1: Cliente premium con cupón ═══");
console.log(calcularPrecioFinal(100, 'premium', true));
// { precioFinal: "60.00", descuentoAplicado: "35%" ... }

console.log("\n═══ Caso 2: Cliente nuevo sin cupón ═══");
console.log(calcularPrecioFinal(250, 'nuevo', false));
// { precioFinal: "237.50", descuentoAplicado: "5%" ... }

console.log("\n═══ Caso 3: Precio inválido ═══");
console.log(calcularPrecioFinal(-50, 'estándar', false));
// { error: "Precio inválido" }

Scope (Ámbito) de las Variables

Entender el scope es crucial al trabajar con funciones. Las variables declaradas dentro de una función no son accesibles desde fuera, pero la función sí puede acceder a variables del ámbito exterior.

const mensajeGlobal = "Soy global";

function demostrarScope() {
    const mensajeLocal = "Soy local a la función";
    console.log(mensajeGlobal); // ✓ Accesible
    console.log(mensajeLocal);  // ✓ Accesible
    
    if (true) {
        const mensajeBloque = "Soy de bloque";
        console.log(mensajeBloque); // ✓ Accesible
    }
    
    // console.log(mensajeBloque); // ✗ Error: no definido
}

demostrarScope();
// console.log(mensajeLocal); // ✗ Error: no definido fuera de la función

Funciones como Valores de Primera Clase

En JavaScript, las funciones son ciudadanos de primera clase. Esto significa que puedes:

• Asignar funciones a variables
• Pasar funciones como argumentos a otras funciones
• Retornar funciones desde otras funciones
• Almacenar funciones en arrays u objetos

// Asignar función a variable
const duplicar = function(x) { return x * 2; };

// Función que recibe otra función como argumento
function aplicarOperacion(array, operacion) {
    return array.map(operacion);
}

const numeros = [1, 2, 3, 4, 5];
console.log(aplicarOperacion(numeros, duplicar)); // [2, 4, 6, 8, 10]
console.log(aplicarOperacion(numeros, x => x * 3)); // [3, 6, 9, 12, 15]

// Función que retorna otra función
function crearSaludo(formato) {
    return function(nombre) {
        return formato + ", " + nombre + "!";
    };
}

const saludoFormal = crearSaludo("Buenas tardes");
const saludoCasual = crearSaludo("Hey");

console.log(saludoFormal("Señor García")); // "Buenas tardes, Señor García!"
console.log(saludoCasual("María")); // "Hey, María!"

Las funciones son los bloques constructivos fundamentales de cualquier aplicación JavaScript. Dominar su uso te permitirá escribir código más limpio, más reutilizable y más fácil de mantener.

Resumen de Sintaxis

function calcular(a, b = 10) {
    return a * b;
}

console.log(calcular(5));
console.log(calcular(5, 2));

Conclusión

Las funciones son herramientas poderosas que transforman tu forma de programar. Has aprendido a declararlas, usar parámetros y argumentos, retornar valores, y las diferencias entre declaraciones tradicionales, expresiones de función y arrow functions.

En la siguiente lección, profundizaremos en parámetros especiales como arguments y el operador spread, así como técnicas avanzadas como funciones recursivas y clousures. Estos conceptos te permitirán escribir código JavaScript aún más flexible y elegante.