3

Not sure if this has been answered elsewhere. I have gone through this answer

This is my code:

var fruit = "apple";
if (true) {
  console.log(fruit); // expected "apple" 
  let fruit = "orange"; // since this is not hoisted to the top
  console.log(fruit); // "orange" as expected
}

Why can't we access the outer variable fruit inside the if block. I understand that variables declared with let are not hoisted within the block/function scope.

I get Uncaught ReferenceError: fruit is not defined error. Why so?

Although, if I change the variable name inside the if block to something else, then it works as expected. So why this conflict with same name, mainly when let fruit = "orange" is not hoisted to the top.

Community
  • 1
  • 1
Sandeep Nayak
  • 4,649
  • 1
  • 22
  • 33
  • 4
    "In ECMAScript 2015, let will hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError." - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let) – Gerrit0 Jan 09 '17 at 06:26
  • 1
    Not familiar with `ES` but why don't you just try `fruit='orange'` instead of prefixing with `let` – Guruprasad J Rao Jan 09 '17 at 06:26
  • See the transpiled code at http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&code=var%20fruit%20%3D%20%22apple%22%3B%0Aif%20(true)%20%7B%0A%20%20console.log(fruit)%3B%20%2F%2F%20expected%20%22apple%22%20%0A%20%20let%20fruit%20%3D%20%22orange%22%3B%20%2F%2F%20since%20this%20is%20not%20hoisted%20to%20the%20top%0A%20%20console.log(fruit)%3B%20%2F%2F%20%22orange%22%20as%20expected%0A%7D&experimental=true&playground=false&loose=false&spec=false. This should give you some perspective – Umang Gupta Jan 09 '17 at 06:27
  • "Temporal Dead Zone": http://stackoverflow.com/questions/36021132/understanding-let-vs-var-hoisting?rq=1 – Thilo Jan 09 '17 at 06:28
  • 1
    Also, if you change the first declaration from `var` to `let`, you get `Uncaught SyntaxError: Identifier 'fruit' has already been declared(…)`. – Shreevardhan Jan 09 '17 at 06:28
  • And I suppose we can all agree that this is the expected and safe behaviour. `let` was introduced to fix the crazy scoping of `var`. – Thilo Jan 09 '17 at 06:29
  • 1
    You are confused about "hoisting". The declaration is processed before any code is executed, but the assignment occurs when the line of code is reached. The difference with *let* is that the variable is not initialised to any value, where as *var* initialises to *undefined*. – RobG Jan 09 '17 at 06:32
  • Possible duplicate of [Does 'let' override a global declaration and throws a ReferenceError?](http://stackoverflow.com/questions/41451181/does-let-override-a-global-declaration-and-throws-a-referenceerror) – Konstantin A. Magg Jan 09 '17 at 06:45
  • Possible duplicate of [Are variables declared with let or const not hoisted in ES6?](http://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6) – Michał Politowski Jan 09 '17 at 16:29

1 Answers1

2
  • Scope of the variable 'fruit' is defined within the block.
  • Please look at the reference. Your scenario is well explained under 'Temporal dead zone and errors with let' & 'Another example'

Reference - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

Thanks Sriram

Sri
  • 1,317
  • 9
  • 13