JavaScript 1 (var | let | const)

 

A una variable var podemos cambiarle su valor en cualquier momento durante la ejecución de nuestro programa

//var vs let vs const
var edad = 10
var edad = 20
console.log(edad)  //en la consola veremos que su valor es 20

Esto tiene el problema de que cuando tenemos mucho código y ya hemos declarado muchas variables, podemos sin querer repetir el nombre de una variable y darle un valor distinto sin darnos cuenta, lo cuá nos dará muchos dolores de cabeza.

Para solucionar esto apareció el tipo de variable let, que no me permite declarar dos veces la misma variable:

let tuedad = 20
let tuedad = 30   //Esto me dará error en la consola Uncaught SyntaxError: Identifier 'tuedad' has already been declared
 console.log(tuedad)
 

Pero cuidado let si que nos permite modificar su valor, solo debo quitar el let y puedo cambiar el valor de la variable:

let tuedad = 20
 tuedad = 30   //Esto me dará error en la consola Uncaught SyntaxError: Identifier 'tuedad' has already been declared
 console.log(tuedad)

Ahora en la consola veremos que tuedad vale 30

Sigamos entendiendo var, veamos el siguiente ejemplo:

var edad = 10
 
if(true){
    var edad = 20
    console.log(edad)
}
 
console.log(edad)

Como podemos ver, dentro de un if, cambiamos el valor de edad, si hacemos console .log dentro del if veremos que edad ha cambiado su valor inicial de 10 a 20, y si hacemos otro console.log fuera del if, vemos que el valor sigue siendo 20. 

Podría darse el caso de que nostros quisiéramos modificar el valor de la variable edad únicamente dentro del condicional pero que fuera de él, eda siguiera valiendo 10 como declaramos al principio.

En este caso usaríamos let del siguiente modo:

let edad = 10
 
if(true){
    let edad = 20
    console.log(edad)
}
 
console.log(edad)

Ahora edad vale 20 sólo dentro del condicional, y 10 fuera de él:

Figura 1. Salida por consola del código anterior

En realidad lo que está ocurriendo es que edad dentro del if solo existe ahí en scope del condicional, una vez que el flujo sale esa edad muere y la edad de fuera del if la que vale 20 es la única que existe.

CONSTANTES

El ejercio anterior funcionaría igual con const, es decir las constantes también viven dentro de un scope:

const edad = 10
 
if(true){
    const edad = 20
    console.log(edad)
}
 
console.log(edad)

Entonces const y let funcionan de manera similar y viven dentro de los scopes. Const tampoco me permite declarar dos veces la misma variable, como let

const edad = 10
const edad = 20

 si hacemos esto el resultado es el mismo que si lo hiciéramos con let, error:

Figura 2. Salida por consola del error de declarar dos veces la misma constante

La diferencia entre let y const es que con let podíamos sobreescribir una variable, con const no podemos ni siquiera hacer esto.

const edad = 10
edad = 20

 esto nos arrojaría error. La única excepción es que si tenemos un array, podemos moficiar el valor del array con el método push.

const arrayNumero = [10, 20, 30]
arrayNumero.push(40)
console.log(arrayNumero)

Esto sucede igual con los objetos.

const persona = {
    nombre: 'Juan',
    edad: 40
}
persona.edad = 21
console.log(persona)  //Ahora juan tiene 21

 

Figura 3. Salida por consola de modificar una constante mediante las propiedades de objeto.

Estas son las principales diferencias entre var, let y const. Por lo general no usaremos var porque let lo está reemplazando casi por completo ya que mejora a var.