Funciones en JavaScript: Tu primer código reutilizable

¿Te has dado cuenta de que estás escribiendo el mismo código una y otra vez? ¿Tienes miedo de las funciones porque parecen complicadas? Te entiendo perfectamente.

Las funciones son como recetas de cocina para tu código. Una vez que las aprendes, nunca más tendrás que repetir el mismo código. Y lo mejor: son mucho más simples de lo que piensas.

📦 ¿Qué son las funciones realmente?

Imagina que tienes una caja mágica. Le das ingredientes (datos), ella hace algo con esos ingredientes, y te devuelve el resultado. Eso es una función.

Antes de las funciones, tu código se veía así:

// ❌ Código repetitivo y largo
let precio1 = 100;
let impuesto1 = precio1 * 0.21;
let total1 = precio1 + impuesto1;

let precio2 = 50;
let impuesto2 = precio2 * 0.21;
let total2 = precio2 + impuesto2;

let precio3 = 200;
let impuesto3 = precio3 * 0.21;
let total3 = precio3 + impuesto3;

Con funciones, se convierte en esto:

// ✅ Código limpio y reutilizable
function calcularTotal(precio) {
    let impuesto = precio * 0.21;
    return precio + impuesto;
}

let total1 = calcularTotal(100);
let total2 = calcularTotal(50);
let total3 = calcularTotal(200);

🎯 Tu primera función paso a paso

Vamos a crear tu primera función. No te preocupes, es más fácil de lo que piensas:

📝 Paso 1: La sintaxis básica

function nombreDeLaFuncion() {
    // Tu código aquí
}

Desglosemos cada parte:

• function: Le dice a JavaScript "oye, voy a crear una función"
• nombreDeLaFuncion: El nombre que le das (como llamar a tu perro)
• (): Paréntesis donde van los parámetros (ya veremos esto)
• {}: Las llaves donde va el código que hace la función

📝 Ejemplo práctico: Tu primera función

function saludar() {
    console.log("¡Hola! Soy tu primera función");
}

// Para usar la función, la "llamas" así:
saludar(); // Salida: ¡Hola! Soy tu primera función

📥 Parámetros: Dale datos a tu función

Las funciones son más útiles cuando pueden recibir información. Imagina una función "saludar" que puede saludar a diferentes personas:

// ❌ Sin parámetros: siempre hace lo mismo
function saludarJuan() {
    console.log("¡Hola Juan!");
}

// ✅ Con parámetros: flexible y reutilizable
function saludar(nombre) {
    console.log("¡Hola " + nombre + "!");
}

// Ahora puedes usarla con cualquier nombre:
saludar("Juan");    // ¡Hola Juan!
saludar("María");   // ¡Hola María!
saludar("Carlos");  // ¡Hola Carlos!

📝 Múltiples parámetros

Las funciones pueden recibir varios datos separados por comas:

function presentar(nombre, edad, ciudad) {
    console.log("Hola, soy " + nombre + ", tengo " + edad + " años y vivo en " + ciudad);
}

presentar("Ana", 25, "Madrid");
// Salida: Hola, soy Ana, tengo 25 años y vivo en Madrid

📤 Return: Que tu función devuelva algo útil

Hasta ahora nuestras funciones solo mostraban mensajes. Pero las funciones más útiles devuelven valores que puedes usar en tu código:

// ❌ Sin return: solo muestra, no puedes usar el resultado
function sumarMal(a, b) {
    console.log(a + b);
}

// ✅ Con return: devuelve el resultado para que puedas usarlo
function sumar(a, b) {
    return a + b;
}

// Ahora puedes guardar el resultado y usarlo:
let resultado = sumar(5, 3);
console.log(resultado); // 8

// O usar el resultado directamente en operaciones:
let total = sumar(10, 20) * 2; // (10+20) * 2 = 60

📝 Ejemplo práctico con return

function calcularIVA(precio) {
    let iva = precio * 0.21;
    return iva;
}

function precioFinal(precio) {
    let iva = calcularIVA(precio); // Usa otra función!
    return precio + iva;
}

