JavaScript desde cero (2): Variables javascript

Continuamos con esta segunda parte de los tutoriales para aprender javascript a nivel básico, ¡vamos con las variables javascript!, abarcando los conceptos más recientes de ECMAScript 6.

Variables javascript

Las variables en programación siguen una lógica similar a las variables que usamos para las matemáticas.

Una variable se utiliza para almacenar y hacer referencia a otro valor.

Al igual que en las matemáticas no se pueden definir ecuaciones y fórmulas complejas sin variables, en programación pasa lo mismo, no se podrían hacer programas potentes sin las variables.

Sin variables, un script que suma dos números podría escribirse como:

El script de arriba no sirve de mucho, ya que sólo sirve para el caso en el que el primer elemento de la suma sea el 2 y el segundo elemento sea 3. En cualquier otro caso, el script obtiene un resultado incorrecto.

No obstante, el programa se puede rehacer usando variables para guardar y referirnos a cada número:

Los elementos n_1 y n_2 son variables que almacenan los valores que utiliza el programa. El resultado se calcula siempre en función del valor almacenado por las variables, por lo que este script funciona correctamente para cualquier par de números indicado. Si se modifica el valor de las variables n_1 y n_2, el script sigue funcionando correctamente.

 

 

Declaraciones de las variables

Hay tres tipos de declaraciones en javascript:

1) Con la palabra reservada var

Esta sintaxis puede ser usada para declarar tanto variables locales como globales (más adelante lo explicamos).

El ejemplo anterior se puede realizar en JavaScript de la siguiente manera:

La palabra reservada var se debe indicar solamente al definir por 1ª vez la variable, a esto se le llama declarar una variable. Cuando se utilizan las variables en el resto del script, solamente es necesario indicar su nombre.

En el ejemplo anterior estaría MAL hacerlo así:

Cuando declaramos una variable y le asignamos un valor, se dice que la variable ha sido inicializada.

En JavaScript no es obligatorio inicializar las variables, ya que se pueden declarar por un lado y asignarles un valor posteriormente.

Por ejemplo el código anterior se puede hacer de esta otra forma:

Una variable declarada usando var o let sin asignarle un valor inicial tiene el valor undefined.

La variable resultado no está declarada, por lo que JavaScript crea una variable global (más adelante lo explico) y le asigna el valor correspondiente.

De la misma forma, también sería correcto el siguiente código:

En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.

2) Con la palabra reservada let (novedad de ECMAScript6)

Esto se explica más abajo. Ya que primero es necesario que comprendas el concepto de ámbito de las variables.

3) Con la palabra reservada const (novedad de ECMAScript6)

La palabra reservada const se usa para declarar constantes en JavaScript.

Antes de javascript6 los programadores se veían obligados a crear unas «pseudo constantes» estableciendo el nombre de la variable en mayúscula: var NOMBRE_CONSTANTE.

Y por supuesto, dando por hecho que nadie modificará esa variable posteriormente, algo que se podía hacer sin problemas en JavaScript 5.

Ahora con const (y como debe ser en las constantes), ya no variará el propio valor por mucho que se intente modificar.

Por ejemplo:

Recuerda que no puedes declarar una constante con el mismo nombre que una función o que una variable en el mismo ámbito:

 

 

 

Ámbito / scope de una variable

Las variables tienen un ámbito o scope en inglés (su alcance, contexto) . En resumen es la zona de la aplicación donde se define la variable y la visibilidad que tiene ésta.

El contexto al que se asocian las variables puede parecer bastante arbitrario en JavaScript… ¡sobre todo si vienes de Java!

Por defecto, cuando definimos una variable con la palabra reservada var, su visibilidad viene marcada por la ‘closure’ (function(){…}), en que se encuentra.

Y las closures en este lenguaje las delimitan las funciones.

Como puedes ver, si preguntamos por bar dentro de la función la consola nos devuelve el valor correspondiente. Si lo hacemos desde fuera, obtenemos un error por no estar definida la variable.

Nada nuevo bajo el Sol, sin embargo este otro caso puede no ser tan familiar para ciertos desarrolladores:

En el ejemplo de arriba, la variable x que hemos usado como contador, trasciende más allá del bucle para continuar existiendo fuera de él. En términos de Javascript tiene sentido ya que como hemos dicho, las closures, las marcan las funciones y en un bucle for no hay función. Sin embargo, desde un punto de vista de arquitectura del software, no tiene lógica que la variable x del bucle siga existiendo más allá de éste, contaminando el contexto global. Eso veremos como combatirlo con let.

