Things to avoid in JavaScript
Upcoming SlideShare
Loading in...5
×
 

Things to avoid in JavaScript

on

  • 2,928 views

JS.Chi() 12/18/08

JS.Chi() 12/18/08

Statistics

Views

Total Views
2,928
Slideshare-icon Views on SlideShare
2,743
Embed Views
185

Actions

Likes
2
Downloads
28
Comments
0

4 Embeds 185

http://blog.javascriptmvc.com 103
http://javascriptmvc.com 58
http://javascriptchicago.com 15
http://www.techiegyan.com 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Things to avoid in JavaScript Things to avoid in JavaScript Presentation Transcript

    • Traps to avoid in JavaScript: the short list Vlad Didenko December 18th, 2008
    • Global Variables <script type=quot;text/javascriptquot;> var count; // ………Hundreds of lines of code later……… ………function ( tag ) { count = getElementsByTagName( tag ); ……… } </script> Name collisions, hard to understand code, extra documentation and maintenance. Re-factor, make sure to use «var» in inner scopes.
    • The quot;+quot; operation Adds if both operands are numbers. Runs toString() on all operands and concatenates if one of the operands is not a number. <input id=quot;in1quot; /><input id=quot;in2quot; /> <button onclick=quot;alert( [ 0, '-' ] + getElementById('in1').value + getElementById('in2').value );quot;>Add</button>
    • Default parseInt() base If string starts with «0», parseInt expects an octal number. As «9» is not an octal digit, parseInt stops at «0». month = parseInt( '09/03/2008'.split( '/' )[0] ); 0 Solution: ALWAYS use explicit base, like in: parseInt( value, 10 )
    • New-line and quot;;quot; insertions Browsers made to quot;correctquot; user errors. Syntax becomes unpredictable - semicolon inserted after the «return» in the example. Do not begin objects on a new line as a habit.
    • Bad scope assumptions var arr = [quot;firstquot;, quot;lastquot;]; Functions DO create var v = 20; scope. function test(){ var v = true; Other blocks in curly alert(v); braces do NOT create }; scope. test(); // true for (i in arr) { var v = arr[i]; This is different from }; most other languages. alert( v ); // quot;lastquot;
    • typeof() ambiguity Avoid: Use instead: var a = null; typeof( a ); var a = null; a === null; quot;objectquot; true var b = [1,2,3]; typeof( b ); Object.prototype.toString.apply( [1,2,3] ); quot;objectquot; quot;[object Array]quot; [ typeof( NaN ), typeof( Infinity ) ]; [ isNaN( NaN ), Infinity === Infinity ] quot;numberquot;, quot;numberquot; true, true
    • Fun with falsy NaN, 0, '', false, null, and undefined evaluate to false in conditional statements: undefin x==y 0 NaN '' false null ed if ( null || false ) F 0 T T T F F { alert( quot;Truthyquot; ); } else ✓ { alert( quot;Falsyquot; ); } F NaN F F F F F Be careful, though, when '' T T T F F F comparing them to each other: false T F T T F F if ( null == false ) { alert( quot;Expected.quot; ); } else null F F F F T T ✓ { alert( quot;Gotcha!!!quot; ) }; undefin F F F F T T Use the «===» operator ! ed
    • O'REILLY MEDIA, INC. MAY 2008 ISBN-10: 0596517742 ISBN-13: 978-0596517748 JavaScript: The Good Parts by Douglas Crockford