Function, Block and Lexical Scope. What's the difference?
Published: 2020-10-18 17:37:44

<!-- wp:heading {"level":4} -->

<h4><strong>What is Scope?</strong></h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Scope is the location where a variable is defined and the context where other pieces of your code can <strong>access </strong>and<strong> manipulate</strong> it. In this post I'll outline the three different types of scopes and how they behave in JavaScript. </p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->

<h4><strong>Function Scope</strong></h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>In the below example a function called helpMe has a variable called msg. Msg is <strong>function scoped</strong> meaning that if you call it outside the helpMe function you'll get undefined.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"id":1497,"sizeSlug":"large","linkDestination":"none"} -->

<figure class="wp-block-image size-large"><img src="https://codingnotesbyella.files.wordpress.com/2020/10/screen-shot-2020-10-15-at-16.30.37.png?w=1024" alt="" class="wp-image-1497"/></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>If you have two variables with the same name their location matters. In the below example a bird variable is declared outside of a function (pink box) and then a bird variable is function scoped to birdWatch. When bird is outside the function the 'mandarin duck' is printed.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"id":1499,"sizeSlug":"large","linkDestination":"none"} -->

<figure class="wp-block-image size-large"><img src="https://codingnotesbyella.files.wordpress.com/2020/10/screen-shot-2020-10-18-at-16.44.02.png?w=1024" alt="" class="wp-image-1499"/></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":3} -->

<h3><strong>Block Scope</strong></h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Blocks of code are defined with curly braces. It's important to note that Let and Const are <strong>block scoped. </strong>This means when you declare a variable using Let or Const those variables can't be accessed outside that block.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"id":1493,"sizeSlug":"large","linkDestination":"none"} -->

<figure class="wp-block-image size-large"><img src="https://codingnotesbyella.files.wordpress.com/2020/10/screen-shot-2020-10-15-at-16.27.02.png?w=1024" alt="" class="wp-image-1493"/></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>In contrast, if you use <strong>var</strong> you can still access a variable that is declared inside a block scope. </p>

<!-- /wp:paragraph -->

<!-- wp:code -->

<pre class="wp-block-code"><code>// let &amp; const are BLOCK SCOPED<br><br>if (true) {<br>const animal = 'eel';<br>console.log(animal); //'eel'<br>}<br>console.log(animal); //NOT DEFINED!<br><br>// Var is not BLOCK SCOPES<br>if (true) {<br>var animal = 'eel';<br>console.log(animal); //'eel'<br>}<br>console.log(animal); //'eel'</code></pre>

<!-- /wp:code -->

<!-- wp:heading {"level":4} -->

<h4><strong>Lexical Scope</strong></h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Lexical scope refers to the fact that nested functions are scoped to their <strong>parent/outer functions</strong> (but it's a one way relationship). </p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>In the below example the inner function is nested inside the outer function. As you can see we have access to hero inside the inner function. But outside this function we do not have access to inner.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"id":1496,"sizeSlug":"large","linkDestination":"none"} -->

<figure class="wp-block-image size-large"><img src="https://codingnotesbyella.files.wordpress.com/2020/10/screen-shot-2020-10-15-at-16.27.38.png?w=1024" alt="" class="wp-image-1496"/></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Below is another example of how lexical scope works. When we call outer() the below example prints out 'AMADEUS'. This is because movie isn't defined inside the extraInner function so the function looks for the nearest movie which is Amadeus. If The Shining wasn't commented out the console would print it.  </p>

<!-- /wp:paragraph -->

<!-- wp:code -->

<pre class="wp-block-code"><code>function outer() {<br>  let movie = 'Amadeus';<br><br> function inner() {<br>   // let movie = "The Shining"; <br><br>   <code>function extraInner() { </code><br>   <code>//movie is not defined in this function </code><br>   <code>//but it has access to parent function's variables</code><br>   <code>  console.log(movie.toUpperCase()) </code><br>   <code>} </code><br>    <code>extraInner();</code><br>  }<br>  inner();<br>}<br><br>outer(); //'AMADEUS'<br><br>--------<br>//Order of how the function is called<br><br>2. function outer() {<br>   3. let movie = 'Amadeus';<br><br>  5. function inner() {<br>     6. let movie = "The Shining";<br><br>     8. function extraInner() {<br>        9. console.log(movie.toUpperCase())<br>    }<br>    7. extraInner();<br>    }<br>4. inner();<br>}<br> <br>1. outer();<br> <br>10. >>>'THE SHINING'</code></pre>

<!-- /wp:code -->

<!-- wp:paragraph -->

<p></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<!-- wp:paragraph -->


Originally posted [here.](https://codingnotesbyella.wordpress.com/2020/10/18/function-block-and-lexical-scope-what-are-the-differences/)[]()

<p>*The graphics are screenshots from Colt Steele's Modern Javascript course.</p>

<!-- /wp:paragraph -->