Redeclaration of variable

You can redeclare a variable with var, but not with let and const:

var foo = 34;
var foo = 46;

foo; // 46

However, if we try to redeclare a variable with const and let, we will get a syntax error:

var foo = 34; 
let  foo =46;

foo;  
// SyntaxError: Identifier 'foo' has already been declared.

Global scope & function scope vs block scope

var only has knowledge of global scope and function scope. This means that if you declare a var variable inside an if statement, you can still access it from outside of that if statement. However, you can't do the same with let and const. For example:

var name = "Max"; 

if(name === 'Max'){
  var hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}

console.log(name, hobbies)  
// 'Max' [ 'Sports', 'Cooking' ]

Notice that you can still access hobbies from outside of the if block. But in the case of let and const, we can't do that since both let and const are block-scoped.

var name = "Max"; 

if(name === 'Max'){
  let hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}


console.log(name, hobbies) 
// ReferenceError: hobbies is not defined

As you can see, we get a ReferenceError. let and const only care about curly braces (except for curly braces of an object). You can't access a variable defined inside a child block from outside. Also, you can't access a variable that you defined inside a nested block.

var name = "Max"; 

if(name){
  {
    let test = 34;
  }

console.log(test)  
// ReferenceError: test is not defined
}

Hoisting: var vs let & cost

When it comes to var, JavaScript initializes the hoisted variable as undefined:

console.log(name); //'undefined'

var name = "Rob"

When it comes to let and const, the declarations remain uninitialized:

console.log(name);        // ReferenceError: 

//Cannot access 'name' before initialization

var name = "Rob"