7

Part 1

Given this example:

var number = 10
{
   var number = 42
}
console.log(number) // 42

Why does line 4 not throw an Uncaught SyntaxError: Identifier 'number' has already been declared? It works with let / const because of block scoping (although the output is, of course, 10 not 42), but how come it works with var?

Part 2

Compare this to the following, which works with var:

var number = 10
var number = 42
console.log(number) // 42

but doesn't with let:

let number = 10
let number = 42 // SyntaxError
console.log(number)

Why is var given a "free pass"? Does it have to do with the number property being reassigned to the window object when var is used?

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
Alex
  • 3,719
  • 7
  • 35
  • 57
  • I'm out of close votes, but this is a possible dupe of https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable – devlin carnate Dec 29 '17 at 20:59
  • 2
    Because it always has been like that, and they cannot change it now. `var`s need to be redeclarable. That it's not a good idea to do that was only recognised later, and made an error for the *new* `let` and `const` declarations. To catch `var` redeclarations, use a linter. – Bergi Dec 30 '17 at 11:02
  • @Bergi Thanks for your input, Bergi! – Alex Dec 30 '17 at 15:53

2 Answers2

7

You are allowed to redeclare var variables in JavaScript, even in strict mode.

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global. If you re-declare a JavaScript variable, it will not lose its value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting

'use strict'
var someVar = 'Hello';
var someVar = 2 + 2;
console.log(someVar);
Sébastien
  • 11,860
  • 11
  • 58
  • 78
7

Why does line 4 not throw an Uncaught SyntaxError: Identifier 'number' has already been declared?

As Sébastien already mentioned, variables declared with var are declared in the current execution context and can be redeclared. The concept of an execution context can be compared to a box. Per the ECMAScript Language Specification Section 8.3:

8.3 Execution Contexts

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. At any point in time, there is at most one execution context per agent that is actually executing code. This is known as the agent's running execution context.

[...]

Execution contexts for ECMAScript code have the additional state components listed in Table 22.

Table 22: Additional State Components for ECMAScript Code Execution Contexts 
 Component           Purpose



LexicalEnvironment   Identifies the Lexical Environment used to resolve identifier references made by code within this execution context.
VariableEnvironment  Identifies the Lexical Environment whose EnvironmentRecord holds bindings created by VariableStatements within this execution context.

So everytime you write JavaScript code, it's separated into small individual "boxes" called execution contexts that are created whenever the interpreter encounters a new syntactic structure such as a block, function declaration, etc. In each of these boxes, there are many components, but in particular the LexicalEnvironment and VariableEnvironment. These are both "mini-boxes" inside the parent execution context "box" that hold references to the variables declared inside the current execution context that the code may access. LexicalEnvironment refers to the variables declared with let and const. VariableEnvironment refers to variables created with var.

Now looking at Section 13.3.2:

13.3.2 Variable Statement

NOTE      A var statement declares variables that are scoped to the running execution context's VariableEnvironment. Var variables are created when their containing Lexical Environment is instantiated and are initialized to undefined when created. Within the scope of any VariableEnvironment a common BindingIdentifier may appear in more than one VariableDeclaration but those declarations collectively define only one variable.

The last part of the quoted note states the reason why you can declared a var more than once. Every time the interpreter encounters a function, a new VariableEnvironment is created because var is function-scoped, and if you're in the global scope there is one global VariableEnvironment. In your case, you've declared number both times in the global scope because { … } is a block, not a function, but they collectively only define number once. So, your code actually performs the same as this:

var number = 10 //declared once
{
  number = 42 //since { … } does not create a new VariableEnvironment, number is the same 
              //variable as the one outside the block. Thus, the two declarations only define
              //number once and every redeclaraction is essentially reassignment.
}
console.log(number) //42

And as you said, let and const are block-scoped. They do not throw an error because { … } creates a new block.

Why is var given a "free pass"? Does it have to do with the number property being reassigned to the window object when var is used?

As described before, a var declaraction can occur many times within a VariableEnvironment - but the same doesn't hole true for let and const. As Bergi mentioned, the ECMAScript authors hadn't realized the downfalls and quirks of having such a bad declarator var until much later, and changing var's behavior would cause the whole internet to collapse, as backwards-compatibility is a huge aspect of ECMAScript/JavaScript. Thus, the authors introduced new declarators, let and const that would aim to be block-scoped and predictable, more like other declarators you see in other languages. As such, let and const declarations throw an error whenever there is another declaration within the same scope. This has nothing to do with window, just because of compatibility and historical issues.

Andrew Li
  • 55,805
  • 14
  • 125
  • 143