Bitacora #1: Funciones y scope en javascript

Para comenzar con la bitácora, me pareció innecesario hablar sobre que es javascript, como se ejecuta y cosas básicas sobre su sintaxis.
Es que de hecho, la mayoría de los desarrolladores web, sabemos que posee una sintaxis basada en C, que es un dialecto de la especificación ECMAScript y que se usa para hacer efectos raros en las páginas web… Si ya se, es prácticamente un cliché decir que javascript es mucho más poderoso que eso, teniendo ejemplos como Twitter, Facebook, Gmail y un largo etcétera, creo que ya no hace falta aclararlo.
Lo cierto es que durante mucho tiempo la mayoría simplemente buscaba en Google como hacer algo en particular sobre Javascript, cambiaba un par de cositas para adaptarlo a su necesidad y decia ‘Tengo que aprender javascript algún día’. Ese ‘algún día’ llego hace rato y hoy es difícil pensar un sitio o un sistema web que no lo utilice.
Es quizás por esto que mucha gente no entiende exactamente como se utiliza Javascript y por lo que muchas de sus capacidades como lenguaje, en el sentido estricto de la palabra, están subestimadas.
Por ello, elegí comenzar a escribir sobre los conceptos básicos que en mi opinión, hacen especial a javascript

Funciones y scopes

Las funciones en javascript son incluso más importantes que en otros lenguajes dado que son el único delimitador de contexto que tenemos a diferencia de C++ o Java en donde las variables tienen alcance solamente en el bloque en donde fueron definidas.

En el ejemplo, definimos una variable a en el contexto global, dentro de una función creamos una variable del mismo nombre a la cual le asignamos un valor. Ejecutamos la función y comprobamos que la variable a, tal y como es de esperarse, no fue modificada.
Sin embargo, dentro del bloque if, creamos una nueva variable a, le asignamos un valor y fuera del bloque, la variable continua teniendo ese valor. Como dije anteriormente, el único scope en javascript son las funciones y el scope global.

Funciones anónimas

Otra cosa interesante de javascript, es la posibilidad de crear funciones anónimas. Con ellas, podemos hacer dos cosas (en principio); asignarlas a una variable e invocarlas como una función común:

O bien, decirles que se autoejecuten, de la siguiente manera:

Esto último, es muy útil, no solo nos permite simular bloques para solucionar el problema del scope que mencionamos antes, si no que sirve para solucionar un problema bastante común e incluso visto en algunos frameworks famosos y es que, cualquier variable que definamos fuera de una función, se encuentra en el scope global. De modo que es muy común que diferentes scripts sobrescriban variables por estar definiendo todas en el contexto global.
Una solución a esto, es la de encerrar todo nuestro código en una gran función anónima que se autoejecute y solo exponer aquellas variables estrictamente necesarias y de esta forma simular espacios de nombres en nuestros scripts.
Un ejemplo práctico de esto, lo podemos ver en el código fuente del framework jQuery

Como vemos, al incluir jQuery en nuestro sitio web, se ejecuta una gran función anónima dentro de la cual, se crea una variable con toda la funcionalidad del framework y luego se la asigna a una propiedad del objeto window.
Para no entrar en mucho detalle simplemente tenemos que saber que dentro de un browser, el objeto window define nuestro contexto global. Es decir, jQuery en el contexto global es el mismo objeto que window.jQuery.

De esta forma, la única colisión de nombres posible es que haya otro objeto llamado jQuery (o $) dentro de window.

Nota 1: El $ en window.$ no es ni más ni menos que un identificador para una variable cualquiera. Es exactamente lo mismo usar jQuery o $, no posee ningún poder otro poder mágico.

Nota 2: Es recomendable usar jQuery en lugar de $, ya que este último es utilizado por otros frameworks y podemos tener efectos no muy deseados si tratamos de trabajar con ellos.

Conclusión

Las funciones en javascript son el único delimitador de scope que tenemos, esto podría resultar un grave problema ya que cualquier identificador que definamos fuera de una función puede colisionar con otro definido en otro script. Es por esto que es una buena práctica encerrar todo nuestro script en funciones anónimas que se autoejecuten y exponer (asignándolos como propiedades del objeto window) solamente aquellos identificadores imprescindibles.
Para cerrar, podemos decir que en javascsript las funciones son objetos, pero eso mejor lo vemos mañana.

Antes de cerrar, quiero comentar que pueden encontrar el estado actual del juego que comente en el post anterior en https://github.com/tehsis/Gorillas.js
Por lo pronto, estuve trabajando más que nada en crear un marco de trabajo para solucionar algunos problemas que vamos a ver más adelante.