Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ol> <li><p>If you are in the global scope already, the difference is so small that you don't have to worry about it </p></li> <li><p>imagine that you had two <code>for</code> loops, and you wanted to do something with them.</p></li> </ol> <p>.</p> <pre><code>for (i = 0; i &lt; elements.length; i++) { element = elements[i]; for (i = 0; i &lt; items.length) { item = items[i]; element.add(item); } } </code></pre> <p>This piece of pseudo-code would work fine in many different languages. The program would see an inner-loop and an outer-loop, and could tell that <code>i</code> wasn't referring to the same thing.</p> <p>In JavaScript, they're the same <code>i</code>.<br> That's because other languages have block-scope -- any time you enter new curly braces, the program treats variables like they're new.</p> <p>In JavaScript there is only function scope, meaning that inside of functions variables are treated as new, but inside of control statements (<code>if</code>, <code>for</code>, <code>switch</code>), they're the same variable with the same value.<br> So the outer loop sets <code>i</code> to 0, and then goes into the inner loop.<br> The inner loop goes through all of its list of items, and builds <code>i</code> up as it goes...<br> Then it goes back to the outer loop, and <code>i</code> still equals <code>items.length - 1</code>...<br> If that's less than <code>elements.length</code> then it adds one to <code>i</code>, which is now higher than <code>items</code> length, so nothing happens in the inner loop, anymore...<br> ...if <code>items.length</code> is greater than <code>elements.length</code> instead, then the outer loop just ends after one time through.</p> <p>Now, I'm sure that you can start to think about times where you might want to use <code>x</code> or <code>name</code> or <code>value</code> or <code>el</code> or <code>sum</code> or <code>i</code> or <code>default</code> or <code>src</code> or <code>url</code> or <code>img</code> or <code>script</code>, etc several times in your whole program (tens of thousands of lines, even), and you can start to think about situations like that loop up above, where things could go wrong if you tried calling two different things by the same name.</p> <p><em><strong>This is the same problem as var-fallthrough</em></strong></p> <p>If you have one function which uses a variable called <code>x</code> and another function which uses another variable called <code>x</code>, that's great... ...unless you forget to declare the variable.</p> <pre><code>// no problems! function func1 () { var x = 0; } function func2 () { var x = "Bob"; } // big problems! function func1 () { x = 0; } function func2 () { x = "Bob"; } </code></pre> <p><code>func1</code> set <code>window.x = 0;</code> <code>func2</code> set <code>window.x = "Bob";</code></p> <p>...if <code>window.x</code> was supposed to equal 42, for some other program to work right, now you have the potential to have 3 broken apps, just because of a few missing <code>var</code>s.</p> <p>It doesn't instantly set the global variable, though. What it actually does is goes through the function chain. If you create a function inside of another function, then an undeclared var will look to its parent's vars, and then its grandparent's vars and then its great-grandparent's vars...<br> If it gets all the way to <code>window</code> and nobody has a var of that name, then it creates one with that name on <code>window</code>.</p> <pre><code>function func1 () { var x = 0; function func2 () { var y = 1; x = 2; z = 3; } func2(); } </code></pre> <p>When you call func1, it sets its own <code>x</code> to 0, and calls func2. func2 sets its own <code>y</code> to 1. Then it sets func1's <code>x</code> to 2. Then, because func2 doesn't have <code>z</code> and func1 doesn't have <code>z</code> and <code>window</code> doesn't have <code>z</code>, it sets <code>window.z</code> to 3.</p> <p>That's only the start of the confusion, and why its a very, very good idea to make sure that you're defining vars which need to be available inside of that function (and in any functions created inside of that function)... ...and when you reference pre-existing vars, you reference them carefully, and know where that var is supposed to be, in your code (which function defined it... ...so where on the chain the program is going to stop looking, before it gets to <code>window</code>), and why you're changing it from inside of another function.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload