Las variables pueden declararse en Javascript de 3 maneras, usando:

• VAR

Estas variables se pueden modificar. La palabra clave var sólo debe usarse en código escrito para navegadores más antiguos.

Ejemplo:

var x = 5;
var y = 6;
var z = x + y; // z almacena el valor 11

El ámbito, significa dónde están disponibles estas variables para su uso. Las declaraciones var tienen un ámbito global o un ámbito de función/local.

El ámbito es global cuando una variable var se declara fuera de una función. Esto significa que cualquier variable que se declare con var fuera de una función está disponible para su uso en toda la pantalla.

Tiene un ámbito local cuando se declara dentro de una función. Esto significa que está disponible y solo se puede acceder a ella dentro de esa función.

Ejemplo:

var saludar = "Hi, hola";
function greeting() {
   var hola = "hola";
}

Analizamos el ejemplo

La variable saludar tiene un ámbito global porque existe fuera de la función mientras que la variable hola tiene un ámbito local. Así que no podemos acceder a la variable hola fuera de la función. Si intentáramos acceder a la variable hola desde fuera nos mostraría el siguiente $\color{red}error$:

Uncaught ReferenceError: hola is not defined 
 at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-bae5c6e6-d7d8-540d-5175-f81cee09692c:6

Este es el ejemplo que muestra el error:

var saludar = "Hi, hola";

function greeting() {
  var hola = "hola";
}
console.log(hola); // error: hola is not defined

NOTA: Las variables con var se pueden volver a declarar y modificar.

Vemos aquí dos posibles tipos de declaración y modificación:

var saludar = "Hi, hola";
var saludar = "dice Hola";
console.log(saludar); // Devuelve "dice Hola" 

var saludar = "Hi, hola";
saludar = "dice Hola";
console.log(saludar); // Devuelve "dice Hola" 

Hoisting es un mecanismo de JavaScript en el que las variables y declaraciones de funciones se mueven a la parte superior de su ámbito antes de la ejecución del código. Esto significa que si hacemos esto:

console.log (saludar);
var saludar = "dice hola"

Se interpreta de la siguiente manera:

var saludar;
console.log(saludar); // saludar is undefined
saludar = "dice hola"

Por lo tanto las variables con var se elevan a la parte superior de su ámbito y se inicializan con un valor de undefined.

Existe un problema que viene con var.

Ejemplo:

var saludar = "Hi, hola";
var contador = 5;
if (contador > 3) {
  var saludar = "dice Hola"; 
}
console.log(saludar) // "dice Hola"

Analizamos el ejemplo

Si el $\color{blue}contador >3$ devuelve true, $\color{blue}saludar$ se redefine con $\color{blue}dice Hola$. Si eres consciente de que quieres hacer esto redefinir $\color{blue}saludar$ esto no es un problema, sólo se convertirá en un problema cuando no te des cuenta de que la variable saludar ha sido definida antes.

Si has utilizado $\color{blue}saludar$ en otras partes de tu código, puede que te sorprenda la salida que puedes obtener. Esto probablemente causará muchos errores en tu código. Por eso son necesarios let y const.

• LET

Se definen valores que se pueden modificar.

Let es una mejora de las declaraciones var. También resuelve el problema con var que acabamos de comentar en la sección anterior.

Ejemplo:

const price1 = 5;
const price2 = 6;
let total = price1 + price2; // total almacena el valor 11

Las variables let tienen un ámbito de bloque. Un bloque es un trozo de código delimitado por {}. Todo lo que está dentro de llaves es un bloque.

Así que una variable declarada en un bloque con let solo está disponible para su uso dentro de ese bloque.

Ejemplo:

let contador = 5;
if (contador > 3) {
  let saludar = "dice Hola"; 
  console.log(saludar) // "dice Hola"
}
console.log(saludar) // "saludar is not defined"

Vemos como en este último ejemplo al intentar llamar a saludar fuera del bloque nos muestra el siguiente $\color{red}error$:

Uncaught ReferenceError: saludar is not defined 
 at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-064ef325-5abd-d4d7-4c34-efa834c98250:6

NOTA: Además let puede modificarse pero no volver a declararse.

Al igual que var, una variable declarada con let puede ser actualizada dentro de su ámbito. A diferencia de var, una variable let no puede ser re-declarada dentro de su ámbito. Así que mientras esto funciona:

Ejemplo:

let saludar = "Hi Hola";
saludar = "dice Hola";

esto devolverá un error:

Ejemplo:

let saludar = "Hi Hola";
let saludar = "dice Hola"; // error: Identifier 'saludar' has already been declared

NOTA: Una misma variable se puede definir en diferentes ámbitos. Por este motivo let sea una mejor opción que var. Cuando se utiliza let, no hay que preocuparse de sí se ha utilizado para una variable antes, puesto que una variable solo existe dentro de su ámbito.

Además, como una variable no puede ser declarada más de una vez dentro de un ámbito, entonces el problema discutido anteriormente que ocurre con var no sucede.

Ejemplo:

let saludar = "Hi Hola";
if (true) {
  let saludar = "dice Hola";
  console.log(saludar); // "dice Hola"
}
console.log(saludar); // "Hi Hola"

Al igual que var, las declaraciones let se elevan a la parte superior. A diferencia de var que se inicializa como undefined, la palabra clave let no se inicializa. Así que si intentas usar una variable let antes de declararla, obtendrás un Reference Error.

• CONST

Estas variables mantienen valores constantes y al igual que las let no se pueden volver a declarar.

Ejemplo:

const x = 5;
const y = 6;
const z = x + y; // z almacena el valor 11

Las variables const tienen un ámbito de bloque. Un bloque es un trozo de código delimitado por {}. Todo lo que está dentro de llaves es un bloque.

Solamente se puede acceder a las declaraciones const dentro del bloque en el que fueron declaradas.

IMPORTANTE: Una variable declarada con const dentro del mismo ámbito no se puede actualizar ni volver a declarar. Este comportamiento es algo diferente cuando se trata de objetos declarados con const. Mientras que un objeto const no se puede actualizar, las propiedades de este objeto sí se pueden actualizar.

Ejemplo:

const saludar = {
  mensaje: "Hi Hola",
  contador: 5
}

Para modificar haremos:

saludar.mensaje= "dice Hola";

Recordar que esto otro generaría un error:

saludar = {
  palabras: "Hola",
  contador: "cinco"
} // error:  Assignment to constant variable.

Al igual que let, const las declaraciones const se elevan a la parte superior, pero no se inicializan.

• Se considera una buena práctica de programación declarar siempre las variables antes de su uso.
• Utilice siempre const si el valor no debe cambiarse.
• Utilice siempre const si no se debe cambiar el tipo (matrices y objetos).
• Solo usa let si no puedes usar const.
• Utilice var únicamente si DEBE admitir navegadores antiguos.

• Las declaraciones var tienen un ámbito global o un ámbito local, mientras que let y const tienen un ámbito de bloque.
• Las variables var pueden ser modificadas y re-declaradas dentro de su ámbito, mientras que las variables let pueden ser modificadas, pero no re-declaradas; y las variables const no pueden ser modificadas ni re-declaradas.
• Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables var se inicializan con undefined, let y const no se inicializan.
• Mientras que var y let pueden ser declaradas sin ser inicializadas, const debe ser inicializada durante la declaración.

📚REFERENCIAS:

https://cybmeta.com/var-let-y-const-en-javascript

https://www.freecodecamp.org/espanol/news/var-let-y-const-cual-es-la-diferencia/