Funciones

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Definir y llamar funciones con parámetros y return.
Elegir entre declaración, expresión y función flecha.
Entender el ámbito de las variables.
Usar funciones como valores: callbacks y closures básicas.

1.Qué es una función

Una función es un bloque de código con nombre que puedes ejecutar cuando quieras, las veces que quieras, y con datos distintos cada vez. Es la herramienta principal para organizar un programa, evitar repetir código y darle nombre a cada tarea.

Ya has usado funciones sin saberlo: console.log(), Math.round() o "hola".toUpperCase() son funciones que escribió otra persona. Ahora escribirás las tuyas.

function

saludarnombre

(

nombreparámetro

) {

return "Hola " + nombrecuerpo

; }

▶ Tu primera función

Código (edítalo y pulsa Ejecutar)

<script>
  function saludar(nombre) {
    return "Hola, " + nombre + "!";
  }

  console.log(saludar("Ana"));
  console.log(saludar("Luis"));
  console.log(saludar("Mundo"));
</script>

Página (resultado)

Consola

Defines la función con function nombre(parámetros) { … }.
La llamas con nombre(argumentos). Hasta que no la llamas, no hace nada.
Devuelve un resultado con return.

2.Parámetros, argumentos y return

Término	Qué es	Ejemplo
Parámetro	El nombre que la función usa para un dato de entrada	`function sumar(a, b)` → `a` y `b`
Argumento	El valor concreto que pasas al llamarla	`sumar(3, 4)` → `3` y `4`
return	El valor que la función devuelve y termina	`return a + b;`

▶ Entradas y salida

Código (edítalo y pulsa Ejecutar)

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

  const resultado = sumar(3, 4);       // guardamos lo que devuelve
  console.log(resultado);               // 7
  console.log(sumar(10, 5) * 2);        // usamos el resultado en otra operación

  function saludarEnConsola(nombre) {
    console.log("Hola", nombre);        // sin return: devuelve undefined
  }
  const nada = saludarEnConsola("Ana");
  console.log(nada);                    // undefined
</script>

Página (resultado)

Consola

⚠️ Importante · return frente a console.log

console.log muestra un valor; return lo entrega a quien llamó a la función para que lo use. Una función útil casi siempre devuelve su resultado (y es quien la llama la que decide si lo muestra, lo guarda o lo suma a otra cosa). Si una función no tiene return, devuelve undefined.

Valores por defecto

Un parámetro opcional

function saludar(nombre = "amigo") {
  return `Hola, ${nombre}`;
}
console.log(saludar("Ana"));   // "Hola, Ana"
console.log(saludar());        // "Hola, amigo"

3.Tres maneras de escribir una función

Forma	Sintaxis	Notas
Declaración	`function sumar(a, b) { return a + b; }`	Se puede llamar antes de definirla (hoisting)
Expresión	`const sumar = function (a, b) { return a + b; };`	Es un valor guardado en una variable
Flecha	`const sumar = (a, b) => a + b;`	Más corta; muy usada con arrays y eventos

▶ Funciones flecha

Código (edítalo y pulsa Ejecutar)

<script>
  const doble = (n) => n * 2;              // una línea: el resultado es implícito
  const cuadrado = n => n * n;             // un parámetro: paréntesis opcionales
  const saludo = () => "Hola";             // sin parámetros: paréntesis vacíos

  const promedio = (a, b) => {             // varias líneas: llaves y return
    const suma = a + b;
    return suma / 2;
  };

  console.log(doble(4), cuadrado(5), saludo(), promedio(6, 9));
</script>

Página (resultado)

Consola

💡 Consejo · ¿Cuál usar?

Para empezar, la declaración (function nombre() {}) es la más legible. Las flechas son perfectas para funciones pequeñas que pasarás a otras (como en map o addEventListener). Con el tiempo verás que cada una tiene su sitio.

4.Ámbito: dónde vive cada variable

El ámbito (*scope*) es la zona del código donde una variable es visible. Las variables creadas dentro de una función no existen fuera de ella:

▶ Ámbito

Código (edítalo y pulsa Ejecutar)

<script>
  const global = "Soy visible en todas partes";

  function ejemplo() {
    const local = "Solo existe dentro de la función";
    console.log(global);       // sí: lo de fuera se ve desde dentro
    console.log(local);
  }

  ejemplo();
  console.log(global);
  console.log(local);          // ReferenceError: local is not defined
</script>

Página (resultado)

Consola

Ámbito	Dónde existe
Global	En todo el programa (declaradas fuera de funciones y bloques)
De función	Solo dentro de esa función
De bloque	Solo dentro de `{ … }` si usas `let` o `const` (un `if`, un `for`…)

💡 Consejo · Evita variables globales

Las variables globales pueden modificarse desde cualquier parte, lo que hace los errores difíciles de rastrear. Pasa los datos por parámetros y devuélvelos con return: tus funciones serán más fáciles de probar y de reutilizar.

5.Funciones puras y pequeñas

Una función pura siempre devuelve lo mismo para los mismos argumentos y no cambia nada fuera de ella. Son las más fáciles de entender, de probar y de reutilizar.

▶ Pura frente a impura

Código (edítalo y pulsa Ejecutar)

<script>
  // PURA: solo depende de sus argumentos
  const conIva = (precio) => precio * 1.16;

  // IMPURA: depende de (y cambia) algo de fuera
  let total = 0;
  function sumarAlTotal(precio) {
    total += precio;               // modifica una variable global
    return total;
  }

  console.log(conIva(100), conIva(100));          // siempre igual
  console.log(sumarAlTotal(10), sumarAlTotal(10)); // distinto cada vez
