Funciones
Los bucles controlan cuándo se repite el trabajo. Las funciones responden otra pregunta: dónde guardas un bloque de trabajo para ejecutarlo después por nombre. Una función es una receta con nombre. La defines una vez. La llamas cuando necesitas esos pasos. El copia y pega pierde fuerza; el nombre permanece.
¿Qué es una función?
En JavaScript la declares con la palabra function, un nombre, paréntesis () y un cuerpo entre { }. Nada del cuerpo corre hasta que llamas la función — escribe el nombre y (). Piensa: «empaqueta los pasos y luego dale a reproducir.»
Partes de una función
📊 Anatomía de una función
| Parte | Rol | Encaje cotidiano |
|---|---|---|
palabra function |
inicia la declaración | «aquí llega una receta con nombre» |
| nombre | así la llamas después | sayHi, showTotal — verbos claros ayudan |
() tras el nombre |
punto de llamada / luego entradas | () vacío aún significa «ejecuta ahora» |
cuerpo { } |
pasos en cada llamada | logs, cuentas, actualizar la página |
llamada name() |
ejecuta el cuerpo ahora | reutilizar sin reescribir el cuerpo |
Solo definir guarda la receta. Llamar la ejecuta. Si no llamas, el cuerpo se queda quieto — es normal en el lenguaje, no un fallo.
function sayHi() {
console.log("Hi");
}
sayHi();
Declara y luego llama
Las tres primeras líneas definen sayHi. La última llama. Deberías ver Hi en la consola. Sin sayHi(); la función existe pero no corre.
function beep() {
console.log("beep");
}
beep();
beep();
Reutiliza un solo cuerpo
Una definición, dos llamadas — beep se imprime dos veces. Esa es la idea: escribe los pasos una vez y ejecútalos cuando la historia necesite ese sonido. Si cambias el cuerpo después, se actualizan todos los sitios que usan ese nombre.
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
El cuerpo puede tener varios pasos
Con una llamada corren ambas líneas en orden: loading, luego ready. Una función no se limita a una sentencia — mete toda la mini-tarea entre llaves.
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
El trabajo local se queda en la receta
city y line viven dentro de greetCity. Cada llamada arma el mensaje y registra Hello from Tehran. En este patrón no necesitas esos nombres fuera — el disparador es la llamada.
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
Ejecuta trabajo para la página
Misma idea que en lecciones DOM: encuentra el elemento, asigna textContent. Envolverlo en una función permite que un botón, un temporizador o un script llame fillOut() cuando la página deba actualizarse — un nombre, un trabajo.
Muestra una función en la página
Define una función que escriba una línea corta en un párrafo y llámala desde el script para que el visitante vea el resultado.
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
La página muestra Hello from a function. El cuerpo de showMsg escribió en el DOM; la llamada de abajo pulsó reproducir. Cambia la cadena, recarga y lee la línea nueva. La siguiente lección profundiza en parámetros — valores que pasas entre paréntesis al llamar.
Pruébalo tú
- Declara
function hello()que registre"hello"y llámala una vez. - Llama esa misma función una segunda vez sin reescribir el cuerpo.
- Haz una función cuyo cuerpo registre dos palabras distintas en orden.
- Dentro de una función, arma un string con
lety regístralo. - Escribe una función que ponga
#outen"ok"(o usa el id de la demo). - En la demo HTML cambia solo el mensaje, recarga y lee el párrafo.
Errores frecuentes
- Definir la función y olvidar llamarla con
() - Escribir
sayHisin()— nombra la función, no ejecuta el cuerpo - Copiar y pegar las mismas líneas en vez de llamar una función dos veces
- Poner el trabajo fuera de
{ }y esperar que el nombre de la función lo «posea» - Mezclar esta lección con parámetros/
return— eso viene después; aquí define + llama
Resumen
- Una función empaqueta pasos bajo un nombre
- Declara con
function name() { … } - Llama con
name()para ejecutar el cuerpo - Un cuerpo, muchas llamadas — eso es reutilizar
- El cuerpo puede tener varias sentencias y trabajo local con
let - Actualizar la página encaja en una función que llamas cuando hace falta
- Siguiente: parámetros — pasar valores en la llamada
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior