0

I am trying to understand hoisting concept, if I would have used var instead of const or let the code works without error but when I use const or let it is throwing error, I am little confused why JS runtime not looking into global scope if not found in local one.

const name = "Abc";
function logName() {
  console.log('1. Name is => ', name);
  const name = "Grapes";
  console.log('2. Name is => ', name);
}
    
logName();
Deepchand yadav
  • 1
  • 2
  • you can use `this.name` to call globally declared `name` variable in your function – firatozcevahir Dec 25 '20 at 14:17
  • 1
    it's due to it's internal block scoping, if you remove the 2nd const declaration it will work. ( However, you should not be reassigning `const` variables at all, they should be `let` ). You can read up more about this in the official documentation. – tsamridh86 Dec 25 '20 at 14:35
  • Read this: https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/ The short answer is: because that's how `let` and `const` are designed to work according to the spec. – Lennholm Dec 25 '20 at 14:52
  • The best way to understand "hoisting" is to ignore the word "hoisting" and 99% of articles about hoisting and look at the compilation and execution/evaluation phases of the javascript interpreter. See my answer to this old question: https://stackoverflow.com/questions/3887408/javascript-function-declaration-and-evaluation-order/3887590#3887590 – slebetman Dec 25 '20 at 14:57

2 Answers2

1

The variables are declared using var are created before any code is executed and assigned with an initial value of undefined. This process is called hosting.

The scope of the variable declared with var will be inside the current execution context and closures. That may be either the enclosing function and function declared within it or variables declared outside any function globally. Duplication of the variable name using var will not throw an error, even in strict mode and the variable will also not lose its value unless another assignment is performed.

 var name = "Abc";
 function logName() {
      console.log('1. Name is => ', name); // Abc
      var name = "Grapes";
      console.log('2. Name is => ', name); // Grapes
 }

logName();

The variable name is bounded with globalThis where as variable name inside the function logName() is bounded with the logName function.

var name = "Abc";
globalThis.hasOwnProperty("name") // true

All declarations (function, var, let, const and class) are hoisted in JavaScript, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized.

The variable declared using const or let they will only get initialized when their lexical binding (assignment) is evaluated during runtime by the JavaScript engine. This means you can’t access the variable before the engine evaluates its value at the place it was declared in the source code. This is what we call “Temporal Dead Zone”, A time span between variable creation and its initialization where they can’t be accessed.

If the JavaScript engine still can’t find the value of let or const variables at the line where they were declared, it will assign them the value of undefined or return an error (in case of const).

console.log(name); // ReferenceError: a is not defined
let name;
console.log(name); //undefined
name = "test";
console.log(name); //test

This is when the function logName is called the console.log(name) will get executed and it looks up for the variable name inside the local execution context. when it is not found inside the local execution context it goes outside and looks for the variable name and it will be inside the globalThis so it prints Abc when the variable is declared using var and not when declared using const or let.

anto Richard
  • 46
  • 4
-1

"Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared."

Check -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

Henju
  • 1
  • 3