Tutorial: funciones en JavaScript - empaqueta tu código reutilizable

Una función es una cajita de instrucciones a la que le pones un nombre para no tener que reescribirlas cada vez. Hoy vas a construir una calculadora de propinas (útil, a diferencia de la mayoría de ejemplos de "hola mundo").

Paso 1: declara tu primera función

function calcularPropina(cuenta, porcentaje) {
  return cuenta * (porcentaje / 100);
}

console.log(calcularPropina(200, 15)); // 30

function nombre(parametros) { ... } es la forma clásica de declarar una función. cuenta y porcentaje son parámetros: valores que le "prestas" a la función cada vez que la usas.

Paso 2: usa un valor por defecto

function calcularPropina(cuenta, porcentaje = 10) {
  return cuenta * (porcentaje / 100);
}

console.log(calcularPropina(200)); // 20 (usa 10% por defecto)
console.log(calcularPropina(200, 20)); // 40

Si no pasas porcentaje, JavaScript usa el valor por defecto en vez de darte undefined. Menos errores, menos drama.

Paso 3: la versión moderna - arrow functions

const calcularTotal = (cuenta, propina) => cuenta + propina;

console.log(calcularTotal(200, 30)); // 230

Las arrow functions (=>) son una forma más corta de escribir funciones, muy comunes en código moderno. Cuando el cuerpo es una sola expresión, ni siquiera necesitas return ni llaves.

Paso 4: combina todo

function resumenDeCuenta(cuenta, porcentajePropina = 10) {
  const propina = calcularPropina(cuenta, porcentajePropina);
  const total = calcularTotal(cuenta, propina);
  return `Cuenta: $${cuenta}, propina: $${propina}, total: $${total}`;
}

console.log(resumenDeCuenta(500, 18));

Una función puede llamar a otras funciones. Así es como el código "grande" en realidad son muchas funciones pequeñas trabajando juntas, no un genio escribiendo 500 líneas de corrido.

¿Qué acabas de aprender?

• Cómo declarar funciones con parámetros y valores por defecto.
• La sintaxis moderna de arrow functions.
• Que las funciones pueden combinarse para resolver problemas más grandes.