Argumentos en funciones y variables locales y variables globales

Objeto arguments en funciones

El 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:

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

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].

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.

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

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:

5 parámetros:

3 parámetros:

etc.

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.

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:

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:

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

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:

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.

Variables locales y variables globales en funciones

Las variables locales se definen dentro de una función y solo se tiene acceso dentro de la misma función. Una variable local se la define antecediendo la palabra clave var al nombre de la variable.

Luego decimos que x es una variable local que solo se la puede acceder dentro de la función imprimir. Si intentamos acceder a la variable x fuera de la función se produce un error en tiempo de ejecución:

Si bien en la pantalla no se ve el error en un depurador de código se vera el error como lo muestra la imagen de abajo.

Las variables globales son las que definimos fuera de cualquier función. Una variable global tenemos acceso fuera y dentro de las funciones:

Como podemos observar el programa anterior hemos definido la variable global1 e inicializado con el valor 100. Luego dentro de la función podemos acceder para imprimirla y modificarla. Podemos ver luego si la accedemos fuera de la función su valor fue modificado.

Todas las variable globales se convierten en atributos del objeto window, luego podemos acceder a la variable por su nombre o antecediendo el nombre del objeto:

Cuando definimos variables locales dentro de una función tenemos que no olvidarnos de anteceder al nombre de la variable la palabra var, en caso de olvidarnos se creará automáticamente una variable global con dicho nombre:

En el ejemplo superior en la función imprimir se está creando una variable global llamada x. Como podemos ver luego fuera de la función cuando imprimimos x vemos que no produce error y muestra el valor 100. Con solo agregar la palabra clave var vemos que nos muestra un mensaje de error al tratar de acceder a una variable inexistente:

El JavaScript moderno introduce una directiva para salvar este y otros problemas muy comunes. Si activamos modo estricto todas las variables en JavaScript deben declarase sino se produce un error. Veamos como introducimos esta directiva de modo estricto:

La directiva de modo estricto se emplea las palabras claves use strict entre comillas simples o dobles y un punto y coma. Solo los navegadores modernos implementan los análisis de modo estricto.
La razón de disponer la directiva entre comillas y con un punto y coma es para que navegadores antiguos pasen por alto el string (ya que el string no se asigna a nadie el navegador antiguo no lo tiene en cuenta)
Activando el modo estricto luego cuando tratamos de asignar el valor 100 a la variable x se produce un error ya que no se nos permite crear una variable global (esto nos evita problemas de crear variables globales en funciones por error)

Si bien en la pantalla no se ve el error en un depurador de código se vera el error como lo muestra la imagen de abajo.

En la imagen del depurador se ven dos errores esta el nombre del archivo y los numeros (14 y 18) son las líneas de los errores en el código.