var, let and const in JavaScript, and what hoisting really means

Scope: the main difference

• var is scoped to the whole function (or the whole script). A var declared inside a loop or an if block is visible outside it.
• let and const are scoped to the nearest pair of curly braces.
• const cannot be reassigned. The value it points to can still change if it is an object or an array.

function demo() {
  if (true) { var a = 1; let b = 2; }
  console.log(typeof a, typeof b);
  const marks = [70, 80];
  marks.push(90);
  console.log(marks.length);
}
demo();

number undefined
3

Hoisting, in plain words

Before code runs, JavaScript sets up every declaration in its scope. A var is created early and set to undefined. A let or const is also created early, but you cannot touch it until its line runs. That gap is the temporal dead zone.

console.log(x);
var x = 5;
try { console.log(y); let y = 6; } catch (e) { console.log(e.name); }
console.log(greet());
function greet() { return 'function declarations are hoisted with their body'; }

undefined
ReferenceError
function declarations are hoisted with their body

The classic loop question

const fns = [];
for (var i = 0; i < 3; i++) fns.push(() => i);
const lets = [];
for (let j = 0; j < 3; j++) lets.push(() => j);
console.log(fns.map(f => f()).join(','), lets.map(f => f()).join(','));

3,3,3 0,1,2

With var there is one i shared by every function, and it is 3 by the time they run. With let, each loop turn gets its own j.

A rule you can follow

Use const by default, let when you really need to reassign, and avoid var in new code. Practise more in UniCircle interview prep: JavaScript and TypeScript.