[JavaScript] Un poco más sobre variables y funciones

Hola, últimamente he visto como cada vez se desarrolla mucho más en el lado cliente, y no es para menos, JavaScript ha tomado mucha fuerza y ahora tiene características muy buenas, además se ha visto un crecimiento exponencial en los framework/librerías que como base o ha sido construidas sobre JavaScript, sin embargo, este punto tiene algo en contra y es que los desarrollamos estamos dejando de lado la escuelita clásica (JavaScript puro) y nos dejamos seducir por las bondades de esos frameworks, y en un primer vistazo no es posible ver el problema, pero cuando nuestras aplicaciones van creciendo, el manejo de JavaScript no cambia, y llegamos a un punto en donde el ya solo usar un framework con algunos widgets muy cool realmente no aportan a crear aplicaciones escalables.

Ahora, quiero en este post dar una pequeña explicación de algunas particularidades que tiene JavaScript sobre el trabajo con funciones y variables, que aunque al parecer algo muy simple realmente envuelve algunos temas que muchas veces son desconocidos.

Pero antes de iniciar quiero decirles que no soy un experto en JavaScript pero que de verdad espero que este post aclare muchas dudas… y ahora si, menos charla y más acción.

Además, no quiero hacer este post con términos muy técnicos, la idea es dar ejemplos y entender el funcionamiento, ya luego pueden ir más a fondo y revisar la teoría en detalle.

Variables

Bueno este tema puede sonar un poco simple, pero es importante, iniciemos primero con la forma en que podemos declarar una variable:

   1:  var i = 1; //Declaración con var
   2:  x = 2; //Declaración sin var
   3:  alert(i); //Muestra 1
   4:  alert(x); //Muestra 2

Como podemos ver en el ejemplo anterior, no es obligatorio usar var en la declaración, pero existe diferencia? pues si, y mucha, así que vamos a realizar otro ejemplo:

   1:  function Mensaje1()
   2:  {
   3:     var nombre = "Julio Avellaneda";
   4:     email = "julito_gtu@hotmail.com";
   5:  }
   6:   
   7:  function Mensaje2()
   8:  {
   9:      alert(email);
  10:      alert(nombre);
  11:  }
  12:   
  13:  Mensaje1();
  14:  Mensaje2();

Bueno, si miramos el código anterior podríamos pensar que en la función Mensaje2 vamos a obtener un error, ya que las variables email y nombre solamente existen en el contexto de Mensaje1, sin embargo al ejecutar ese sencillo código nos llevamos una gran sorpresa, y es que el alert de email SI esta funcionando (y efectivamente muestra mi correo), pero… ummm como así que funciona?? bueno, pues sencillamente la razón es que cuando se declara una variable sin var el ámbito de esa variable es global.

Les recomiendo que le den un ojo al post del maestro José Manuel Alarcon: Closures en JavaScript: una herramienta muy útil.

Funciones

Bueno, el tema de funciones es bastante extenso, y se que alguna que otra cosita se me quedará por fuera, pero espero los puntos que se traten sean de gran interés.

1. Declaración de funciones

Lo primero a comentar es que existen varias formas de declarar una función, así que miremos el siguiente ejemplo:

   1:  function Mensaje1()
   2:  {
   3:     alert('Funcion mensaje 1');
   4:  }
   5:   
   6:  var fun = {
   7:     Mensaje2 : function(){
   8:          alert('Funcion mensaje 2');
   9:     }
  10:  }
  11:   
  12:  Mensaje1();
  13:  fun.Mensaje2();

Y las dos formas funcionan correctamente, pero que pasaría si ahora cambiamos las líneas 12 y 13 de lugar y las dejamos al inicio? es decir:

   1:  Mensaje1();
   2:  fun.Mensaje2();
   3:   
   4:  function Mensaje1()
   5:  {
   6:     alert('Funcion mensaje 1');
   7:  }
   8:   
   9:  var fun = {
  10:     Mensaje2 : function(){
  11:          alert('Funcion mensaje 2');
  12:     }
  13:  }

