Funciones en JavaScript: Tu primer código reutilizable

Llevas un rato escribiendo variables, condicionales y bucles, y ya te has dado cuenta de algo: hay bloques de código que copias y pegas una y otra vez, cambiando solo un par de números. Eso no es programar bien, es transcribir a mano lo mismo cincuenta veces.

Las funciones son la solución a eso. Piensa en una función como una máquina: le metes ingredientes por un lado (los datos), ella hace su trabajo por dentro, y te devuelve un resultado por el otro. Escribes esa lógica una sola vez y la reutilizas todas las que quieras.

¿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 (nombre distinto para no chocar con la de arriba)
let saludarAnonima = function() {
    console.log("¡Hola desde función anónima!");
};

// Se usa igual:
saludarAnonima();

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

Fíjate en algo: la función calculadora no hace ningún cálculo directamente, solo decide a qué función más pequeña llamar según la operación. Eso es dividir el problema en piezas pequeñas y reutilizables, que es exactamente para lo que sirven las funciones.

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?

Con esto ya puedes dejar de repetir código y empezar a organizarlo en piezas reutilizables. El siguiente paso natural es aprender a conectar esas funciones con la propia página: en cómo hacer tu primer botón que funcione ves cómo una función se dispara al hacer clic, que es donde las funciones dejan de vivir solo en la consola y empiezan a hacer cosas de verdad en pantalla.

Cuando quieras seguir, tienes objetos en JavaScript para agrupar datos y funciones relacionadas, y manipulación del DOM para que esas funciones cambien de verdad lo que ve el usuario.