How can an identifier be both already declared and not defined?

Question

I was messing around in the JS console and I stumbled across some perplexing behavior. The second error (SyntaxError) makes sense to me, I already declared (or tried to at least) bar so I shouldn't be able to declare it again. However, I would expect bar to be undefined in this case.

How can a variable be both declared and not defined? Can anyone explain what is going on internally?

let bar = fo.map(i => console.log(i)) //typo
VM2927:1 Uncaught ReferenceError: fo is not defined
    at <anonymous>:1:11
(anonymous) @ VM2927:1

let bar = foo.map(i => console.log(i)) //fix typo
VM2999:1 Uncaught SyntaxError: Identifier 'bar' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM2999:1

bar
VM3019:1 Uncaught ReferenceError: bar is not defined
    at <anonymous>:1:1

.as-console-wrapper {max-height: 100% !important;}

<script>
  //typo:
  let bar = fo.map(i => console.log(i)) //Uncaught ReferenceError: fo is not defined
</script>
<script>
  //fix typo:
  let bar = foo.map(i => console.log(i)) //Uncaught SyntaxError: Identifier 'bar' has already been declared
</script>
<script>
  console.log(bar) //Uncaught ReferenceError: bar is not defined
</script>

Answer 1

Actually, it can't at all.

TL;DR: In your code, the variable bar is declared and defined, but not initialized.

---

The first error is right: bar was declared twice.

Also note, that it's a compile-time SyntaxError, so it happens before the code gets evaluated, so it isn't affected by the thrown exception inside the variable declaration:

//SyntaxError

console.log('Evaluating code') //Never runs
let foo = 'bar'
let foo = 'baz'

---

But the second error isn't so obvious: why isn't bar just undefined?

After a lot of searching in the ECMAScript 6 specification, I've found the source of the problem. That's a "bug" (or at least a situation that hasn't taken care of) in the spec itself, but fortunately, it's very rare outside of a JS console.

You may know, that let and const variables have a so-called temporal dead zone, that throws ReferenceErrors when you try to look up or assign to variables before they're declared:

/* Just to make console fill the available space */
.as-console-wrapper{max-height:100% !important;}

<!-- Using separate scripts to show all errors -->
<script>
  console.log(foo) //ReferenceError
  const foo = 'bar'
</script>
<script>
  bar = 'baz' //ReferenceError
  let bar
</script>

That's because these variables' bindings are created before the containing code block get executed, but aren't initialized until the variable declaration statement evaluated. Trying to retrieve or modify the value of an uninitialized binding always results in a ReferenceError.

Now, let's inspect the evaluation of the let (and const) statement's LexicalBinding (variable = value pair), it's defined as follows:

LexicalBinding : BindingIdentifier Initializer

1. Let bindingId be StringValue of BindingIdentifier.
2. Let lhs be ResolveBinding(bindingId).
3. Let rhs be the result of evaluating Initializer.
4. Let value be GetValue(rhs).
5. ReturnIfAbrupt(value).
6. If IsAnonymousFunctionDefinition(Initializer) is true, then
   1. Let hasNameProperty be HasOwnProperty(value, "name").
   2. ReturnIfAbrupt(hasNameProperty).
   3. If hasNameProperty is false, perform SetFunctionName(value, bindingId).
7. Return InitializeReferencedBinding(lhs, value).

^{Emphasis mine.}

Without really going into detail, I'd like to highlight the most important things:

• BindingIdentifier is the variable name
• Initializer is the value to assign to it
• ReturnIfAbrupt() is an abstract algorithm, that returns from its caller with its argument if its argument is a Completion Record that represents an abrupt completion (e.g. a thrown exception)
• InitializeReferencedBinding() initializes the given Binding

The problem appears when an exception is thrown during the evaluation of the Initializer.

When that happens, this:

GetValue(rhs)

...will return an abrupt completion, so the following line:

ReturnIfAbrupt(value)

...returns from the let (or const) statement with the abrupt completion record (i.e. re-throws the exception), so that line:

InitializeReferencedBinding(lhs, value)

...won't run at all, therefore, the variable's binding remains uninitialized and continues to throw ReferenceErrors when you try to look it up or assign to it.

These errors' message (foo is not defined) is even more confusing and inappropriate, but that depends on the implementation, so I can't reason about it; however, probably it's because of another unhandled case.

Answer 2

let foo = undefined; this is a declared undefined variable, if you use it somewhere you will get foo is undefined if you try to declare it again you will get an error SyntaxError: redeclaration, some functions return undefined when they fail, the variable you use to store the return value will be declared and undefined in the same time. in this example you can use foo but you can't re-declare it for example let foo = undefined; foo = 5;