Funciones, bloques y retorno: reutilizar lógica sin copiar código

Aprende a agrupar una tarea en una función, pasarle datos con parámetros y devolver un resultado útil con `return`.

Ya sabes decidir, repetir y depurar. El siguiente paso es evitar copiar la misma lógica en varios sitios del programa.

Para eso sirven las funciones: bloques reutilizables que agrupan una tarea, pueden recibir datos y pueden devolver un resultado.

Esta lección es clave porque aquí el alumno empieza a organizar el código con intención, no solo a hacerlo funcionar.

Objetivo medible: crear una función simple con parámetros y retorno, ejecutarla con distintos datos y explicar qué valor produce.

  • Una función evita repetir lógica y te obliga a pensar una tarea como una pieza clara y reutilizable.
  • Si calculas un total varias veces, no tiene sentido reescribir siempre la misma suma con la misma estructura mental.
  • Una función te permite encapsular esa tarea, darle un nombre útil y llamarla cuando la necesites con datos distintos.
  • Agrupa una tarea concreta.
  • Reduce duplicación.

Por qué las funciones importan tanto

Una función evita repetir lógica y te obliga a pensar una tarea como una pieza clara y reutilizable.

Si calculas un total varias veces, no tiene sentido reescribir siempre la misma suma con la misma estructura mental.

Una función te permite encapsular esa tarea, darle un nombre útil y llamarla cuando la necesites con datos distintos.

  • Agrupa una tarea concreta.
  • Reduce duplicación.
  • Hace el código más legible.
  • Permite reutilizar lógica con entradas diferentes.

La estructura básica de una función

En esta fase no necesitas estudiar variantes avanzadas. Necesitas entender nombre, parámetros, bloque y retorno.

`calcularTotal` es el nombre de la función. `precio` y `envio` son parámetros: representan los datos que entran. `return total` devuelve el resultado para que el resto del programa pueda usarlo.

Aquí ya aparece una habilidad nueva muy importante: separar la lógica de cálculo del momento en que la utilizas.

Parámetros: la función cambia de datos sin cambiar de lógica

Los parámetros permiten reutilizar la misma idea con entradas distintas.

La función sigue siendo la misma, pero el resultado cambia porque recibe datos diferentes.

Esa es una de las grandes ideas de la programación: mantener la lógica estable mientras cambian los valores concretos.

Qué significa devolver un valor con `return`

Devolver un valor significa entregar el resultado de la función al resto del programa.

Entender esto pronto evita un error muy frecuente: confundir mostrar algo en consola con devolver algo para usarlo después.

Una función puede imprimir, pero lo que de verdad la hace reutilizable es lo que devuelve.

  • Sin `return`, la función puede ejecutar algo pero no entregar un resultado reutilizable.
  • Con `return`, puedes guardar lo devuelto en una variable.
  • También puedes usar ese valor en otra expresión o mostrarlo por consola.

Errores comunes y tips al empezar con funciones

Los primeros fallos suelen venir de mezclar el nombre de la función, los parámetros y el valor devuelto.

  • Crear una función, pero olvidar ejecutarla.
  • Usar parámetros sin entender qué valor reciben.
  • Imprimir algo dentro de la función y creer que eso ya equivale a un retorno.
  • Ponerle un nombre tan vago que no se entiende qué tarea resuelve.
Fundamentos de Programación
10

Funciones, bloques y retorno: reutilizar lógica sin copiar código

Aprende a agrupar una tarea en una función, pasarle datos con parámetros y devolver un resultado útil con `return`.

Código del tema: function calcularTotal(precio, envio) {

📘 Teoría

Por qué las funciones importan tanto

Una función evita repetir lógica y te obliga a pensar una tarea como una pieza clara y reutilizable.

Si calculas un total varias veces, no tiene sentido reescribir siempre la misma suma con la misma estructura mental.

Una función te permite encapsular esa tarea, darle un nombre útil y llamarla cuando la necesites con datos distintos.

  • Agrupa una tarea concreta.
  • Reduce duplicación.
  • Hace el código más legible.
  • Permite reutilizar lógica con entradas diferentes.

La estructura básica de una función

En esta fase no necesitas estudiar variantes avanzadas. Necesitas entender nombre, parámetros, bloque y retorno.

1

`calcularTotal` es el nombre de la función. `precio` y `envio` son parámetros: representan los datos que entran. `return total` devuelve el resultado para que el resto del programa pueda usarlo.

2

Aquí ya aparece una habilidad nueva muy importante: separar la lógica de cálculo del momento en que la utilizas.

Función simple que calcula un total
function calcularTotal(precio, envio) {
  let total = precio + envio;
  return total;
}

let resultado = calcularTotal(24, 3);
console.log('Total:', resultado);

Parámetros: la función cambia de datos sin cambiar de lógica

Los parámetros permiten reutilizar la misma idea con entradas distintas.

1

La función sigue siendo la misma, pero el resultado cambia porque recibe datos diferentes.

2

Esa es una de las grandes ideas de la programación: mantener la lógica estable mientras cambian los valores concretos.

Misma función, distintos resultados
function saludar(nombre) {
  return 'Hola, ' + nombre;
}

console.log(saludar('Marta'));
console.log(saludar('Luis'));

Qué significa devolver un valor con `return`

Devolver un valor significa entregar el resultado de la función al resto del programa.

Entender esto pronto evita un error muy frecuente: confundir mostrar algo en consola con devolver algo para usarlo después.

Una función puede imprimir, pero lo que de verdad la hace reutilizable es lo que devuelve.

  • Sin `return`, la función puede ejecutar algo pero no entregar un resultado reutilizable.
  • Con `return`, puedes guardar lo devuelto en una variable.
  • También puedes usar ese valor en otra expresión o mostrarlo por consola.
Guardar el resultado devuelto
function duplicar(numero) {
  return numero * 2;
}

let doble = duplicar(6);
console.log('Resultado:', doble);

Errores comunes y tips al empezar con funciones

Los primeros fallos suelen venir de mezclar el nombre de la función, los parámetros y el valor devuelto.

  • Crear una función, pero olvidar ejecutarla.
  • Usar parámetros sin entender qué valor reciben.
  • Imprimir algo dentro de la función y creer que eso ya equivale a un retorno.
  • Ponerle un nombre tan vago que no se entiende qué tarea resuelve.

🧭 Visuales clave

Entrada, bloque y retorno de una función

Ayuda a entender la función como una pieza organizada del programa con parámetros de entrada y un valor de salida reutilizable.

Diagrama didáctico que muestra una función como un bloque reutilizable que recibe datos de entrada, ejecuta una lógica interna y devuelve un resultado.

🧪 Aprende probando

Ejemplo Ejemplo guiado: calcular el total de una compra Agrupa una operación repetible en una función clara con retorno.
Ejemplo Ejemplo guiado: construir un mensaje personalizado Usa un parámetro de texto para reutilizar la misma lógica con nombres distintos.

🏁 Retos

Reto Reto: crea una función que calcule un doble Escribe una función con un parámetro numérico y devuelve el doble del valor recibido.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .