var, let, const... or nothing in Javascript

Summary for those who do not want to read the whole explanation:

• constdefines constants, but if we are not careful they can be modified. It has block scope, like let.
• vardefines variables with a function scope (the current context).
• letdefines variables with a block scope and from the line on which they are declared.
• If we don't declare an identifier, it will be created as a global variable unless our code is declared "strict".

const identificador = ...

Create a constant . As in other languages ​​such as Java or C#, if the constant is an object , its attributes are modifiable , so we must be careful with what we do:

function fallaVariableEntera() {
  const k1= 5;
  console.log(k1);
  k1=6;
  console.log(k1);
}
function fallaCreandoObjeto(){
  const k1 = {}
  k1.hola = 'mundo';
  k1 = {}
  console.log(k1);
}
function funciona() {
  const k1={};
  k1.hola='mundo';
  console.log(k1.hola);
}

funciona();
try{
  fallaVariableEntera();
}catch(err){
  console.error(`fallo cambio de valor const =>${err}`)

}
try{
  fallaCreandoObjeto()
}catch(err){
  console.error(`fallo creando un objeto const =>${err}`)

}

var identificador ...

Javascript is a bit special for certain things and this is a good example of its oddities: the variable can be declared when using it, at the beginning of our code or at the end; it won't really matter because the interpreter will "hoist" the declaration to the start of the current scope/context (this is called hoisting and it also affects function declarations). The scope is always function, not block :

function ejemplo() {
// la declaro abajo, pero el compilador pondrá la declaración aquí, manteniendo la asignación en el mismo sitio
   a='hola mundo';
   console.log(a);
   var a=6;
   console.log(a);
   
   if (a===6) {
    var b=4; 
   }
   console.log(b); //se declaró en un if, pero su alcance es toda la función
}

ejemplo();

Also, it doesn't matter if we declare it multiple times, the extra declarations will be ignored:

var a=4

var a=5;

console.log(a)

The behavior of the values ​​of a variable used with closures and asynchronous callbacks often confuses inexperienced programmers, I give an example and how to solve it:

function print(c) {
  console.log(c);
}

//generamos una función con un valor fijado de antemano
function generador(c) {
  return function () {
    print(c);
  }
}

for (var i=0;i<5;i++) {
  setTimeout(function () { print(i);});
}

for (var i=0;i<5;i++) {
  setTimeout(generador(i));
}

let identificador = ...

And we come to the latest Javascript novelty, which behaves in a similar way to what a variable declaration is in other languages ​​such as Java or C: the variable can only be used from its declaration and its scope is local to the block , not to the function :

function funciona() {
  let a='hola';
  console.log(a);
}

function falla() {
  a='hola';
  console.log(a);
  let a;
}

function fallariaTambien() {
  let a=1;
  if (a==1) {
    let b=2;
  }
  console.log(b);
}

funciona();

//se declara una nueva instancia de i para cada iteración!! el problema que teníamos con var desaparece :)
for (let i=0;i<5;i++) {
  setTimeout(()=>console.log(i));
}

try {
  falla();
} catch(e) {
  console.log('Capturado',e.toString());
}
try {
  fallariaTambien();
} catch(e) {
  console.log('Capturado',e.toString());
}

Unlike var, no duplicates are allowed:

let a=4;

let a=5;

console.log(a)

And what happens if we use an identifier without declaring it? Well, we have two scenarios: Javascript "normal" and Javascript "strict"

In the first the variable is created as an attribute of the global object and in the second case there is a compilation error, warning that the variable has not been declared.

function normal() {
  hola='hola';
}

function estricta() {
  'use strict'; 
  // esto indica al intérprete que funcione en modo estricto: todo ha de estar definido o no funcionará
  fallo='esto falla';
}

normal();

console.log(window.hola);

estricta()

This example demonstrates both scenarios, and also helps answer the question "What is global in Javascript?" If we're running in a browser, the global object is always window. If we're running the code in NodeJS, the global object is global.

But beware, windowit is not the entire browser window, but the current tab. This is due to the fact that until the arrival of Firefox there were no tabs and each page that we opened in a browser forced us to have a new window open. For security we cannot share variables between different tabs.

var will declare a local variable, i.e. if you declare

function miVar() {
  var x = 0;
}

