Parámetros de función
En la lección anterior empaquetaste pasos bajo un nombre; los paréntesis quedaron vacíos. Los programas reales necesitan entradas — un nombre, un total, un mensaje — para que el mismo cuerpo trabaje con valores distintos. Esos huecos con nombre son parámetros. Los valores que entregas en la llamada son argumentos.
Parámetros y argumentos
Cuando escribes function greet(name) { … }, name es un parámetro: un nombre local dentro del cuerpo. Cuando escribes greet("Sara"), "Sara" es el argumento: el valor concreto que llena ese hueco en esta llamada. Misma receta, ingredientes distintos.
Quién va dónde
📊 Parámetro frente a argumento
| Idea | Dónde lo escribes | En la vida diaria |
|---|---|---|
| parámetro | dentro de () en la declaración |
cuenco vacío con etiqueta name |
| argumento | dentro de () en la llamada |
lo que echas — "Sara" |
| orden | de izquierda a derecha | primer argumento → primer parámetro |
| valor por defecto | name = "friend" en la declaración |
reserva si no traes nada |
| hueco vacío | llamada con menos valores | ese parámetro es undefined salvo que haya default |
Los parámetros viven en la declaración. Los argumentos aparecen en cada llamada. Mezclar las dos palabras es un fallo típico de principiante — ten la tabla a mano hasta que se vuelva hábito.
function greet(name) {
console.log("Hello, " + name);
}
greet("Sara");
Una entrada, un hueco
name espera dentro de greet. La llamada pasa "Sara". El cuerpo arma Hello, Sara y lo muestra. Cambia el argumento, conserva el cuerpo: esa es la ventaja de los parámetros.
function add(a, b) {
console.log(a + b);
}
add(3, 4);
Dos huecos, dos valores
Lista parámetros con comas: a, b. Pasa argumentos en el mismo orden: 3 va a a, 4 a b. El registro muestra 7. El cuerpo no fija esos números — la llamada los aporta.
function label(color, surface) {
console.log(color + " on " + surface);
}
label("red", "wall");
label("wall", "red");
El orden es el contrato
La primera llamada imprime red on wall. La segunda wall on red — misma función, argumentos intercambiados. JavaScript no adivina qué valor «parece» un color. Decide la posición.
function greetFriend(name = "friend") {
console.log("Hi, " + name);
}
greetFriend("Ali");
greetFriend();
Un valor de reserva si no llega nada
name = "friend" fija un valor por defecto. greetFriend("Ali") usa "Ali". greetFriend() con paréntesis vacíos usa "friend". El default protege el cuerpo cuando la llamada omite un hueco.
function showId(id) {
console.log(id);
}
showId();
Sin valor y sin default
showId() no pasa nada a id. Sin default, id es undefined y eso se imprime. No es un fallo fatal: avisa que olvidaste un argumento o que necesitas un default.
Pasa un texto a la página
Mismo patrón DOM de antes, pero el mensaje se construye con el argumento. Una función puede saludar a distintos invitados — solo cambia la llamada. La demo HTML de abajo hace exactamente eso.
Muestra parámetros en la página
Declara una función que reciba el nombre del invitado, escribe un saludo breve en un párrafo y llámala con un texto real.
<!DOCTYPE html>
<html>
<head>
<title>parameters — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function welcome(guest) {
let box = document.getElementById("msg");
box.textContent = "Hello, " + guest;
}
welcome("Omar");
</script>
</body>
</html>
La página muestra Hello, Omar. guest era el parámetro; "Omar" el argumento. Cambia solo el texto de la llamada, recarga y lee la nueva línea. Lo siguiente es return — sacar un valor de la función.
Pruébalo tú
- Escribe
function hello(name)que registre"hi "másnamey llámala con tu nombre. - Escribe
function sum(x, y)que registrex + yy llámala con dos números. - Llama dos veces a una función de dos parámetros con los argumentos intercambiados y compara los registros.
- Añade un default como
title = "guest"y llama una vez con valor y otra con()vacío. - Llama a una función de un parámetro sin argumento y sin default; confirma
undefineden la consola. - En la demo HTML cambia solo el texto del argumento, recarga y lee el párrafo.
Errores frecuentes
- Llamar con
()vacío cuando el cuerpo necesita un valor — obtienesundefinedsi no hay default - Invertir el orden de los argumentos y esperar que JavaScript «sepa» cuál es cuál
- Confundir parámetro (declaración) con argumento (llamada)
- Olvidar la coma entre dos parámetros o dos argumentos
- Buscar un valor de retorno aquí — eso es la siguiente lección; esta página solo trata entradas
Resumen
- Los parámetros son nombres en los
()de la declaración - Los argumentos son valores que pasas en la llamada
- El orden va de izquierda a derecha — primero con primero, segundo con segundo
- Los defaults rellenan un hueco si la llamada lo omite
- Un hueco sin default se vuelve
undefined - Las actualizaciones de página pueden usar el valor pasado en el mensaje
- Siguiente: return — envía un resultado fuera de la función
🧠 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