var キーワードを使用して宣言された変数は、その変数が作成された関数にスコープされます。関数の外で作成された場合は、グローバル オブジェクトにスコープされます。 let と const はブロック スコープです。つまり、最も近い中括弧のセット (関数、if-else ブロック、または for ループ) 内でのみアクセスできます。

function foo() {
  // All variables are accessible within functions.
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';

  console.log(bar); // bar
  console.log(baz); // baz
  console.log(qux); // qux
}

console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

if (true) {
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';
}

// var declared variables are accessible anywhere in the function scope.
console.log(bar); // bar
// let and const defined variables are not accessible outside the block they were defined in.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

var を使用すると、変数をホイストできます。つまり、変数を宣言する前にコード内で参照できるようになります。 let と const ではこれが許可されず、代わりにエラーがスローされます。

console.log(foo); // undefined

var foo = 'foo';

console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization

let baz = 'baz';

console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization

const bar = 'bar';

var を使用して変数を再宣言してもエラーはスローされませんが、let と const ではエラーがスローされます。

var foo = 'foo';
var foo = 'bar';
console.log(foo); // "bar"

let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared

let と const の違いは、let は変数の値の再割り当てを許可しますが、const は許可しないという点です。

// This is fine.
let foo = 'foo';
foo = 'bar';

// This causes an exception.
const baz = 'baz';
baz = 'qux';