Primero de todo y algo que tienes que tener en cuenta, window, es el objeto maximo. Esto quiere decir que a la hora de usar funciones y variables, lo que realmente estamos haciendo es creando metodos o propiedades de este objeto. Es un factor a tener muy en cuenta por esto explica los principales problemas de alguna de estas formas de declarar variables. Ahora si, comencemos.
Hay tres maneras de declarar una variable, al estilo antiguo, antes de ES6 con var o como hoy en dia se suele hacer con let y const
Las principales diferencias que vamos a encontrar entre estas tres residen en las siuientes terminologias.
Vamos a presentarlas una por una , con sus distintas caracteristicas y los problemas que presentan cada una, especialmente var que es de las mas antiguas y trae consigo problemas mas complejos.
VAR
Hablemos entonces primero de la mutabilidad, con esto me refiero a que con var podremos “actualizar una variable”, “re-declararlas” y declarar para posteriormente inicializar(significa darle un valor). Por ejemplo:
--Actualizar Variable
var numero=1;
//podemos modificar el valor tal que
numero=3;
//ahora var cambio su valor de "1" a "3"
--Re-declarar Variable--
var numero=1;
//Se vuelve a declararvar numero='dos'
//En este caso tambien se modifica el valor
--Inicializar--
var numero;
// se crea la propiedad, pero no tiene valor por lo que sera undefined de momento
numero=1;
//ahora que se llama a la propiedad, se le asigna un valor//Quedate con este caso por que es la primera causa de los problemasSCOPE
Traucido del ingles, significa “alcance” o “visibilidad”. Tengamos este factor en cuenta, una variable se crea en el inicio del scope y se borra al final de este (como recurso para tener mas memoria disponible). Ahora hay tres tipos de Scope:
Ahora, var puede ser tanto global como local, dependiendo de donde las creas (window o funcion), pero no es de bloque.
Dejame enseñarte un ejemplo de los scope te var.
var animal='gallina'
function granja=(){
var mascota='perro'
}
window.console.log(animal)
//esta variable existe en el scope global por lo que se mostrara
window.console.log(mascota)
//esta variable existio, pero una vez finalizada su "uso " se elimino del objeto windowHOISTING
Este termino es interesante y facil de entender. Javascript tiene una mania y es que cuando declara una variables o una funcion, va a mover esa propiedad o elemento a lo mas alto, asi es, una vez mas al objeto window. Cuando se declara una variable y no se inicializa, javascript la guardara autamaticamente con el valor de “undefined” en el caso de var. Entonces el termino hoisting es la respuesta a la siguiente pregunta:
¿Que pasa si inicializo una variable despues de declararla? . Con el siguiente ejemplo lo vera mejor:
console.log(animal)
var animal = 'cerdo'//animal sera undefinedPROBLEMAS CON VAR
Dejeme presentarle el siguiente caso, y en funcion de lo que comentamos anteriormente se dara cuenta por que ocurre esto.
var numero = 1;
var contador = 4;
if (contador > 3) {
var numero = 20000;
}
console.log(numero)
//se muestra 20000La variable numero, se declara en el objeto “top” que es window, por lo que se crea la propiedad con ese valor adjunto.
Mas tarde se re-clara esa misma variable dentro de la funtion (quiero que quede claro que no se crea otra propiedad, por que esa ya existe), entonces
java lo que hace es rescribir ese valor, por que la propiedad es la misma. ¿Que hace un objeto cuando se llama a la misma propiedad y le cambiamos el valor?
-Exacto la sobreescibe, por lo que cuando se la llame su valor sera distinto a como hubiesemos creido.
LET
Respecto a let, esta respecto a mutabilidad se puede declarar para luego ser inicializada y cambiar el valor llamando la variable. Pero no se puede
redeclarar dentro del mismo Scope, y no esta vinculada con windows. Es decir se crea dentro de un bloque o en el scope local, solo existira ahi y solo ahi, no ira hacia el objeto “top”, si por ejemplo se declara entre llaves “{}”. Esto soluciona el caso anterior que teniamos con var:
Le voy a presentar dos codigos, el primero relacionado a la solucion respecto al problema con “var” y el segundo tratara el tema del hoisting:
--SOLUCION PROBLEMA CON VARlet numero = 1;
if (true) {
let numero = 200;
console.log(numero);
//ensenia 200, por que ese let no se almacena en windows, solo en la funcion
}
console.log(numero);//ensenia 1,por que en este caso let existe en el global
--QUE PASA CON EL HOISTING--
let saludo = "muy buenas";
let contador = 4;
if (contador > 3) {
let despedida = "Adios";
console.log(despedida);
//Nos dira adios
}
console.log(despedida)
// Busca en window pero no encuentra dicha propiedad por lo que te da error: No esta definidaCONST
Bueno, esta declaracion vino junto “let”, por lo que tiene las mismas propiedades que let comentado anteriormente, pero difieren en que:
-No es mutable
-Se debe inicializar al momento de declara
Basicamente Const esta hecha con la intencion de ser un valor que necesitamos que este ahi en todo momento, sin cambiar a menos que
cambiemos de valor al original.
En conclusion, las principales diferencias que son relevantes a la hora de usar una des de estos tipos de declaracion de variables, es su relacion con el objeto windows, ya que como hemos visto. cuando se encuentran en diferentes scopes, var sera indicada en windows, pero en el caso de “let” y “const” va a depender en funcion si se encuentran en scope global o de bloque.
Espero que les haya gustado este tutorial hablando sobre las diferencias de variables y de como diferentes terminologias muy importantes a la hora de entender java script entran en juego. Sin mas dialcion, si tienen algun tipo de duda no olviden mencionarla, ya que eso nos ayuda a aprender mejor y optimizar la transmision de informacion.
excelente me aclaro muchas dudas