Funciones en JavaScript: cómo crear las tuyas y dejar de repetir código

En el artículo anterior dejamos pendiente una promesa: aprender a organizar el código en piezas reutilizables en vez de repetir el mismo bloque una y otra vez. Eso es exactamente lo que resuelven las funciones, y son probablemente la herramienta que más vas a usar a partir de ahora, muy por encima de variables o condicionales sueltos.

Si ya sabes guardar datos en variables y hacer que tu código tome decisiones con if y else, este es el paso natural: empaquetar ese código en bloques con nombre que puedas llamar las veces que quieras.

Qué es una función y por qué la necesitas

Una función es un bloque de código con nombre que agrupa una serie de instrucciones para realizar una tarea concreta. La escribes una vez y la "llamas" (ejecutas) tantas veces como necesites, en vez de copiar y pegar el mismo código cada vez que lo necesitas.

Imagina que en varios puntos de tu programa necesitas calcular el precio de un producto con descuento. Sin funciones, repetirías la misma operación en cada sitio; si un día cambia la fórmula del descuento, tendrías que buscar y corregir cada copia. Con una función, escribes la lógica una vez y la reutilizas donde haga falta.

Tu primera función: declararla y llamarla

La forma más común de crear una función es con la palabra clave function:

function saludar(nombre) {
  console.log("Hola, " + nombre);
}

saludar("Ana");
// Hola, Ana

Esto tiene dos partes separadas que mucha gente confunde al empezar:

• Declarar la función (function saludar(nombre) { ... }) solo define qué hace, pero no ejecuta nada todavía.
• Llamarla (saludar("Ana")) es lo que realmente ejecuta ese código.

Si solo declaras la función y nunca la llamas, su código nunca se ejecuta. Es un error muy habitual al empezar: escribir la función, no ver ningún resultado, y no caer en que falta la línea que la invoca.

Parámetros y argumentos: la diferencia que confunde al principio

En el ejemplo anterior, nombre es un parámetro: una variable que la función espera recibir, declarada entre paréntesis. Cuando llamas a la función con un valor concreto, como "Ana", ese valor es el argumento.

function sumar(a, b) {   // a y b son los PARÁMETROS
  return a + b;
}

sumar(5, 3);              // 5 y 3 son los ARGUMENTOS

En la práctica, mucha gente usa ambas palabras indistintamente, y no pasa nada. Lo importante es la idea: el parámetro es el "hueco" que dejas al definir la función, y el argumento es lo que metes ahí cuando la usas. Una función puede tener tantos parámetros como necesite, separados por comas, o ninguno.

Return: cómo hacer que tu función devuelva un valor

Hasta ahora, saludar() solo mostraba un mensaje en la consola, pero no devolvía ningún valor que pudieras guardar o reutilizar. Para eso está return:

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

const resultado = sumar(2, 3);
console.log(resultado); // 5

return hace dos cosas a la vez: termina la ejecución de la función en ese punto y le entrega ese valor a quien la llamó. Todo lo que escribas después de un return dentro de la misma función nunca se ejecuta.

Una función sin return explícito devuelve undefined por defecto. Esto confunde bastante al principio, porque console.log() y return parecen hacer "lo mismo" (mostrar un valor), pero no lo son:

Instrucción	Qué hace	¿Puedes reutilizar el resultado?
console.log(valor)	Muestra el valor en la consola	No, solo lo imprime
return valor	Entrega el valor a quien llamó la función	Sí, puedes guardarlo en una variable

La regla práctica: si necesitas usar el resultado de una función más adelante (guardarlo, sumarlo, mostrarlo en pantalla de otra forma), esa función necesita un return.

Valores por defecto en los parámetros

Si llamas a una función sin pasarle todos los argumentos que espera, los que falten valen undefined. Puedes evitarlo dándoles un valor por defecto directamente en la declaración:

function calcularTotal(precio, descuento = 0) {
  return precio - descuento;
}

console.log(calcularTotal(100));      // 100 (descuento toma el valor 0)
console.log(calcularTotal(100, 20));  // 80

Es una forma sencilla de que tu función siga funcionando de forma razonable aunque alguien la llame con menos datos de los habituales.

Scope: qué puede "ver" tu función y qué no

Las variables que declaras con let o const dentro de una función solo existen ahí dentro; a esto se le llama ámbito local (o scope). Una vez termina la función, esas variables desaparecen y nadie fuera puede acceder a ellas:

const iva = 0.21; // variable global

function calcularConIva(precio) {
  const total = precio + precio * iva; // variable local
  return total;
}

console.log(calcularConIva(100)); // 121
console.log(total); // ReferenceError: total is not defined