</script>

Página (resultado)

Consola

Una función, una tarea: si necesitas «y» para describirla, probablemente son dos funciones.
Nombres que son verbos: calcularTotal, esValido, crearTarjeta.
Las funciones que devuelven true/false suelen empezar por es, tiene o puede.
Pocos parámetros (idealmente 3 o menos).

6.Parámetros rest y spread

Un número variable de argumentos

function sumarTodos(...numeros) {         // ...numeros: agrupa los argumentos en un array
  let total = 0;
  for (const n of numeros) total += n;
  return total;
}
console.log(sumarTodos(1, 2, 3));          // 6
console.log(sumarTodos(10, 20, 30, 40));   // 100

const lista = [4, 8, 15];
console.log(Math.max(...lista));           // ...lista: reparte el array en argumentos

📌 Nota · Los tres puntos

Los ... hacen dos cosas según dónde estén: en la definición de una función agrupan (rest); al llamar o en un array/objeto reparten (spread). Lo volverás a ver en arrays y objetos.

7.Funciones como valores: callbacks

En JavaScript, las funciones son valores: puedes guardarlas en variables, pasarlas como argumentos y devolverlas de otras funciones. Una función que se pasa a otra para que esta la ejecute después se llama callback.

▶ Pasar funciones como argumentos

Código (edítalo y pulsa Ejecutar)

<script>
  function repetir(veces, accion) {
    for (let i = 1; i <= veces; i++) {
      accion(i);                         // aquí se ejecuta la función recibida
    }
  }

  repetir(3, (n) => console.log("Vuelta", n));
  repetir(2, function (n) { console.log("Otra forma", n * 10); });

  function aplicar(valor, transformar) {
    return transformar(valor);
  }
  console.log(aplicar(5, (x) => x * x));
  console.log(aplicar("hola", (t) => t.toUpperCase()));

  setTimeout(() => console.log("Un callback que se ejecuta después"), 500);
</script>

Página (resultado)

Consola

Los callbacks son la base de los eventos («cuando pulsen el botón, ejecuta esta función») y de la asincronía («cuando llegue la respuesta, ejecuta esta función»), que verás en las lecciones 9 y 10.

8.Un vistazo a las closures

Una función recuerda las variables del lugar donde se creó, incluso después de que ese lugar haya terminado. A esto se le llama closure (clausura) y permite cosas muy útiles:

▶ Un contador con memoria

Código (edítalo y pulsa Ejecutar)

<script>
  function crearContador() {
    let cuenta = 0;                   // variable «privada»
    return function () {
      cuenta++;
      return cuenta;
    };
  }

  const contadorA = crearContador();
  const contadorB = crearContador();

  console.log(contadorA(), contadorA(), contadorA());   // 1 2 3
  console.log(contadorB());                              // 1 (otro contador, otra memoria)
</script>

Página (resultado)

Consola

📌 Nota · No hace falta dominarlo ya

Las closures confunden al principio y es normal. Lo importante: la función interna sigue teniendo acceso a cuenta, y nadie de fuera puede tocarla. Lo usarás sin darte cuenta cada vez que escribas un evento o un callback dentro de una función.

9.Errores frecuentes

Olvidar return: la función devuelve undefined.
Escribir saludar en vez de saludar(): sin paréntesis no se llama, solo se hace referencia a la función.
Usar return y esperar que lo que está después se ejecute: return termina la función.
Depender de variables globales en lugar de parámetros.
Funciones demasiado largas que hacen muchas cosas.
Modificar los argumentos (arrays y objetos) sin querer: se pasan por referencia.
Nombres de parámetros iguales a variables de fuera que provocan confusión.
Funciones flecha con llaves y sin return: n => { n * 2 } devuelve undefined.

📒 Apuntes para llevar

Una función es un bloque con nombre que se define una vez y se llama muchas.
Parámetros son los nombres de entrada; argumentos los valores al llamar; return entrega el resultado y termina la función.
Tres formas: declaración (function f() {}), expresión (const f = function () {}) y flecha (const f = () => {}).
Las variables de una función no existen fuera de ella; las de fuera sí se ven desde dentro.
Prefiere funciones puras y pequeñas: reciben datos por parámetros y los devuelven con return.
Los valores por defecto (nombre = "amigo") y los parámetros rest (...numeros) dan flexibilidad.
Las funciones son valores: se pasan como callbacks, base de eventos y asincronía.
Una closure es una función que recuerda las variables del lugar donde nació.

10.Glosario

Término	Significado
Función	Bloque de código con nombre que se ejecuta al llamarlo.
Parámetro	Nombre de un dato de entrada en la definición de la función.
Argumento	Valor que se pasa al llamar a la función.
`return`	Devuelve un valor y termina la función.
Ámbito (scope)	Zona donde una variable es visible.
Función flecha	Forma corta de escribir funciones: `(a, b) => a + b`.
Callback	Función que se pasa a otra para que la ejecute más tarde.
Closure	Función que conserva acceso a las variables de su entorno de creación.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué devuelve una función que no tiene return?

Sin return, devuelve undefined.

¿Qué diferencia hay entre saludar y saludar()?

Una variable declarada con const dentro de una función, ¿se puede usar fuera?

¿Cuál de estas es una función flecha correcta que devuelve el doble?

Con una sola expresión sin llaves, el resultado se devuelve solo. Con llaves necesitas return.

¿Qué es un callback?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio