.
En este artículo trataré de explicar cuales son las propiedades de las variables en JavaScript, así como las convenciones que existen al momento de nombrarlas.
.
Igualmente explicaré las diferencias entre las tres palabras reservadas que se utilizan para declarar variables en JavaScript (var, let y const). Así como también un concepto importantísimo que se conoce como el **alcance **(o ámbito) de una variable (scope en inglés).
.
.
.
…
Una variable es una especie de “contenedor” al que le ponemos un nombre y que nos sirve para guardar algún valor. Este valor puede ser cualquier tipo de dato que soporte el lenguaje de programación (números, strings, booleans, arrays, objetos).
.
Dependiendo del lenguaje de programación la forma de declarar una variable varía, en el caso de JavaScript tenemos que primero usar una de las tres palabras reservadas seguido del nombre de la variable y luego utilizamos el signo “igual” para asignarle un valor.
.
Como mencioné anteriormente puedo asignarle cualquier valor que soporte JavaScript.
.
// Declarando varios tipos de variablevar name = "Pedro"// Stringvar students = 40// Numbervar countries = ["Venezuela", "Colombia", "Perú"] // Arrayvar grades = { Carlos: "B", Paula: "A" } // Objectvar success = true// Booleanvar nothing = null// null.
Si quiero ver que valor está contenido en una variable puedo utilizar conole.log para que se muestre en consola.
.
console.log(students);
// resultado 40.
Una vez una variable es declarada, la misma puede ser consultada o modificada más adelante. Supongamos que declaro una variable con un mensaje secreto que posteriormente quiero cambiar.
.
// Declarando nuestra variable secretMessagevar secretMessage = "pantuflas"
.
// Reasignando variable secretMessage
secretMesssage = "chancletas"
.
console.log(secretMessage)
// Resultado:// "chancletas".
.
.
.
Nombré todas las variables en inglés porque quise. Realmente puedes nombrarlas en español si quieres (evitando las “ñ” y las tildes para ahorrarte dolores de cabeza). El idioma que elijas no es importante. Lo realmente importante es seguir algunas reglas al momento de nombrarlas:
.
Las variables pueden contener letras (a-z), números (0-9), el símbolo de dólar o pesito ($) y pisos o underscores (_)
Si bien el nombre puede contener números, la misma no puede empezar con ningún número
No pueden haber espacios en blancos
No pueden ser ninguna de las palabras reservadas de JavaScript (reserved keywords)
Los nombres de variable son case sensitive, es decir que se diferencian las mayúsculas de las minúsculas (“esto” no es igual a “Esto” que no es igual a “ESTO”)
.
.
.
.
Vendría siendo el alcance que tiene esa función. Se refiere dónde está disponible esa variable para JavaScript. Existen dos tipos de scope: local y global.
.
Las variables globales son las declaradas fuera de los bloques de código, en cambio las locales son las que son declaradas dentro de bloques de código. Voy a escribir algunos ejemplos para que esto sea más entendible:
.
// Declarando variable globalvar vaso = "lleno".
Como vimos las variables pueden ser reasignadas, pero entendiendo el scope de las mismas podemos declarar variables exactamente con el mismo nombre pero sin que una altere al valor de la otra siempre que tengan un scope distinto.
.
// Declarando variable globalvar vaso = "lleno"functionbeber() {
// Declarando una variable localvar vaso = "vacío"console.log(vaso)
}
console.log(vaso)
beber()
console.log(vaso)
// Resultado:// lleno// vacío// lleno.
En este caso la variable vaso dentro de la función no tiene nada que ver con la que está fuera, esto es debido a que el alcance de las variables declaradas con var se extiende hasta las funciones (function scope), esto quiere decir que declaradas dentro de funciones, JavaScript las entiende como variables locales.
.
Ahora que ya entendemos que es el scope es buen momento para introducir a let y a const, ya que una de las razones por las que fueron creadas estas dos nuevas formas de definir una variables es precisamente para tener otro tipo de scope. (let y const están disponibles a partir de ECMAScript 6)
.
Estas variables tienen un alcance de bloque (block scope), que significa que JavaScript las entiende como variables locales cuando están dentro de algún bloque de código. Estos bloques pueden ser funciones como también ciclos o condicionales.
.
.
.
var cafe = true// Declarando variable global con letlet animo = "molesto"if (cofee) {
// Declarando variable local con letlet animo = "feliz"console.log(`Bernardo tomó café, por lo tanto está ${animo}`)
}
console.log(`Bernardo no tomó café, por lo tanto está ${animo}`)
// Resultado:// "Bernardo tomó café, por lo tanto está feliz"// "Bernardo no tomó café, por lo tanto está molesto".
En este caso la variable animo tiene dos tipos de scope. Global al ser declarada fuera del bloque y local al declararla dentro de este. Por esa razón la variable que declaramos al principio no se altera a pesar de que tenemos una con el mismo nombre dentro del condicional.
.
.
.
Si este mismo ejemplo lo hiciéramos con var el resultado sería distinto:
.
var cafe = true// Declarando variable global con letvar animo = "molesto"if (cofee) {
// Declarando variable local con letvar animo = "feliz"console.log(`Bernardo tomó café, por lo tanto está ${animo}`)
}
console.log(`Bernardo no tomó café, por lo tanto está ${animo}`)
// Resultado:// "Bernardo tomó café, por lo tanto está feliz"// "Bernardo no tomó café, por lo tanto está feliz".
En este caso la variable fuera y dentro del bloque de código queda con el mismo valor, ya que JavaScript no detecta el var dentro del bloque de código como una variable local, por lo que hace es reasignar la variable global que ya teníamos definida.
.
Esto es un comportamiento que tienen las variables declaras con var, las mismas pueden ser redeclaradas, que no es lo mismo que reasignarlas. Me explico un poquito mejor con un ejemplo:
.
// Declarando variable globalvar variable = "Soy una variable"console.log(variable)
// Reasignando variable
variable = variable + " modificada"// En este caso modifico el contenido de la variable que ya había declaradoconsole.log(variable)
// Redeclarando variable globalvar variable = "¡Me redeclararon!"// En este caso no me interesa el contenido de la variable, lo sobreescribo por algo nuevoconsole.log(variable)
// Resultado:// "Soy una variable"// "Soy una variable reasignada"// "¡Me redeclararon!".
Si tratara de hacer esto mismo con let obtendría un error, ya que otra diferencia de let y const respecto a var es que las variables declaradas con cualquiera de esas dos palabras reservadas no pueden ser redeclaradas (aunque en el caso de let si puedo reasignarlas):
.
// Declarando variable globallet variable = "No me puedes reasignar"// Reasignando variable global
variable = variable + ", lero lero"// Esto puede hacerse sin ningún problema// Tratando de redeclarar variablelet variable = "Claro que sí puedo"console.log(variable)
// Resultado// SyntaxError: redeclaration of let variable.
Las variables declaradas con const también tienen block scope, por lo que pueden llamarse igual que cualquier variable global sin alterar su valor y no pueden ser redeclaradas. Pero la diferencia que tienen conlet es que tampoco puedo reasignarlas.
.
Como su nombre lo indica constse utiliza para declarar valores constantes, que no queremos que cambien nunca.
.
.
Ya que tenemos claro como funcionan las variables en JavaScript, vamos a repasar las diferencias entre estas tres formas de declarar una variable:
.
.
.
.
let, todo lo que haces con var, y además evitas ciertos comportamientos inesperados. Así que es mejor trabajar con let, sin embargo interactuarás con muchísimo código antiguo cuyas variables están declaradas todas con var, así que es bueno que siempre tengas clara cuales son las diferencias.
Gracias por esto! Te invito a ver la clase de qué es una variable.
Aquí pueden ver más sobre diferencias entre variables y constantes.