Fíjate en que la función sí puede leer iva, que está declarada fuera: una función tiene acceso a las variables del ámbito global que la rodea, pero no al revés. Esto no es un detalle menor: es lo que te permite usar nombres de variable repetidos dentro de distintas funciones sin que se pisen entre sí.

Funciones como expresión y funciones anónimas

Hasta ahora has visto declaraciones de función (function nombre() {}). También puedes guardar una función directamente en una variable; a esto se le llama expresión de función:

const multiplicar = function (a, b) {
  return a * b;
};

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

Fíjate en que esta función no tiene nombre propio después de function: es una función anónima, y es habitual porque ya tiene un nombre a través de la variable (multiplicar) a la que se asigna. Vas a encontrarte funciones anónimas constantemente como argumento de otras funciones, algo que verás con detalle cuando lleguemos a los arrays de esta serie.

Arrow functions: la sintaxis corta que vas a ver en todas partes

Desde 2015, JavaScript tiene una forma más corta de escribir funciones, con el símbolo => (de ahí el nombre, "función flecha"):

const multiplicar = (a, b) => {
  return a * b;
};

// Si el cuerpo es una única línea con return, puedes simplificarla:
const multiplicar2 = (a, b) => a * b;

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

Cuando el cuerpo de la función cabe en una sola expresión, puedes quitar las llaves y la palabra return: JavaScript entiende que el resultado de esa expresión es lo que se devuelve. Si solo recibe un parámetro, incluso puedes quitar los paréntesis a su alrededor:

const doblar = numero => numero * 2;
console.log(doblar(10)); // 20

Las arrow functions se comportan distinto a las funciones normales en algunos casos avanzados (sobre todo con this, algo que no necesitas todavía), así que de momento quédate con la idea práctica: para callbacks cortos y funciones sencillas, la sintaxis flecha es hoy la más habitual en código moderno, y es la que verás en la mayoría de ejemplos y tutoriales actuales.

Forma	Ejemplo	Cuándo usarla
Declaración de función	function sumar(a, b) { return a + b; }	Funciones principales de tu programa, sobre todo si quieres que el nombre sea claro desde el principio del archivo
Expresión de función	const sumar = function(a, b) { return a + b; }	Cuando quieres guardar la función en una variable o pasarla como argumento
Arrow function	const sumar = (a, b) => a + b;	Funciones cortas y callbacks; es la forma más usada en código moderno

Juntando todo en un ejemplo pequeño

function calcularPrecioFinal(precio, descuento = 0) {
  const precioConDescuento = precio - descuento;
  const iva = precioConDescuento * 0.21;
  return precioConDescuento + iva;
}

console.log(calcularPrecioFinal(100, 10)); // 108.9
console.log(calcularPrecioFinal(50));      // 60.5

Prueba a pegar este ejemplo en la consola del navegador (F12 → Console) y cambia los valores. Intenta añadir tú un tercer parámetro, por ejemplo gastosEnvio, antes de seguir leyendo.

Errores típicos al empezar

• Declarar la función pero no llamarla. Si no ves ningún resultado, comprueba primero si de verdad estás ejecutando la función con sus paréntesis: saludar(), no solo saludar.
• Confundir console.log con return. Una función puede mostrar algo en consola y aun así devolver undefined si no tiene un return.
• Escribir código después de un return esperando que se ejecute. En cuanto la función llega a un return, termina ahí mismo.
• Usar una variable local fuera de su función. Si declaraste algo con let o const dentro de una función, no existe fuera de ella; si lo necesitas fuera, devuélvelo con return y guárdalo en una variable externa.
• Olvidar los paréntesis al llamar una función sin parámetros. miFuncion hace referencia a la función en sí, no la ejecuta; para eso necesitas miFuncion().

En resumen

• Una función agrupa código reutilizable bajo un nombre; se declara una vez y se llama (ejecuta) las veces que haga falta.
• Los parámetros son los "huecos" que define la función; los argumentos son los valores reales que le pasas al llamarla.
• return termina la función y entrega un valor reutilizable; sin él, la función devuelve undefined.
• Puedes dar valores por defecto a los parámetros con parametro = valor para que la función siga funcionando si falta algún argumento.
• Las variables declaradas dentro de una función solo existen ahí (ámbito local); la función sí puede leer variables globales de fuera.
• Además de declaraciones de función, puedes escribirlas como expresión (const f = function() {}) o con la sintaxis corta de arrow function (const f = () => {}), hoy la más habitual en código moderno.

Con esto ya puedes dejar de repetir bloques de código y empezar a organizarlo en piezas con nombre propio. En el próximo artículo de esta serie seguimos con los arrays, para ver cómo guardar listas de datos y recorrerlas, muchas veces junto a las propias funciones que acabas de aprender. Mientras tanto, si vas a apoyarte en un asistente de IA para revisar tus funciones mientras practicas, te interesa cómo usarla sin dejar de aprender de verdad.