En este POST vamos a ver cómo pasar parámetros a una función JavaScript. Veremos cómo pasar parámetros estáticos y dinámicos.
Primero vamos a repasar conceptos:
¿Qué es una función?
Contrastando la información de W3CSchools y Mozilla una función es un procedimiento que realiza una o varias tareas para calcular un valor, y para que se haga efectivo, hay que llamar la función (con el nombre de la función. Por ejemplo: calculadora()).
¿Qué es un parámetro?
Son valores que se pasan a la función para que pueda operar con ellos. Para una función no es obligatorio pasar valores, ya que se pueden prescindir para hacer un cálculo o mostrar una cadena u otras funciones.
¿Cómo se crea una función en JavaScript?¿Cómo se llama a la función?
A continuación os muestro cómo es la estructura de una función:
function miFuncion(){
/*
Aqui vamos a escribir nuestro código.
*/
}
Para hacer la llamada es muy sencillo, sólo hay que poner el nombre de la función y los paréntesis. Si tenemos parámetros tenemos que incluirlos también. Más abajo te voy a mostrar cómo pasar parámetros de varias formas.
Si de una función queremos que nos devuelva un valor calculado, utilizaremos return (valor). El valor puede ser una variable, operación matemática, lógica…
Cómo pasar un parámetro a una función
En un parámetro podemos mandar cualquier tipo de dato, como un string,números, valores lógicos (true/false), variables e incluso funciones (a estas funciones se les llaman funciones callback). Dentro de la función para referirnos los datos que pasamos, tenemos que llamarlo por el nombre del parámetro. En este caso param1.
Cómo pasar un parámetro a una función
function numeroAlCubo(param1) {
return Math.pow(param1, 3); // El número se indica la exponencial
}
Pasar 2 o más parámetros fijos a una función
A la diferencia de la anterior, podemos añadir más de un parámetro y podemos operar con ellos. En el ejemplo multiplico los dos parámetros y devuelve el resultado mediante el return.
function multiplicadora(param1,param2) {
return param1*param2;
}
Pasar 2 parámetros fijos y el resto variables a una función (rest)
A diferencia de las 2 anteriores, aquí podemos mandar dos variables que van a llevar datos fijos o clave (param1 y param2) y el resto podemos enviar tantos parámetros como deseemos. A este tipo de envío de parámetros es de tipo REST.
Para recorrer los parámetros, JavaScript crea un Array, con lo que utilizaremos la instrucción for.
function sumadora(param1,param2,...paramN) {
var sumadorVariable=0;
for(var i=0;i<paramN.length;i++){
sumadorVariable+=paramN[i];
}
return param1+param2+sumadorVariable;
}
Pasar parámetros ilimitados a una función (spread)
En este tipo de parámetro vamos a mandar sólo parámetros dinámicos. No vamos a depender de ningún parámetro «fijo». A este tipo de parámetros se les conoce como SPREAD.
function sumador(...n) {
var sum=0;
var i;
for(i=0;i<n.length;i++){
sum+=n[i];
}
return sum;
}
Os dejo un breve ejemplo práctico:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function sumador(...n) {
var sum=0;
var i;
for(i=0;i<n.length;i++){
sum+=n[i];
}
return sum;
}
document.getElementById("demo").innerHTML = sumador(10,9,8,7,6,5,4,3,2,1);
</script>
</body>
</html>
Funciones flecha
Dentro de la función, en lugar de escribir function nombreFuncion() podemos sustituir la palabra function por una flecha. Este tipo de funciones se las conoce como función flecha. Os dejo un ejemplo de como sería la equivalencia:
Os dejo un ejemplo para que veáis cómo sería el caso práctico:
// Función convencional
function sumar(a,b){
return a+b;
}
// Ahora vamos a realizar la equivalencia de función flecha:
var sumar = (a,b) => a+b;
¿Qué ventajas tiene la función flecha respecto a la convencional?
- La función es anónima. Es decir, la estructura es como declarar una variable que nos permite reutilarlas las veces que queramos.
- Sintaxis limpia y simple. Cada vez se están utilizando más este tipo de funciones ya que se ahorra bastante código respecto a la convencional. Aunque resulte este tipo de función para chinos, es adaptarse al medio 🙂
Me ha gustado mucho la función flecha, ¿y cómo adapto a lo que hay arriba del POST?
Vamos a reproducir cada ejemplo y los vamos a convertir a funciones flecha:
Cómo pasar un parámetro a una función flecha
var numeroAlCubo = param1 => Math.pow(param1, 3); // El número se indica la exponencial
document.getElementById("demo").innerHTML=numeroAlCubo(5);
Cómo pasar 2 o más parámetros fijos a una función flecha
var multiplicadora = (param1,param2) => param1*param2;
document.getElementById("demo").innerHTML = multiplicadora(6, 3);
En el caso de parámetros dinámicos a una función flecha
No es posible realizarlas con este método.
La función flecha no muestra el objeto arguments (Array de los parámetros que se pasan a la función), por lo tanto si necesitas acceso al mismo no puedes utilizarlas. Ten en cuenta que si la función flecha la declaras dentro de otra función, estarías accediendo al arguments de la función contenedora (si tuviera al menos una). Por eso se dice las funciones flecha utilizan lexical arguments. Es decir, que ven el objeto arguments que esta en el lexical scope. Respuesta recogida en Stackoverflow.
Opcional: Si no queremos pasar parámetros en cualquier tipo de función, debemos de poner sólo los paréntesis.
¿Te ha gustado el artículo?
Te sugerimos que visites el apartado de Javascript y ¡podrás ver más utilidades!
4 comentarios en “4 trucos para pasar parámetros a una función JavaScript”
Hola, muy bueno el post, te pregunto xq he visto el nombre de la función RepetirPalabra() sin parámetros definidos, pero le pasan un parámetro de este modo ‘Hola’.RepetirPalabra() en donde se guarda ese parámetro para usar dentro de la función si la misma no tiene un parámetro definido?. Saludos y Gracias.
Hola Darío,
Lo que se me ocurre a que te refieres es a la anidación de funciones, ya que se tratan así, te paso enlace y accede al apartado de Cierres. Espero que le sirva de ayuda!
Un saludo.
Me gustaría saber cuál es el uso de un parámetro vacío. ¿Por qué es obligatorio escribir? () sólo para escribir. no entiendo la sintaxis. ex:
function atravesar_la_calle(){
console.log(«mira a la derecha,
mira a la izquierda,
cruza»)
}
Hola Samuel!
Gracias por visitar mi blog 🙂
Pues es debido a nivel de sintaxis. Entiendo que al elaborar la función más sencilla tiene que ir con los «requisitos mínimos» y tiene que ser así. Sucede también en otros lenguajes de programación con la estructura de crear una función.