let precio = 100;
let total = precioFinal(precio);
console.log("Precio final: €" + total); // Precio final: €121

🎭 Funciones anónimas: Funciones sin nombre

A veces necesitas una función, pero no quieres darle nombre porque solo la vas a usar una vez. Para eso existen las funciones anónimas:

// Función normal con nombre
function saludar() {
    console.log("¡Hola!");
}

// Función anónima guardada en una variable
let saludar = function() {
    console.log("¡Hola desde función anónima!");
};

// Se usa igual:
saludar();

🏹 Arrow functions: La sintaxis moderna

Las arrow functions (funciones flecha) son una forma más corta y moderna de escribir funciones. Son especialmente populares y las verás por todas partes:

📝 Comparativa: función normal vs arrow function

// Función normal
function sumar(a, b) {
    return a + b;
}

// Arrow function (la misma función, pero más corta)
let sumar = (a, b) => {
    return a + b;
};

// Arrow function súper corta (si solo tienes un return)
let sumar = (a, b) => a + b;

📝 Casos prácticos de arrow functions

// Sin parámetros
let saludar = () => console.log("¡Hola!");

// Un solo parámetro (puedes omitir los paréntesis)
let duplicar = numero => numero * 2;

// Múltiples parámetros
let multiplicar = (a, b) => a * b;

// Con más de una línea de código
let procesarPedido = (producto, cantidad) => {
    let subtotal = producto.precio * cantidad;
    let iva = subtotal * 0.21;
    return subtotal + iva;
};

🛠️ Proyecto práctico: Calculadora con funciones

Vamos a crear una calculadora completa usando todo lo que hemos aprendido. Esta será tu primera aplicación real con funciones:

// Operaciones básicas con arrow functions
const sumar = (a, b) => a + b;
const restar = (a, b) => a - b;
const multiplicar = (a, b) => a * b;
const dividir = (a, b) => {
    if (b === 0) {
        return "Error: No se puede dividir por cero";
    }
    return a / b;
};

// Función principal de la calculadora
function calculadora(operacion, num1, num2) {
    switch (operacion) {
        case 'suma':
            return sumar(num1, num2);
        case 'resta':
            return restar(num1, num2);
        case 'multiplicacion':
            return multiplicar(num1, num2);
        case 'division':
            return dividir(num1, num2);
        default:
            return "Operación no válida";
    }
}

// Función para mostrar resultados bonitos
const mostrarResultado = (operacion, num1, num2, resultado) => {
    console.log(`${num1} ${operacion} ${num2} = ${resultado}`);
};

// ¡Probemos nuestra calculadora!
let resultado1 = calculadora('suma', 10, 5);
mostrarResultado('+', 10, 5, resultado1); // 10 + 5 = 15

let resultado2 = calculadora('division', 20, 4);
mostrarResultado('/', 20, 4, resultado2); // 20 / 4 = 5

let resultado3 = calculadora('division', 10, 0);
console.log(resultado3); // Error: No se puede dividir por cero

✅ Errores comunes con funciones

❌ Error 1: Llamar la función sin paréntesis

function saludar() {
    return "¡Hola!";
}

console.log(saludar);    // ❌ Muestra la función, no la ejecuta
console.log(saludar()); // ✅ Ejecuta y muestra "¡Hola!"

❌ Error 2: Usar variables que no existen en la función

let nombre = "Juan";

function saludar() {
    return "¡Hola " + nombre + "!"; // ✅ Funciona, pero no es buena práctica
}

// ✅ Mejor: pasar el nombre como parámetro
function saludarMejor(nombre) {
    return "¡Hola " + nombre + "!";
}

❌ Error 3: Olvidar el return

function sumar(a, b) {
    a + b; // ❌ Sin return, devuelve undefined
}

function sumarBien(a, b) {
    return a + b; // ✅ Devuelve el resultado
}

🎯 ¿Qué sigue después?

¡Felicidades! Ya dominas las funciones en JavaScript. Esto es ENORME porque las funciones son la base de todo en programación moderna.