¿Cómo crear y usar funciones en JavaScript?

Una función en JavaScript es un bloque de código reutilizable que realiza una tarea específica cada vez que la llamas.

Sin funciones, tendrías que escribir el mismo código una y otra vez. Con funciones, escribes la lógica una sola vez y la ejecutas cuantas veces necesites.

Qué es una función y para qué sirve

Imagina que trabajas en el área de e-commerce de Liverpool. Cada vez que un cliente hace un pedido, necesitas calcular el IVA del precio. Sin funciones, repetirías ese cálculo en cada parte del código. Con una función, lo defines una vez y listo.

Una función recibe datos de entrada (parámetros), los procesa y devuelve un resultado.

Este patrón — entrada, proceso, salida — es la base de toda la programación estructurada.

Funciones declaradas

Una función declarada usa la palabra clave function seguida del nombre, los parámetros y el bloque de código.

Sintaxis:

function nombreFuncion(parametro1, parametro2) {
  // código
  return resultado;
}

Ejemplo 1 — Calcular IVA:

function calcularIVA(precio) {
  return precio * 0.16;
}

console.log(calcularIVA(500));   // $80
console.log(calcularIVA(1200));  // $192

Llamas a la función escribiendo su nombre seguido de paréntesis con el valor. Cada llamada es independiente.

Ejemplo 2 — Precio final con IVA:

function precioFinal(precio) {
  let iva = precio * 0.16;
  return precio + iva;
}

console.log(precioFinal(850));   // $986
console.log(precioFinal(3200));  // $3,712

Una función puede tener varios pasos internos. El return detiene la ejecución y devuelve el valor al punto donde fue llamada.

Funciones con múltiples parámetros

Puedes pasar más de un dato a una función separando los parámetros con comas.

Ejemplo 3 — Costo de envío en Mercado Libre:

Mercado Libre cobra el envío según el peso del paquete y la distancia en kilómetros.

function costoEnvio(pesoKg, distanciaKm) {
  let costoPorKg = 12;
  let costoPorKm = 0.8;
  return (pesoKg * costoPorKg) + (distanciaKm * costoPorKm);
}

console.log(costoEnvio(2, 150));  // $144
console.log(costoEnvio(5, 300));  // $300

Con dos parámetros, la función es mucho más flexible. Puedes calcular cualquier combinación de peso y distancia sin reescribir la lógica.

Funciones expresadas

Una función expresada guarda una función dentro de una variable. El comportamiento es casi idéntico al de una función declarada, pero tiene una diferencia clave: no puedes usarla antes de declararla.

Sintaxis:

const nombreFuncion = function(parametro1, parametro2) {
  return resultado;
};

Ejemplo 4 — Descuento en FEMSA:

FEMSA aplica un descuento porcentual a productos en promoción.

const aplicarDescuento = function(precio, porcentaje) {
  let descuento = precio * (porcentaje / 100);
  return precio - descuento;
};

console.log(aplicarDescuento(1800, 10));  // $1,620
console.log(aplicarDescuento(500, 25));   // $375

Usas const para que nadie pueda sobrescribir accidentalmente tu función. Esto es una buena práctica en equipos de trabajo.

Funciones flecha

Una función flecha (arrow function) es una forma más corta de escribir funciones expresadas. Usa el símbolo => en lugar de la palabra function.

Sintaxis:

const nombreFuncion = (parametro1, parametro2) => {
  return resultado;
};

Cuando el cuerpo de la función tiene solo una línea con un return, puedes simplificarlo aún más:

const nombreFuncion = (parametro1) => resultado;

Ejemplo 5 — Calcular comisión de vendedor en Bimbo:

Un vendedor de Bimbo gana una comisión del 5% sobre sus ventas mensuales.

const calcularComision = (ventasMes) => ventasMes * 0.05;

console.log(calcularComision(18500));  // $925
console.log(calcularComision(30000));  // $1,500

La función flecha de una línea no necesita llaves {} ni la palabra return. El resultado se devuelve automáticamente.

Ejemplo 6 — Salario neto con deducciones IMSS:

En México, el IMSS descuenta aproximadamente el 2% del salario bruto como cuota obrera.

const salarioNeto = (salarioBruto) => {
  let cuotaIMSS = salarioBruto * 0.02;
  let isr = salarioBruto * 0.03;
  return salarioBruto - cuotaIMSS - isr;
};

let empleado1 = 15000;
let empleado2 = 22000;

console.log("Neto empleado 1: $" + salarioNeto(empleado1));  // $14,250
console.log("Neto empleado 2: $" + salarioNeto(empleado2));  // $20,900

Cuando la función flecha tiene más de una línea, sí necesitas llaves y la palabra return.

Comparación de los tres tipos de funciones

Hoisting significa que JavaScript "sube" las declaraciones al inicio del archivo. Las funciones declaradas están disponibles en todo el archivo, incluso antes de la línea donde las escribiste.

Funciones que llaman a otras funciones

Puedes usar una función dentro de otra. Esto se llama composición de funciones y es muy útil para mantener el código limpio.

Ejemplo 7 — Pedido completo en Mercado Libre:

const calcularIVA = (precio) => precio * 0.16;

const costoEnvio = (peso) => peso * 12;

const totalPedido = (precio, peso) => {
  let precioConIVA = precio + calcularIVA(precio);
  let envio = costoEnvio(peso);
  return precioConIVA + envio;
};

console.log(totalPedido(800, 3));  // $964

Cada función hace solo una cosa. Eso las hace fáciles de leer, probar y corregir.

Errores comunes

Error 1 — Olvidar el return:

// ❌ Sin return
function calcularIVA(precio) {
  precio * 0.16;  // Este resultado se pierde
}
console.log(calcularIVA(500));  // undefined

// ✅ Con return
function calcularIVA(precio) {
  return precio * 0.16;
}
console.log(calcularIVA(500));  // $80

Si no escribes return, la función devuelve undefined. Siempre verifica que tu función regrese el valor que esperas.

Error 2 — Confundir definir una función con llamarla:

// Definir: solo crea la función, no la ejecuta
function saludar() {
  console.log("Hola");
}

// Llamar: aquí sí se ejecuta
saludar();

Escribir el nombre sin paréntesis no ejecuta la función. Los paréntesis () son los que disparan la ejecución.

Error 3 — Usar una función expresada antes de declararla:

// ❌ Esto falla
console.log(calcularIVA(500));  // Error: Cannot access before initialization

const calcularIVA = (precio) => precio * 0.16;

Las funciones expresadas y las funciones flecha no tienen hoisting. Defínelas antes de usarlas.

Error 4 — Pasar el número incorrecto de argumentos:

function costoEnvio(pesoKg, distanciaKm) {
  return (pesoKg * 12) + (distanciaKm * 0.8);
}

console.log(costoEnvio(2));  // NaN — distanciaKm es undefined

Si una función espera dos parámetros y solo le pasas uno, el parámetro faltante será undefined y los cálculos darán NaN (Not a Number).

Puntos clave para recordar

• Las funciones te permiten reutilizar lógica sin copiar y pegar código.
• Usa return para que la función devuelva un valor que puedas usar después.
• Las funciones declaradas están disponibles en todo el archivo (hoisting); las expresadas y flecha, no.
• Separa responsabilidades: cada función debe hacer una sola cosa.
• La composición de funciones — usar una función dentro de otra — hace el código más limpio y fácil de mantener.