Para simplificar, diremos que en javascript tenemos variables globales o locales:

Variables globales

Una variable global (javascript global variable) sería aquella que declaramos fuera de una función (fuera del ámbito), porque está disponible para cualquier otra parte del código y se puede usar en toda la aplicación.

Ejemplo de variable global:

A una variable global puede accederse desde el contexto de la aplicación y también desde cualquier función.

 

Variables locales

Una variable local es la que declaramos dentro de una función (pertenece a un ámbito que no es el global), se llama así porque solo está disponible dentro de la función, es decir, sólo puede accederse a ella desde el contexto de ese ámbito.

Ejemplo de lo que pasa si queremos usar una variable local en el ámbito global del programa:

Para que poder acceder a una variable dentro de una función desde el scope global, debemos crear esta variable sin la palabra reservada var:

Reglas para declarar el nombre de una variable (identificador)

El nombre de una variable es único y se le conoce como identificador. Debe cumplir estas normas:

• Pueden contener letras, dígitos, guiones y el símbolo del dólar ($)
• Deben comenzar con una letra
• También pueden comenzar por $ y _(guión bajo)
• Se diferencia mayúsculas y minúsculas
• No se pueden usar palabras reservadas como nombre de variable

Por tanto, las siguientes variables tienen nombres correctos:

Por otro, las siguientes variables tienen identificadores incorrectos:

 Controlando el scope de las variables declarándolas con let

Como explicamos antes, en los bucles o condiciones, podemos declarar variables temporales y serán visibles desde fuera de esa sentencia.

Observa este código de abajo:

Como puedes ver, si declaramos una variable dentro de una sentencia de bloque (un bucle for o un condicional if por ejemplo) se puede acceder desde fuera globalmente a esta variable, al contrario de lo que ocurre cuando declaramos esa variable dentro de una función (function).

Este comportamiento cambia, cuando usamos la declaración let introducida en ECMAScript 6.

Con let declaramos variables para controlar mejor su propagación. En principio es bastante simple de entender, simplemente evita que una variable sea visible cuando no debe como ocurre con var.

let permite asignar valor a nuestras variables con visibilidad / validez únicamente dentro del contexto (llaves {}) en el que se ha definido.

Esto significa tanto una mejor optimización del código como un uso más eficiente del recolector de basura del intérprete Javascript.

 

 

Trucos y posibilidades de declarar variables

Realizando múltiples declaraciones

Tanto con var como con let podemos encadenar múltiples asignaciones de variables separándolas por comas

Declaraciones a prueba de bomba

Dado que en Javascript se puede asignar como valor cualquier otro objeto, todo lo que sigue a continuación es perfectamente válido:

 

Prioridad de las declaraciones

Una variable definida dentro de un contexto con let tiene preferencia sobre una variable externa con igual nombre:

 

Aquí vemos que aunque la variable ‘jedi’ se ha definido fuera del bloque if como global, al redefinirse dentro de su contexto léxico con let, su nuevo valor tiene preferencia. Una vez salimos de las llaves, volvemos a su valor dentro del contexto global.

 

Una última curiosidad: el Hoisting

Las variables JavaScript pueden hacer referencia a una variable declarada más tarde, sin obtener un error. Este concepto es conocido como hoisting, es decir, una variable declarada se «eleva» o «sube» a la parte superior de la función (closure) en la que se encuentra, independientemente de donde la declaremos:

Fijaros, aunque imprimo la variable  ‘saludo’ antes de declararla, Javascript no da un error indicando que la variable no está definida, sino que reporta que no tiene valor… Esto es así porque, por detrás, el intérprete está reescribiendo el código anterior de esta manera:

Javascript «se fija» en que hay una declaración de una variable dentro de la función y, antes de ejecutarla, «eleva» o sube la declaración de esta variable hasta arriba del todo, aunque no le dé el valor hasta que llegue al punto del código en el que nosotros indicamos la declaración. Por eso, cuando el console pregunta por saludo, realmente si está definida, aunque no tiene valor. Esta peculiar forma de actuar de Javascript es lo que llamamos Hoisting.

¿Y qué pasa si uso let para declarar la variable? Pues que el hoisting se conserva con let continuamos teniendo este fenómeno.

 

Bueno, esto es todo lo que podemos decir de las variables javascript, si consideras que se puede añadir o corregir algo no dudes en aportarlo con un comentario. Nos vemos en la tercera entrega de JavaScript desde cero.