Funciones: objeto arguments

Cuando llamamos a una función JavaScript crea automáticamente un objeto llamado "arguments" que almacena los valores que le pasamos a dicha función. También este objeto arguments almacena en una propiedad llamada length la cantidad de parámetros que llegaron. Veamos un ejemplo muy sencillo.

Confeccionar una función que retorne la suma de dos enteros:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  function sumar(x,y)
  {
    var s=x+y;
    return s;
  }

  document.write(sumar(5,3));

</script>

</body>
</html>

Luego podemos resolver esta misma función accediendo al objeto arguments que se crea cada vez que llamamos a una función:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  function sumar(x,y)
  {
    var s=arguments[0]+arguments[1];
    return s;
  }

  document.write(sumar(5,3));

</script>

</body>
</html>

Como podemos observar dentro de la función sumar accedemos al primer parámetro mediante el objeto arguments (con el subíndice 0 accedemos al primer parámetro llamado x) Tenemos dos formas de acceder al primer parámetro de la función : con el nombre x o con arguments[0].

Como podemos observar si debemos sumar dos valores que llegan como parámetro el algoritmo más claro es el primero en lugar que tener que acceder al objeto "arguments", pero veremos que en muchas situaciones el objeto "arguments" nos favorece en la implementación de funciones mucho más complejas y reutilizables.

Problema

Confeccionar una función que reciba un conjunto variable de enteros y nos retorne su suma:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  function sumar()
  {
    var s=0;
    var f;
    for(f=0; f<arguments.length; f++)
    {
      s=s+arguments[f];
    }
    return s;
  }

  document.write(sumar(2,4));
  document.write('<br>');
  document.write(sumar(1,2,3,4,5));
  document.write('<br>');
  document.write(sumar(100,200,300));

</script>

</body>
</html>

Como no sabemos con cuantos parámetros llamaremos a la función sumar no indicamos ningún parámetro. Luego la única forma de acceder a los parámetros es mediante el objeto "arguments" y por medio del subíndice accedemos uno a uno. También el objeto "arguments" tiene una propiedad length que almacena la cantidad de parámetros recibidos por la función.

Esta sintaxis nos permite codificar funciones muy poderosas que se adaptan a muchas situaciones, como vemos luego podemos llamar a la función sumar pasando 2 parámetros:

  document.write(sumar(2,4));

5 parámetros:

  document.write(sumar(1,2,3,4,5));

3 parámetros:

  document.write(sumar(100,200,300));

etc.

Problema

Confeccionar una función que reciba un conjunto de string y genere dentro de la página una lista ordenada (<ol>). La función debe recibir en el primer parámetro el id de un div.

<html>
<head>
</head>

<script type="text/javascript">

  window.onload=iniciar;

  function iniciar()
  {
    generarLista('lista1','uno','dos','tres','cuatro','cinco','seis');
  }

  function generarLista()
  {
    var s='<ol>';
    var f;
    for(f=1;f<arguments.length;f++)
    {
      s=s+'<li>'+arguments[f]+'</li>';
    }
    s=s+'</ol>';
    var elemento1=document.getElementById(arguments[0]);
    elemento1.innerHTML=s;
  }

</script>


<body>
<div id="lista1"></div>
</body>
</html>

Veamos por partes el funcionamiento de este programa. En el body de la página hemos definido un div con id llamado "lista1" sin contenido:

<body>
<div id="lista1"></div>
</body>

En el bloque del script inicializamos la propiedad onload del objeto window indicando la función a ejecutar luego que la página esta completamente cargada:

  window.onload=iniciar;

Es decir que la función iniciar se ejecuta una vez que la página está completamente construida (es decir ya está en memoria el div definido en el body)

La función iniciar es la que llama a la función generarLista pasando como parámetros primero el id del div a cargar y a partir del segundo parámetro en adelante los distintos string a mostrar en cada elemento del <ol>:

  function iniciar()
  {
    generarLista('lista1','uno','dos','tres','cuatro','cinco','seis');
  }

Finalmente la función generarLista que como podemos observar no tiene parámetros explícitos, sino que los accedemos luego mediante el objeto arguments. Disponemos un for que lo inicializamos en 1 ya que el argumento cero tiene el nombre del id del div:

  function generarLista()
  {
    var s='<ol>';
    var f;
    for(f=1;f<arguments.length;f++)
    {
      s=s+'<li>'+arguments[f]+'</li>';
    }
    s=s+'</ol>';
    var elemento1=document.getElementById(arguments[0]);
    elemento1.innerHTML=s;
  }

Mediante el método getElementById obtenemos la referencia del div que llega como parámetro en el arguments[0]. y luego mediante la propiedad innerHTML indicamos todo el código HTML que debe cargarse en el div. En este caso almacenamos en la variable s todas las marcas necesarios para generar la lista ordenada.

Retornar