Why do some variables declared using let inside a function become available in another function, while others result in a reference error?

Question

I can\'t understand why variables act so strange when declared inside a function.

1. In the first function I declare with let the variabl

Answer 1

The strange issue is caused by scoping rules in JavaScript

function first() {
   let a = b = c = 10; // a is in local scope, b and c are in global scope
   var d = 20; // d is in local scope
   second(); // will have access to b and c from the global scope
}

Assuming that you want to declare 3 local variables initialised to the same value (100). Your first() will look like below. In this case, second() will not have access to any of the variables because they are local to first()

function first() {
   let a = 100; // a is in local scope init to 100
   let b = a; // b is in local scope init to a
   let c = b // c is in local scope init to b

   var d = 20; // d is in local scope
   second(); // will not have access a, b, c, or d
}

However, if you want global variables then your first() will look like below. In this case, second will have access to all the variables because they are in global scope

function first() {
   a = 100; // a is in global scope
   b = a; // b is in global scope
   c = b // c is in global scope

   d = 20; // d is in global scope
   second(); // will have access to a, b, c, and d from the global scope
}

Local variables (aka. accessible in the code block where they are declared).
A Code block is any {} with line(s) of code between.

• function() {var, let, const in here is accessible to entire function},
• for() {var in here is accessible to outer scope, let, const accessible only in here},
• etc.
  

Global variables (aka accessible in the global scope).
These variables are attached to the global object. The global object is environment dependent. It is the window object in browsers.

Special note: You can declare variables in JavaScript without using the var, let, const keywords. A variable declared this way is attached to the global object, therefore accessible in the global scope.
a = 100 // is valid and is in global scope

Some articles for further reading: https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/ https://scotch.io/tutorials/understanding-scope-in-javascript https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript