StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think about the best I can do is give you a bunch of examples to study. Javascript programmers are practically ranked by how well they understand scope. It can at times be quite counter-intuitive.</p> <ol> <li><p><strong>A globally-scoped variable</strong></p> <pre><code>// global scope var a = 1; function one() { alert(a); // alerts '1' } </code></pre></li> <li><p><strong>Local scope</strong></p> <pre><code>// global scope var a = 1; function two(a) { // passing (a) makes it local scope alert(a); // alerts the given argument, not the global value of '1' } // local scope again function three() { var a = 3; alert(a); // alerts '3' } </code></pre></li> <li><p><strong>Intermediate</strong>: <em>No such thing as block scope in JavaScript</em> (ES5; ES6 introduces <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" rel="noreferrer"><code>let</code></a>)</p> <p>a.</p> <pre><code>var a = 1; function four() { if (true) { var a = 4; } alert(a); // alerts '4', not the global value of '1' } </code></pre> <p>b.</p> <pre><code>var a = 1; function one() { if (true) { let a = 4; } alert(a); // alerts '1' because the 'let' keyword uses block scoping } </code></pre></li> <li><p><strong>Intermediate</strong>: <em>Object properties</em></p> <pre><code>var a = 1; function Five() { this.a = 5; } alert(new Five().a); // alerts '5' </code></pre></li> <li><p><strong>Advanced</strong>: <em>Closure</em></p> <pre><code>var a = 1; var six = (function() { var a = 6; return function() { // JavaScript "closure" means I have access to 'a' in here, // because it is defined in the function in which I was defined. alert(a); // alerts '6' }; })(); </code></pre></li> <li><p><strong>Advanced</strong>: <em>Prototype-based scope resolution</em></p> <pre><code>var a = 1; function seven() { this.a = 7; } // [object].prototype.property loses to // [object].property in the lookup chain. For example... // Won't get reached, because 'a' is set in the constructor above. seven.prototype.a = -1; // Will get reached, even though 'b' is NOT set in the constructor. seven.prototype.b = 8; alert(new seven().a); // alerts '7' alert(new seven().b); // alerts '8' </code></pre> <hr></li> <li><p><strong>Global+Local</strong>: <em>An extra complex Case</em></p> <pre><code>var x = 5; (function () { console.log(x); var x = 10; console.log(x); })(); </code></pre> <p>This will print out <code>undefined</code> and <code>10</code> rather than <code>5</code> and <code>10</code> since JavaScript always moves variable declarations (not initializations) to the top of the scope, making the code equivalent to:</p> <pre><code>var x = 5; (function () { var x; console.log(x); x = 10; console.log(x); })(); </code></pre></li> <li><p><strong>Catch clause-scoped variable</strong></p> <pre><code>var e = 5; console.log(e); try { throw 6; } catch (e) { console.log(e); } console.log(e); </code></pre> <p>This will print out <code>5</code>, <code>6</code>, <code>5</code>. Inside the catch clause <code>e</code> shadows global and local variables. But this special scope is only for the caught variable. If you write <code>var f;</code> inside the catch clause, then it's exactly the same as if you had defined it before or after the try-catch block.</p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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