En este caso solo funciona correctamente Mensaje1, y para el otro llamado se obtiene el error TypeError: fun is undefined, y la explicación es simple, cuando declaramos una función de forma declarativa (como Mensaje1) dichas funciones son evaluadas por el navegador antes que las demás expresiones, y acá ya nos damos cuenta que realmente la ejecución de JavaScript no es tan lineal como pensábamos.

2. Argumentos en funciones

Bien, ahora toquemos un poco el tema de los argumentos en las funciones, y pues como hemos venido trabajado primero un ejemplo:

   1:  var fun = {
   2:      Suma1: function(num1, num2)
   3:      {
   4:          alert(num1 + num2);
   5:      }
   6:  }
   7:   
   8:  fun.Suma1(5,5);
   9:  fun.Suma1(2,2,2,2,2);

Listo, a simple vista podemos ver que el segundo llamado a la función Suma1 esta algo mal no? estamos enviando más parámetros de los definidos en la función, pero….. si, funciona! y lo hace por que JavaScript no tiene en cuenta los demás parámetros, simplemente los ignora, y si, en mi opinión no es algo que se debería permitir.

Y ahora un ejemplo más:

   1:  var fun = {
   2:      Suma: function()
   3:      {
   4:          var total = 0;
   5:          for (var i = 0; i < arguments.length; i++)
   6:          {
   7:              total += arguments[i];
   8:          }
   9:          alert(total);
  10:      }
  11:  }
  12:   
  13:  fun.Suma(2,2,2,2,2,10);

Bueno ya la cosa esta rara acá, la función no le declaramos parámetros, pero en la llamada si se los enviamos, y este caso es muy bueno para mencionar que en cada función JavaScript podemos acceder al objeto arguments el cual tiene como referencia todos los argumentos enviados a la función, por lo tanto haciendo uso de él podemos fácilmente calcular la suma de los números enviados a la función Suma.

3. Funciones y prototipos

Ahora, vamos a ver un poco acerca de los prototipos, así que vamos con el ejemplo:

   1:  Function.prototype.Multi = function()
   2:  {
   3:     var total = 1;
   4:     for (var i = 0; i < arguments.length; i++)
   5:     {
   6:         total *= arguments[i];
   7:     }
   8:     return total;
   9:  };
  10:   
  11:  var fun = function()
  12:      {
  13:          var total = 0;
  14:          for (var i = 0; i < arguments.length; i++)
  15:          {
  16:              total += arguments[i];
  17:          }
  18:          return total;
  19:      }
  20:   
  21:  var result1 = fun(2,2,2,2); // 8
  22:  alert(result1);
  23:  var result2 = fun.Multi(2,2,2,2); // 16
  24:  alert(result2);

Resumiendo entonces, digamos que con Function.prototype.<…> podemos extender las funciones, podríamos incluso hacer la similitud en la programación al concepto de clase base, donde las clases que heredan de esa clase también heredan sus métodos. Luego haré un post donde solo hablaré de este tema.

4. LLamando funciones

Y ahora vamos a revisar como podemos llamar una función, así que vamos con un ejemplo:

   1:  var Persona = function(nombre, email)
   2:      {
   3:          this.nombre = nombre;
   4:          this.email = email;
   5:          return 5;
   6:      }
   7:   
   8:  var per1 = new Persona('Julio', 'julito_gtu@hotmail.com');
   9:  var per2 = Persona('Juan','juan@hotmail.com');
  10:   
  11:  console.log(per1);
  12:  console.log(per2);

Bueno, acá es importante primero mencionar que estamos usando el operador new, entonces para per1, y gracias al uso de new estamos creando un nuevo objeto con dos propiedades (email y nombre) y en este caso el return no es tenido en cuenta, en cambio para el segundo caso, es decir para per2 solo es tenido en cuenta el return, la siguiente imagen muestra los resultados en la consola de Chrome:

image

Bueno, espero que les gusto el post tanto como a mí escribirlo!

Saludos!

You may also like...

2 Responses

  1. November 5, 2012

    […] [JavaScript] Un poco más sobre variables y funciones […]

  2. December 19, 2012

    […] [JavaScript] Un poco más sobre variables y funciones […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: