title: Why do some variables declared using let inside a function become available in another function, while others result in a reference error?
body: <p>I can't understand why variables act so strange when declared inside a function.</p>
  
  <ol>
  <li><p>In the <code>first</code> function I declare with <code>let</code> the variables <code>b</code> and <code>c</code> with the value <em>10</em>:</p>
  
  <pre><code>b = c = 10;
  </code></pre>
  
  <p>In the <code>second</code> function I show:</p>
  
  <pre><code>b + ", " + c
  </code></pre>
  
  <p>And this shows:</p>
  
  <pre><code>10, 10
  </code></pre></li>
  <li><p>Also in <code>first</code> function I declare <code>a</code> with value <em>10</em>:</p>
  
  <pre><code>let a = b = c = 10;
  </code></pre>
  
  <p>But in the <code>second</code> function it shows an error:</p>
  
  <blockquote>
    <p>Can't find variable: <code>a</code></p>
  </blockquote></li>
  <li><p>Now in the <code>first</code> function I declare <code>d</code> with value <em>20</em>:</p>
  
  <pre><code>var d = 20;
  </code></pre>
  
  <p>But in the <code>second</code> function it shows the same error as before, but with the variable <code>d</code>:</p>
  
  <blockquote>
    <p>Can't find variable: <code>d</code></p>
  </blockquote></li>
  </ol>
  
  <p>Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function first() {
    let a = b = c = 10;
    var d = 20;
    second();
  }
  
  function second() {
    console.log(b + ", " + c); //shows "10, 10"
  
    try{ console.log(a); }  // Rreference error
    catch(e){ console.error(e.message) }
  
    try{ console.log(d); } // Reference error
    catch(e){ console.error(e.message) }
  }
  first()</code></pre>
  </div>
  </div>
  </p>