2

I started to learn JavaScript and I use Snippets or just Console in Google Chrome. I don't understand one thing. When I run snippet like:

let x = 5;
console.log(x);

multiple times. Everything is ok, but when I first run this:

var x = 5;
console.log(x);

and then I change the code to use let:

let x = 5;
console.log(x);

I get error SyntaxError: Identifier 'x' has already been declared and I don't understand why. I assume that variables declared with let are somehow "volatile", but variables declared with var are associated with window object, so they are "non volatile"? Or in more general: are declarations in global environment's declarative environment record wiped out after script execution but declarations stored in global environment's object environment record are not? When I run snippet in Google Chrome Snippets/Console multiple times, does it run in same Execution Context or it is recreated with new global environment each time when I push Run button?

swch
  • 1,432
  • 4
  • 21
  • 37
  • That's because when you do `let x = 5`, you cannot redeclare the variable again (since you mentioend you do it multiple times), i..e `let x = ...` later. Instead, you will need to reassign its value, i.e. `x = ...`. – Terry Jul 15 '20 at 09:30
  • @Terry actually if I use only let for declarations I can run script without problem. The problem occurs only when I first used var and then change it to let. The examples are complete - they are 2 lines of code. There is no redeclaration in the code. – swch Jul 15 '20 at 09:51
  • @swch if you write `let x = 5` more than once and run the code, it won't work though. This is some specific optimization of Chrome (V8) console. Firefox console throws an error. https://developers.google.com/web/updates/2019/12/devtools#redeclarations – adiga Jul 15 '20 at 09:54
  • Wrap your code in an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) when you copy it to the console. That way you never need to worry about redeclarations when you copy it multiple times. – 3limin4t0r Jul 15 '20 at 10:06

3 Answers3

2

Which Chrome version are you using? Since Chrome 80 you can redeclare let variables in the browser console. But keep in mind this only exists because of testing purposes. Real JavaScript engines (Node.js, Chrome besides the DevTools, etc.) will still throw an error.

That var can be redeclared is normal, because it is differently scoped. This was one of the reasons let were added with ES6. You can read more about var vs. let here.

hartenfeller.dev
  • 156
  • 4
  • Chrome 83, as I mentioned there is no problem with running script where is only let. The problem is when in some script there is var and then I change it to let – swch Jul 15 '20 at 09:47
  • Thanks, this clarified me about this strange behavior... Do you know if we can disable it? – mario ruiz Jan 20 '21 at 23:57
2

You can wrap all of your code in brackets.

{
let x = 5;
console.log(x);
}

JavaScript allows you to wrap any code in brackets. The brackets will create a unique scope for your let variables each time you run the snippet.

user15717674
  • 51
  • 1
0

Multiple declarations of the same var variable in the same scope are ignored. This is not the case with let (and also const) as multiple declaration in the same scope are not ignored, thus causing the second declaration to fail.

Consider the following:

var x = 1;
var x = 2;

and the following:

let x = 1;
let x = 2;

In the first example, the interpreter sees the code as:

var x;
x = 1;
x = 2;

The seconds example stays the same, because of the let keyword.

Although all variables are technically hoisted, they are not evaluated the same. From https://www.ecma-international.org/ecma-262/9.0/index.html#sec-let-and-const-declarations:

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.

Meaning var declaration is evaluated once its context is instantiated. let however, is only evaluated once the declaration in the code is reached.

St.Nicholas
  • 104
  • 5
  • `let` and `const` variables are also hoisted: [Are variables declared with let or const hoisted?](https://stackoverflow.com/a/31222689/3082296) – adiga Jul 15 '20 at 09:46
  • Although it's a technicality, and at the end of the day, let won't be evaluated as if it's hoisted, I edited my response to better explain this. – St.Nicholas Jul 15 '20 at 10:22