Why does the temporal dead zone exists?

Question

I know what is the temporal dead zone (TDZ), but I can't understand the purpose of it existence.

Can anyone explain me why it was created?

What is the logic of it raising a ReferenceError or a SyntaxError instead of returning undefined?

ReferenceError:

console.log(typeof foo);
let foo;

SyntaxError:

let foo;
let foo;

Undefined:

console.log(typeof foo);

Answer 1

Using a variable before initialising it is always a mistake. Making this an error is reasonable as it helps the developer to notice their mistake and be able to fix it. The behaviour of var starting as undefined caused too many problems already, and they would have gotten worse if similar semantics were used for const variables or with static type annotations.

Answer 2

It makes sense for a variable to exist from the moment it is defined. Due to the way variables from an outside scope are accessible within nested scopes, the following code is very confusing:

var foo = 'out';

function bar () {
  foo = 'in';
  console.log(foo);
  var foo;
}

bar();

What does the function bar() do? It creates a new variable called foo and assigns 'in' to it before showing it in the console. The variable from the outside scope is still equal to 'out' after that. So it's a much smarter thing to define variables before you use them. I believe the fact that you can use a variable before it is declared is only a question of implementation simplicity and efficiency, but I'm boldly guessing here.

However, in JS, variables created with the var keyword are accessible from within their function, not their block. This allows more permissive syntax like the following:

function setGameMode (mode) {
  if (mode === 'peaceful') {
    var count = 0;
    for (var i = 0; i < mobs.length; ++i) {
      if (mobs[i] instanceOf EvilMob) {
        mobs[i].despawn();
        ++count;
      }
    }
    console.log('Removed ' + count+ ' evil mobs out of ' + i);
    mobSpawner.evil = false;

  } else if (mode ==='chaotic') {
    var count = 0;
    for (var i = 0; i < mobs.length; ++i) {
      if (mobs[i] instanceOf NiceMob) {
          mobs[i].despawn();
          ++count;
      }
    }
    console.log('Removed ' + count + ' nice mobs out of ' + i);
    mobSpawner.nice = false;
  }
}

The i variable still exists after the for loop thanks to function-scoped variables. This is also why the var keyword allows you to define a variable twice. It just wouldn't be practical if you were forced to write var only once. With a let variable, this "loose" feature becomes useless as these variables should be freed as soon as they are no longer needed.

When you call a function in most programming languages, the execution environment creates a space in memory for the variables you'll need. Here, there's no way to tell if the variable i will be needed without actually running the code because it's inside an if block. Still, since JS has function-scoped variables, it has to create the variable from the start of the function. There's no need for this in the case of let variables.

As for the reason behind typeof someundefinedvar returning 'undefined', well it's because you need a way to check for variables that might have been declared in outside scopes. However, you don't need that feature for variables that are block-scoped. let variables are meant to be used immediately and thrown away.