StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>Not jQuery. Not YUI. Not (etc. etc.)</em></p> <p>Frameworks may be useful, but they are often hiding the sometimes-ugly details of how JavaScript and the DOM actually work from you. If your aim is to be able to say “I know JavaScript”, then investing a lot of time in a framework is opposed to that.</p> <p>Here are some JavaScript language features that you should know to grok what it's doing and not get caught out, but which aren't immediately obvious to many people:</p> <ul> <li><p>That <code>object.prop</code> and <code>object['prop']</code> are the same thing (so can you please stop using <code>eval</code>, thanks); that object properties are always strings (even for arrays); <a href="http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop" rel="nofollow noreferrer">what <code>for</code>...<code>in</code> is for</a> (and <a href="http://bonsaiden.github.com/JavaScript-Garden/#array.general" rel="nofollow noreferrer">what it isn't</a>).</p></li> <li><p>Property-sniffing; what <code>undefined</code> is (and <a href="https://stackoverflow.com/questions/2235622/setting-a-variable-to-undefined/2236186#2236186">why it smells</a>); why the seemingly-little-known <code>in</code> operator is beneficial and different from <code>typeof</code>/<code>undefined</code> checks; <code>hasOwnProperty</code>; the purpose of <code>delete</code>.</p></li> <li><p>That the <code>Number</code> datatype is really a float; the language-independent difficulties of using floats; avoiding the <code>parseInt</code> octal trap.</p></li> <li><p>Nested function scoping; the necessity of using <code>var</code> in the scope you want to avoid accidental globals; how scopes can be used for closures; the <a href="https://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function">closure loop problem</a>.</p></li> <li><p>How global variables and <code>window</code> properties collide; how global variables and document elements shouldn't collide but do in IE; the necessity of using <code>var</code> in global scope too to avoid this.</p></li> <li><p>How the <code>function</code> statement acts to ‘<a href="https://stackoverflow.com/questions/1710424/referencing-a-javascript-value-before-it-is-declared-can-someone-explain-this/1710509#1710509">hoist</a>’ a definition before code preceding it; the difference between function statements and function expressions; why named function expressions <a href="http://kangax.github.com/nfe/#jscript-bugs" rel="nofollow noreferrer">should not be used</a>.</p></li> <li><p>How constructor functions, the <code>prototype</code> property and the <code>new</code> operator really work; <a href="https://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript">methods</a> of exploiting this to create the normal class/subclass/instance system you actually wanted; when you might want to use closure-based objects instead of prototyping. (Most JS tutorial material is absolutely terrible on this; it took me years to get it straight in my head.)</p></li> <li><p>How <code>this</code> is determined at call-time, not bound; how consequently method-passing <a href="https://stackoverflow.com/questions/1544735/js-object-this-method-breaks-via-jquery#1544893">doesn't work like you expect</a> from other languages; how closures or <code>Function#bind</code> may be used to get around that.</p></li> <li><p>Other ECMAScript Fifth Edition features like <code>indexOf</code>, <code>forEach</code> and the functional-programming <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Arrays#Introduced_in_JavaScript_1.6" rel="nofollow noreferrer">methods on <code>Array</code></a>; how to fix up older browsers to ensure you can use them; using them with inline anonymous function expressions to get compact, readable code.</p></li> <li><p>The flow of control between the browser and user code; synchronous and asynchronous execution; events that fire inside the flow of control (eg. focus) vs. events and timeouts that occur when control returns; how calling a supposedly-synchronous builtin like <code>alert</code> can end up causing potentially-disastrous re-entrancy.</p></li> <li><p>How cross-window scripting affects <code>instanceof</code>; how cross-window scripting affects the control flow across different documents; how <code>postMessage</code> will hopefully fix this.</p></li> </ul> <p>See <a href="https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">this answer</a> regarding the last two items.</p> <p>Most of all, you should be viewing JavaScript critically, acknowledging that it is for historical reasons an imperfect language (even more than most languages), and avoiding its worst troublespots. Crockford's work on this front is definitely worth reading (although I don't 100% agree with him on which the “Good Parts” are).</p>

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