4 trucos para pasar parámetros a una función JavaScript

Alfredo
Sígueme!
Pasar parámetros JavaScript
Cómo pasar parámetros en JavaScript

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.

Os dejo un breve ejemplo práctico:

function sumador(...n) {
    var sum=0;
    var i;
    for(i=0;i<n.length;i++){
      sum+=n[i];
    }
    return sum;
}

<!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>

Ampliación: Otra manera de llamar a una función

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.

Alfredo

Desarrollador web de profesión (.NET, jQuery, JavaScript y SQL Server). Amante del fútbol y los videojuegos. Escribo en este blog sobre temas de programación que me parecen interesantes y que quiero compartir con todo el mundo.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: