JavaScript: funciones para ordenar la lógica de una aplicación

Cuando una aplicación empieza, muchas veces todo parece simple: leemos un valor, hacemos una comparación y mostramos un mensaje. Pero después aparecen más campos, más reglas, más botones, más estados y más condiciones. Si dejamos todo en un solo bloque, el código empieza a crecer como una madeja difícil de desenredar.

Las funciones existen para evitar ese desorden. Una función permite ponerle nombre a una acción, recibir datos, procesarlos y devolver un resultado. En desarrollo de interfaces, esto es clave: no queremos repetir la misma lógica cada vez que validamos una nota, calculamos un total o mostramos un mensaje.

En el capítulo anterior trabajamos condicionales. Ahora vamos a organizar esas decisiones en funciones reutilizables. Es un paso necesario antes de entrar al DOM, porque una interfaz que responde a eventos necesita lógica clara, pequeña y fácil de probar.

Qué aprenderás hoy

• Entender qué es una función y por qué ayuda a ordenar una aplicación.
• Crear funciones con parámetros.
• Usar return para devolver resultados.
• Distinguir entre una función que calcula y una función que muestra.
• Usar funciones tradicionales y arrow functions cuando corresponde.
• Preparar lógica reutilizable para futuros formularios, eventos y CRUD.

Por qué importan las funciones en interfaces

En una interfaz real, la misma lógica suele aparecer en diferentes lugares. Por ejemplo: validar si un campo está vacío, calcular un promedio, decidir si una nota aprueba, formatear un precio o construir un mensaje para el usuario.

Si repetimos esa lógica en todas partes, cualquier cambio se vuelve peligroso. Imagina que el criterio de aprobación cambia de 13 a 14. Si escribiste esa regla diez veces, debes recordar actualizarla diez veces. Si la regla vive dentro de una función, cambias un solo lugar.

Las funciones reducen repetición, hacen que el código sea más legible y preparan el camino para aplicaciones más grandes. También nos obligan a pensar mejor: ¿qué dato entra?, ¿qué proceso ocurre?, ¿qué resultado sale?

La forma básica de una función

Una función puede declararse con la palabra function, un nombre, paréntesis y un bloque de código.

function saludar() {
  console.log("Hola, bienvenido al curso");
}

saludar();

El nombre de la función debe explicar la acción. En este ejemplo, saludar comunica claramente qué hace. Cuando llamamos a la función con saludar(), JavaScript ejecuta el bloque interno.

Parámetros: datos que entran

Una función se vuelve más útil cuando recibe datos. Esos datos se llaman parámetros. Funcionan como variables internas que la función usa para hacer su trabajo.

function saludarEstudiante(nombre) {
  console.log("Hola, " + nombre + ". Bienvenido al curso.");
}

saludarEstudiante("Adriana");
saludarEstudiante("Carlos");

La función es la misma, pero el resultado cambia según el dato recibido. Esta es la base de la reutilización: escribir una lógica una vez y aplicarla a distintos valores.

Return: resultados que salen

Muchas funciones no deberían mostrar directamente un mensaje. A veces solo deben calcular y devolver un resultado. Para eso usamos return.

function calcularPromedio(nota1, nota2, nota3) {
  const suma = nota1 + nota2 + nota3;
  return suma / 3;
}

const promedio = calcularPromedio(15, 18, 12);
console.log(promedio);

La función recibe tres notas, calcula el promedio y lo devuelve. Luego podemos decidir qué hacer con ese resultado: mostrarlo, guardarlo, compararlo o enviarlo a otra función.

Ejemplo básico: decidir si una nota aprueba

Tomemos la lógica del capítulo anterior y pongámosla dentro de una función. Primero haremos una función pequeña, fácil de leer.

function estaAprobado(nota) {
  return nota >= 13;
}

console.log(estaAprobado(16)); // true
console.log(estaAprobado(10)); // false

Esta función no muestra mensajes ni toca la interfaz. Solo responde una pregunta: ¿la nota aprueba? Ese tipo de función es muy valiosa porque se puede reutilizar en muchas partes.

Ejemplo mejorado: devolver un estado completo

Ahora podemos crear una función que no solo diga si aprueba, sino que devuelva un objeto con un mensaje y una clase visual.

function obtenerEstadoNota(nota) {
  if (!Number.isFinite(nota)) {
    return {
      mensaje: "Ingresa una nota válida.",
      clase: "result-error"
    };
  }

  if (nota < 0 || nota > 20) {
    return {
      mensaje: "La nota debe estar entre 0 y 20.",
      clase: "result-error"
    };
  }

  if (nota >= 13) {
    return {
      mensaje: "Aprobado. Buen trabajo.",
      clase: "result-success"
    };
  }

  return {
    mensaje: "Aún no aprueba. Necesita reforzar.",
    clase: "result-warning"
  };
}

La función recibe una nota y devuelve una estructura clara. No depende del DOM, no sabe dónde se mostrará el mensaje y no necesita conocer el HTML. Solo transforma un dato en una decisión.