x will only have scope inside myVar function, if you declare at the beginning of all js var x = 0;outside of any function it will have scope in all js.

If you don't put var you declare a global variable, now what is the difference between declaring a global variable and a local variable but in all the js? That if you put it var x = 0;at the beginning of the js it will only have scope in the current js, if you declare it global it will have scope in all the js that are declared in the html. That is, if I declare in a js I x = 0;can use the variable in another js xand it will have the value of 0

Const could be as a global variable just like x = 0, but the big difference is that since it is a constant it cannot be redeclared, that is, if you put const x = 0;it, you cannot later put x = 2 in a function.

As this page explains about it in const, it can be changed in cases of array, that is, fill it or remove elements https://mathiasbynens.be/notes/es6-const

Let is used to declare a bit more local variables, as this answer explains https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable

practically var takes the parent block so to speak, if you use a let in a for inside a function

function varExp(){
  for( let i = 0; i < 5; i++ ) {

    }
}

let will only be available inside the for, if you do it with a var, it will be in the whole function

In the early days of JavaScript, var was the only way a variable could be created. Much later let and const were born with the EcmaScript 6 standard.

var-characteristics

It can be reset.

var name = 'Andy'
var name = 'AndyGeek'

It can be reassigned.

var name = 'Andy'
    name = 'AndyGeek'
console.log(name)   // AndyGeek

Its reach is global.

if(true){
    var name = 'andy'
}
else{
    name = 'andygeek'
}
console.log(name)

This would also allow us to create var variables with the same name within multiple if or other nested structures. Even by its scope, if we execute the following code, we will not get any errors.

console.log('My name is ' + name)
var name = 'Andy'
// My name is undefined

This is not at all intuitive, which could cause us problems when programming. So the advice is not to use var .

Characteristics of let

Cannot reset.

let name = 'Andy'
let name = 'AndyGeek'
// Mostrará un error

It can be reassigned.

let name = 'Andy'
    name = 'AndyGeek'
console.log(name)   // AndyGeek

Its range is block.

if(true){
    let name = 'andy'
}
else{
    name = 'andygeek'
    // El compilador no reconoce name
}
console.log(name)

Characteristics of construction

Cannot reset.

const name = 'Andy'
const name = 'Andygeek'
// Obtendremos error al ejecutarlo

It cannot be reassigned. Being a constant, this is its main characteristic. We cannot change the entire element of our constant.

const name = 'Andy'
      name = 'AndyGeek'
// Obtendremos error al ejecutarlo

It is not immutable. We can change the properties of the constant element, but not the whole element. We will explain this by means of an object.

const people = {
name: 'Andy'
}
console.log(people.name)    // Andy
people.name = 'AndyGeek'
console.log(people.name)    // AndyGeek

For the use of operations on functions.

You should use the consts inside the functions if they are values ​​that are only used as a reference, if this value is not going to change in the functions and the let you use them when you need to change a value. Both const and let are widely used in functions, either for code readability or the use of a counter or accumulator variable.

function myFunction() {
    const list = [0,10,2,3,5,7,14,2,7];//Referencia
    let count = 0;//contadora

    for (var i = list.length - 1; i >= 0; i--) {
        if (list[i] % 2 != 0){
            count++;
        }
    }

    return count;
}

for exports

Normally when importing a namespace (file, library, etc), it is required to expose certain functions, variables or constants and these will not change in the application, therefore they would be const .

//normalmente en el un archivo de constants.js
export const MAIN_COLOR = #ff0000;
//normalmente en el archivo de helpers.js o utils.js
export const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

note: do not forget to put in capital letters for const reference, since they are values ​​that are used for any application.

Things to keep in mind

• If you use plain javascript, you have to make use of var , since older browsers can't take const and let .
• Global variables or constants are those that can be accessed from anywhere.

This answer is a more practical example of using let and const in javascript.

Resumen para los que no quieran leer toda la explicación:

• const define constantes, pero si no tenemos cuidado se pueden modificar. Tiene alcance de bloque, como let.

• var define variables con un alcance de función (el contexto actual).

• let define variables con un alcance de bloque y a partir de la línea en la que se declaran.

• Si no declaramos un identificador, se creará como una variable global a menos que nuestro código sea declarado "estricto".