The latest articles on DEV Community by Todd Chaffee (@tchaffee). https://dev.to/tchaffee https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F176018%2F52481077-3a5d-4219-bf4f-1b1e63c26b95.png https://dev.to/tchaffee en Todd Chaffee Sun, 14 Jul 2019 15:12:28 +0000 https://dev.to/tchaffee/how-do-you-personally-learn-203c https://dev.to/tchaffee/how-do-you-personally-learn-203c <p>Most of the programmers I have met over the years are really good at learning. You have to be somewhat good at learning to keep up with constantly and rapidly changing technology. And yet we don't talk much about the details of our own personal techniques for learning. Let's share in the comments our own strategies for quick learning. The more detailed you can get about what you do and why will be helpful. Don't make any assumptions that what you do is already common knowledge to other people.</p> discuss beginners Todd Chaffee Sat, 22 Jun 2019 15:38:54 +0000 https://dev.to/tchaffee/javascript-and-scope-vi-closures-2jhn https://dev.to/tchaffee/javascript-and-scope-vi-closures-2jhn <p>In <a href="https://blog.toddbiz.com/blog/2019-06-03-javascript-and-scope-ii/">JavaScript and Scope II</a> we saw that function scope is not determined by where a function is run. Instead, it is determined by where a function is declared.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="p">(</span><span class="dl">'</span><span class="s1">value of i when bar is declared inside foo: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">();</span> <span class="p">}</span> <span class="nx">foo</span><span class="p">();</span> <span class="c1">// logs 3</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/x3f1Ln8e/">Edit in JSFiddle</a></p> <p>But the example above doesn't fully illustrate lexical scope because the <code>bar</code> function is also <em>run</em> inside the <code>foo</code> function. Let's run the <code>bar</code> function outside of the <code>foo</code> function.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="p">(</span><span class="dl">'</span><span class="s1">value of i when bar is declared inside foo: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">bar</span><span class="p">;</span> <span class="p">}</span> <span class="kd">var</span> <span class="nx">barFunc</span> <span class="o">=</span> <span class="nx">foo</span><span class="p">();</span> <span class="nx">barFunc</span><span class="p">();</span> <span class="c1">// Runs in global scope but logs 3</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/so324k6x/">Edit in JSFiddle</a></p> <p>In the code above, we no longer run <code>bar</code> inside of <code>foo</code>. Instead we return the inner function without running it. Then we run the function on the last line of code: it runs in the global scope. Most importantly it runs <em>after</em> <code>foo</code> is done running. But it does not use the global <code>i</code> variable. Instead it uses the <code>i</code> variable from the function that has already finished running!</p> <p>The official name for what you just saw is closure. That's how simple closure is. All closure means is that even when a function is run outside of the scope it was declared in, it still uses the scope from where it was declared. In this case, inner function <code>bar</code> uses the scope of outer function <code>foo</code>. This is true even though <code>foo</code> has stopped running by the time we run <code>bar</code>. </p> <p>This breaks our expectation that the scope of <code>foo</code> no longer exists when it stops running.</p> javascript Todd Chaffee Fri, 21 Jun 2019 16:23:49 +0000 https://dev.to/tchaffee/javascript-and-scope-v-let-and-const-ede https://dev.to/tchaffee/javascript-and-scope-v-let-and-const-ede <p>In <a href="https://blog.toddbiz.com/blog/2019-06-07-javascript-and-scope-iv/">JavaScript and Scope IV - Blocks</a> we showed that blocks on their own do not create a new scope when using the <code>var</code> keyword. Wouldn't it be nice if there were a way to create the <code>toto</code> variable inside a block so that it would have its own scope, unlike below?<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">wants</span><span class="dl">'</span><span class="p">;</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">a puppy</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">toto</span><span class="p">);</span> <span class="c1">// logs 'a puppy'</span> </code></pre></div> <p>ES6 allows block level scope with the <code>let</code> keyword when declaring variables.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">wants</span><span class="dl">'</span><span class="p">;</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">a puppy</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">toto</span><span class="p">);</span> <span class="c1">// logs 'wants'</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/db423zut/">Edit in JSFiddle</a></p> <p>In the code above, the <code>toto</code> variable inside the block no longer pollutes the value of the global variable because they are now two different variables even if they have the same name.</p> <p>We can also fix the <code>for</code> loop example from the previous article.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>var buzz = 3; for (let buzz = 1; buzz &lt; 10; buzz++) { if (buzz === 9) { console.log('for loop buzz:', buzz); // logs 9 } } console.log('global scope buzz:', buzz); // now logs 3 </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/qr7x2fuk/">Edit in JSFiddle</a></p> <p>And we can also fix the <code>if</code> statement code. This time we use the <code>const</code> key word so the value cannot be changed.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">cute</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">not</span><span class="dl">'</span><span class="p">;</span> <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">cute</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">cat</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">cute</span><span class="p">);</span> <span class="c1">// logs 'not'</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/yjwt75v4/">Edit in JSFiddle</a></p> <p>As you can see from the examples above, both <code>let</code> and <code>const</code> will give you block level scope when you need it. In fact, it's one of the reasons to prefer using <code>let</code> and <code>const</code> instead of <code>var</code>. Variables should have as limited scope as possible to avoid the types of unexpected side effects we saw in the previous article.</p> javascript Todd Chaffee Wed, 19 Jun 2019 12:34:38 +0000 https://dev.to/tchaffee/javascript-and-scope-iv-blocks-300 https://dev.to/tchaffee/javascript-and-scope-iv-blocks-300 <p>In <a href="https://blog.toddbiz.com/tags/javascript-scope-series/">JavaScript and Scope I, II, and III</a> we looked at scope and <em>functions</em>. What about other statements that use blocks? Blocks being sections of code enclosed by curly brackets <code>{}</code>.</p> <p>For example, we often declare variables in a <code>for</code> loop with a block.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">buzz</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">buzz</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">buzz</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="nx">buzz</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">buzz</span> <span class="o">===</span> <span class="mi">9</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">for loop buzz:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">buzz</span><span class="p">);</span> <span class="c1">// logs 9</span> <span class="p">}</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">global scope buzz:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">buzz</span><span class="p">);</span> <span class="c1">// logs 10</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/5m4wk8hu/">Edit in JSFiddle</a></p> <p>When you run the code above, you'll see there is only one <code>buzz</code> variable. The one declared in the global scope. The <code>for</code> loop changes the global variable. The <code>buzz</code> variable will have a value of <code>10</code> when the last <code>console.log</code> runs.</p> <p>What about <code>if</code> statements?<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">cute</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">not</span><span class="dl">'</span><span class="p">;</span> <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">cute</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">cat</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">cute</span><span class="p">);</span> <span class="c1">// logs 'cat'</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/Lutdkqsx/">Edit in JSFiddle</a></p> <p>Again, there is only one <code>cute</code> variable and the final value of the variable in the global scope will be <code>'cat'</code>. The re-declaration of the variable inside the block does not create a new scope and variable.</p> <p>Both of the examples above are the <em>opposite</em> of what we saw for functions. Functions create a new scope for variables. Blocks do <em>not</em> create a new scope for variables declared with <code>var</code>.</p> <p>Did you know you can declare blocks all on their own without using an <code>if</code> or <code>for</code> statement or anything else? I will leave you with this one final very simple example to help you memorize the rule: <em>blocks do not create a new scope for variables declared with <code>var</code></em>.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">wants</span><span class="dl">'</span><span class="p">;</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">toto</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">a puppy</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">toto</span><span class="p">);</span> <span class="c1">// logs 'a puppy'</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/17st5cmk/">Edit in JSFiddle</a></p> javascript Todd Chaffee Fri, 14 Jun 2019 14:22:01 +0000 https://dev.to/tchaffee/javascript-and-scope-iii-arrow-functions-593f https://dev.to/tchaffee/javascript-and-scope-iii-arrow-functions-593f <p>As you saw in the <a href="https://blog.toddbiz.com/blog/2019-06-01-javascript-and-scope/">JavaScript and Scope I - Intro</a> and <a href="https://blog.toddbiz.com/blog/2019-06-03-javascript-and-scope-ii/">JavaScript and Scope II - Functions</a>, functions create a new scope which will hide or shadow the value of variables in a higher scope, such as global scope.</p> <p>What about arrow functions? Let's go back to our first ever code example and change it to an arrow function.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span> <span class="c1">// logs 2</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">();</span> <span class="c1">// Edit and run the code if you don't remember</span> <span class="c1">// what the next line results in.</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/xqtwu138/">Edit in JSFiddle</a></p> <p>If you run the code above, you'll see that scope behaves the same as a regular function declaration: The <code>foo</code> variable only exists inside the function scope, and does not exist in the global scope.</p> <p>The same is true of all the other examples given so far. If you want to see for yourself and have a few minutes, go ahead and edit every code example from the previous two articles and change them to use only arrow functions. Use the example above as a guide for how to change a regular function declaration to an arrow function. In each case, you will need to declare a variable to give the arrow function a name. Here are all the examples from the last two articles.</p> <p><a href="https://jsfiddle.net/tchaffee/0oy9jc1n/2/">Example 2, Edit in JSFiddle</a></p> <p><a href="https://jsfiddle.net/tchaffee/0jwyg6za/">Example 3, Edit in JSFiddle</a></p> <p><a href="https://jsfiddle.net/tchaffee/bue5zf9w/">Example 4, Edit in JSFiddle</a></p> <p><a href="https://jsfiddle.net/tchaffee/x3f1Ln8e/">Example 5, Edit in JSFiddle</a></p> <p>There are a couple of exceptions to how scope works in arrow functions. Arrow function scope does not include its own <code>this</code> or its own <code>argument</code> object, which will be covered in another post. For now we are focusing on the scope of declared variables.</p> <p>In summary you can count on arrow functions to have their own scope for declared variables, just like regular function declarations.</p> javascript Todd Chaffee Fri, 07 Jun 2019 15:19:41 +0000 https://dev.to/tchaffee/javascript-and-scope-ii-4i4e https://dev.to/tchaffee/javascript-and-scope-ii-4i4e <p>As you saw in the <a href="https://blog.toddbiz.com/blog/2019-06-01-javascript-and-scope/">previous article about JavaScript scope</a>, a function can create a new scope which determines the value to use when we have two different variables with the same name.</p> <p>But is scope determined by where a function is declared, or where the function is run?<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="p">(</span><span class="dl">'</span><span class="s1">value of i when bar is declared outside foo: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="nx">foo</span><span class="p">();</span> <span class="nx">bar</span><span class="p">();</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/0jwyg6za/">Edit in JSFiddle</a></p> <p>In the example above it should be obvious that <code>i</code> will have a value of <code>11</code> when <code>console.log</code> runs. But what happens if we run <code>bar</code> inside of <code>foo</code>? The answer might surprise you if you are new to JavaScript.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">bar</span><span class="p">();</span> <span class="p">}</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="p">(</span><span class="dl">'</span><span class="s1">value of i when bar is declared outside foo: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="nx">foo</span><span class="p">();</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/bue5zf9w/">Edit in JSFiddle</a></p> <p>The <code>i</code> variable again will have a value of <code>11</code> when <code>console.log</code> runs.</p> <p>Because <code>bar</code> is declared in the global scope, it changes the value of the <code>i</code> variable that exists in the same global scope. Even when it runs inside of <code>foo</code>, it does not reference the <code>i</code> declared inside of the <code>foo</code> scope.</p> <p>So what happens if we declare the bar function inside of the <code>foo</code> function?<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="p">(</span><span class="dl">'</span><span class="s1">value of i when bar is declared inside foo: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">();</span> <span class="p">}</span> <span class="nx">foo</span><span class="p">();</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/x3f1Ln8e/">Edit in JSFiddle</a></p> <p>Hopefully you guessed that <code>console.log</code> will show <code>i</code> having a value of <code>3</code>. The <code>bar</code> function is declared inside the scope of the <code>foo</code> function, so it will change and output the value of the <code>i</code> variable declared in the <code>foo</code> scope.</p> <p>Many programming languages work like this, but not all of them so it's good to know the vocabulary for this. When scope is determined by where a function is declared (where it is written in the source code), we call it lexical scope. JavaScript uses lexical scope.</p> <p>Learn more about scope in <a href="https://blog.toddbiz.com/blog/2019-06-07-javascript-and-scope-iii/">JavaScript and Scope III - Arrow Functions</a></p> javascript Todd Chaffee Thu, 06 Jun 2019 20:16:37 +0000 https://dev.to/tchaffee/javascript-and-scope-i-1e7h https://dev.to/tchaffee/javascript-and-scope-i-1e7h <p>Scope determines where a variable exists and does not exist in a program.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">function</span> <span class="nx">bar</span> <span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span> <span class="c1">// 2</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">();</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span> <span class="c1">// ReferenceError: foo is not defined;</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/L4h60y79/6/">Edit in JSFiddle</a></p> <p>Scope also determines which value to use when we have two <em>different</em> variables with the same name.<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">bar</span> <span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">foo inside bar: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">foo</span><span class="p">);</span> <span class="c1">// 2</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">();</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">foo outside bar: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">foo</span><span class="p">)</span> <span class="c1">// 1;</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/0oy9jc1n/2/">Edit in JSFiddle</a></p> <p>If you run the example above, you will first see '2' logged to the console, and then you will see '1'. The <code>foo</code> created inside the <code>bar</code> function is a different variable from the <code>foo</code> created at the top of the program.</p> <p>The <code>foo</code> variable declared at the top of the program is in the global scope. The <code>foo</code> variable declared inside the function is in that function's scope only. We say that the <code>foo</code> variable declared inside the function <em>shadows</em> the global variable.</p> <p>What about function parameters? Do they shadow variables from a higher level scope?<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">bar</span> <span class="p">(</span><span class="nx">foo</span><span class="p">)</span> <span class="p">{</span> <span class="nx">foo</span> <span class="o">=</span> <span class="nx">foo</span> <span class="o">+</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">foo inside bar: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">foo</span><span class="p">);</span> <span class="c1">// logs 7</span> <span class="p">}</span> <span class="nx">bar</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">foo outside bar: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">foo</span><span class="p">);</span> <span class="c1">// logs 1</span> </code></pre></div> <p><a href="https://jsfiddle.net/tchaffee/cqt2dxh4/">Edit in JSFiddle</a></p> <p>The fact that parameter names act like variables when it comes to scope and shadowing will be important in a future article on scope and closures.</p> <p>Learn more about scope in <a href="https://blog.toddbiz.com/blog/2019-06-03-javascript-and-scope-ii/">JavaScript and Scope II - Functions</a></p> javascript