Separar cálculo, decisión y presentación

Una aplicación se vuelve más ordenada cuando cada función tiene una tarea concreta. Podemos separar la lectura de datos, la conversión, la decisión y la presentación.

function convertirANumero(valor) {
  return Number(valor);
}

function obtenerEstadoNota(nota) {
  if (!Number.isFinite(nota)) {
    return {
      mensaje: "Ingresa una nota válida.",
      clase: "result-error"
    };
  }

  if (nota >= 13) {
    return {
      mensaje: "Aprobado.",
      clase: "result-success"
    };
  }

  return {
    mensaje: "Necesita reforzar.",
    clase: "result-warning"
  };
}

function mostrarResultado(elemento, estado) {
  elemento.className = "result " + estado.clase;
  elemento.textContent = estado.mensaje;
}

Este patrón es importante. Más adelante, cuando usemos eventos y DOM, podremos leer un valor de un input, pasarlo por estas funciones y pintar el resultado en pantalla sin mezclar todo en un solo bloque.

Arrow functions: otra forma de escribir funciones

JavaScript también permite escribir funciones con sintaxis de flecha. Son muy comunes en código moderno, especialmente en callbacks, arreglos y React.

const duplicar = (numero) => {
  return numero * 2;
};

console.log(duplicar(8));

Si la función es muy corta y devuelve una expresión, puede escribirse en una sola línea.

const esMayorDeEdad = (edad) => edad >= 18;

console.log(esMayorDeEdad(20));

Esto no significa que siempre debamos usar arrow functions. En capítulos iniciales conviene priorizar claridad. Si una función tiene varias decisiones, una declaración tradicional con function puede resultar más legible.

Funciones como callbacks

Un callback es una función que se pasa como argumento a otra función para ejecutarse después. Aunque lo trabajaremos con más detalle en DOM, vale la pena reconocerlo desde ahora.

function procesarNota(nota, callback) {
  const estado = obtenerEstadoNota(nota);
  callback(estado);
}

function mostrarEnConsola(estado) {
  console.log(estado.mensaje);
}

procesarNota(17, mostrarEnConsola);

La función procesarNota no sabe cómo se mostrará el resultado. Solo procesa y entrega el estado a otra función. Esta idea aparecerá constantemente cuando trabajemos con eventos, arreglos y llamadas a datos.

Scope: dónde vive una variable

Las variables creadas dentro de una función tienen alcance local. Eso significa que viven dentro de esa función y no se pueden usar directamente desde afuera.

function calcularDescuento(precio) {
  const descuento = precio * 0.1;
  return precio - descuento;
}

console.log(calcularDescuento(100));
// console.log(descuento); // Error: descuento no existe fuera de la función

El alcance ayuda a evitar conflictos. Si cada función guarda sus variables internas, reducimos el riesgo de que una parte de la aplicación modifique accidentalmente otra.

Errores comunes al crear funciones

• Crear funciones con nombres vagos como hacerCosa o proceso.
• Hacer que una función calcule, valide, modifique el DOM y muestre alertas al mismo tiempo.
• Olvidar usar return cuando se espera un resultado.
• Repetir la misma lógica en vez de convertirla en función.
• Usar demasiados parámetros sin orden ni estructura.
• Depender de variables globales cuando la función podría recibir datos como parámetros.

Buenas prácticas

• Usa nombres con verbos: calcularTotal, validarCorreo, obtenerEstadoNota.
• Haz funciones pequeñas y con una responsabilidad principal.
• Prefiere recibir datos por parámetros en lugar de depender de variables externas.
• Devuelve resultados con return cuando la función calcule o decida algo.
• Separa lógica de negocio y presentación visual.
• Prueba tus funciones con varios datos antes de conectarlas a la interfaz.

Reto práctico

Variante extra: agrega una función obtenerClaseResultado(valido) que devuelva result-success o result-error. Así separas la validación del estilo visual.

Conclusión

Las funciones son una de las herramientas más importantes para pasar de escribir instrucciones sueltas a construir aplicaciones ordenadas. Permiten nombrar acciones, reutilizar lógica, evitar repetición y dividir problemas grandes en piezas pequeñas.

En interfaces, esta claridad se nota rápidamente. Una función puede validar un dato, otra puede decidir el estado, otra puede mostrar el resultado. Cuando cada pieza tiene una responsabilidad, el código se vuelve más fácil de leer, corregir y ampliar.

En el siguiente capítulo entraremos al DOM y a los eventos. Allí veremos cómo conectar estas funciones con acciones reales del usuario: escribir en un campo, hacer clic en un botón, enviar un formulario o actualizar una tarjeta en pantalla.

Fuentes consultadas

• MDN Web Docs: Functions
• MDN Web Docs: Functions reference
• MDN Web Docs: return
• MDN Web Docs: Arrow function expressions
• MDN Web Docs: Callback function