The Great Semicolon Debate

1,745 views
1,621 views

Published on

...or how the semicolon may bring down society. A not-so serious look at the semicolon debate sparked by the bug in Twitter's bootstrap and JSMin

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,745
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The Great Semicolon Debate

    1. 1. By Mike WilcoxMay 2012
    2. 2. The Great Semicolon DebateBy Mike WilcoxMay 2012
    3. 3. or how the semicolon may bring down societyBy Mike WilcoxMay 2012
    4. 4. By Mike WilcoxMay 2012
    5. 5. What does a semicolonlook like?
    6. 6. What does a semicolonlook like?
    7. 7. What does a semicolonlook like?
    8. 8. What does a semicolonlook like?
    9. 9. What does a semicolonlook like? ~ ~ !
    10. 10. What does a semicolonlook like? ~ ~ !
    11. 11. What does a semicolonlook like? ~ ~ !
    12. 12. In Other Languages
    13. 13. In Other LanguagesEnglish: ;
    14. 14. In Other LanguagesEnglish: ;French: ;
    15. 15. In Other LanguagesEnglish: ;French: ;Spanish: ;
    16. 16. In Other LanguagesEnglish: ;French: ;Spanish: ;Wingdings 1: 
    17. 17. In Other LanguagesEnglish: ;French: ;Spanish: ;Wingdings 1: Wingdings 2: 
    18. 18. In Code
    19. 19. In CodeIn CSS: Semicolons are REQUIRED
    20. 20. In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;
    21. 21. In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED
    22. 22. In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED<div class=”awesomeness”>bob</div>
    23. 23. In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED<div class=”awesomeness”>bob</div>In JavaScript: Semicolons are... OPTIONAL
    24. 24. In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED<div class=”awesomeness”>bob</div>In JavaScript: Semicolons are... OPTIONAL Hence, the CONTROVERSY!
    25. 25. Example
    26. 26. ExampleIs this correct?var test = function(){! console.log(Hello World)}
    27. 27. ExampleIs this correct?var test = function(){! console.log(Hello World)}Or this?var test = function(){! console.log(Hello World);};
    28. 28. ExampleIs this correct?var test = function(){! console.log(Hello World)}Or this?var test = function(){! console.log(Hello World);};Answer: both!
    29. 29. ASI
    30. 30. ASIAutomatic Semicolon Insertion
    31. 31. ASIAutomatic Semicolon Insertion Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons.
    32. 32. ASIAutomatic Semicolon Insertion Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. For convenience, however, such semicolons may be omitted from the source text in certain situations.
    33. 33. ASIAutomatic Semicolon Insertion Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.
    34. 34. Uh, no. I reallydidn’t get that.
    35. 35. ASI (simplified)
    36. 36. ASI (simplified)Automatic Semicolon Insertion
    37. 37. ASI (simplified)Automatic Semicolon Insertion Other than continue, break, return, and throw, JavaScript will consider a newline to be the end of your expression.
    38. 38. ASI Examples
    39. 39. ASI Examplesvar foo = 3var bar = “foo”var myObject = { a:1, b:2}doSomething()while(a < 1){ b++}return buzz
    40. 40. ASI Examplesvar foo = 3var bar = “foo”var myObject = { a:1, b:2}doSomething()while(a < 1){ b++}return buzzNo semicolons needed!
    41. 41. What’s the Point?
    42. 42. What’s the Point?
    43. 43. ASI Examples
    44. 44. ASI ExamplesDoes this work?
    45. 45. ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()
    46. 46. ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()ERROR: number is not a function
    47. 47. ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()ERROR: number is not a functionJavaScript sees that code like this:
    48. 48. ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()ERROR: number is not a functionJavaScript sees that code like this:var foo = 1+2(bob + guru).toUpperCase();
    49. 49. Uhhh... I thought you said JavaScript willconsider a newline to be the end of your expression.
    50. 50. ASI
    51. 51. ASI A semicolon is not implied at the end of a line if the first token of the subsequent line can be parsed as part of the same statement.
    52. 52. ASI A semicolon is not implied at the end of a line if the first token of the subsequent line can be parsed as part of the same statement. There are five tokens that can appear both at the start of a statement, and as an extension of a complete statement. These tokens are the open parenthesis ( open square brace [ slash or solidus /, and + and -.
    53. 53. ASI A semicolon is not implied at the end of a line if the first token of the subsequent line can be parsed as part of the same statement. There are five tokens that can appear both at the start of a statement, and as an extension of a complete statement. These tokens are the open parenthesis ( open square brace [ slash or solidus /, and + and -. In particular, these will cause you problems: ( [
    54. 54. ASI Examples
    55. 55. ASI ExamplesDoes this work?
    56. 56. ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})
    57. 57. ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})"asdf"[1, 2, 3].forEach is not a function
    58. 58. ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})"asdf"[1, 2, 3].forEach is not a functionWhat’s wrong with this?
    59. 59. ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})"asdf"[1, 2, 3].forEach is not a functionWhat’s wrong with this?i=0/[a-z]/g.exec(s)
    60. 60. ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})"asdf"[1, 2, 3].forEach is not a functionWhat’s wrong with this?i=0/[a-z]/g.exec(s)a is not defined
    61. 61. ASI Examples
    62. 62. ASI ExamplesWhat does this return?
    63. 63. ASI ExamplesWhat does this return?return1 + 2
    64. 64. ASI ExamplesWhat does this return?return1 + 2undefined
    65. 65. ASI ExamplesWhat does this return?return1 + 2undefinedRemember, continue, break, return, and throw areexceptions and must end with a semicolon. ASI is notused.
    66. 66. ASI ExamplesWhat does this return?return1 + 2undefinedRemember, continue, break, return, and throw areexceptions and must end with a semicolon. ASI is notused.return( 1 + 2)
    67. 67. ASI ExamplesWhat does this return?return1 + 2undefinedRemember, continue, break, return, and throw areexceptions and must end with a semicolon. ASI is notused.return( 1 + 2)This works.
    68. 68. Newbie does what
    69. 69. Newbie does whatYou might think the solution is to add a semicolon tothe end of every line...
    70. 70. Newbie does whatYou might think the solution is to add a semicolon tothe end of every line...if(true){ doSomething();};function doBob(){ return “do not”;};
    71. 71. Newbie does whatYou might think the solution is to add a semicolon tothe end of every line...if(true){ doSomething();};function doBob(){ return “do not”;};Not an error! But... JSLint says:“unexpected semicolon.”
    72. 72. Newbie does whatYou might think the solution is to add a semicolon tothe end of every line...if(true){ If yo u put doSomething(); o ne}; here... there ’s nofunction doBob(){ helping yo u r return “do not”;}; cause.Not an error! But... JSLint says:“unexpected semicolon.”
    73. 73. No ASI to see here
    74. 74. No ASI to see hereSemicolons should not be used for block statements.
    75. 75. No ASI to see hereSemicolons should not be used for block statements.if(true){ doSomething();}function doBob(){ return “do not”;}while(true){ doBob();}for(var ba=0; ba<beer.left; ba++){ drink++;}
    76. 76. This is News?
    77. 77. This is News?
    78. 78. The Trigger https://github.com/twitter/bootstrap/issues/3057
    79. 79. The TriggerclearMenus()!isActive && $parent.toggleClass(‘open’) https://github.com/twitter/bootstrap/issues/3057
    80. 80. The Response
    81. 81. The Response
    82. 82. The Response
    83. 83. The Battle on Github
    84. 84. The Battle on Github
    85. 85. The Battle on Github
    86. 86. The Battle on Github
    87. 87. The Battle on Github
    88. 88. The Battle on Github
    89. 89. The Battle on Github
    90. 90. The Battle on Github
    91. 91. The Battle on Github
    92. 92. The Battle on Github
    93. 93. The Battle on Github
    94. 94. The Battle on Github
    95. 95. The Battle on Github
    96. 96. The Battle on Github
    97. 97. The Battle on Github
    98. 98. The Battle on LinkedIn
    99. 99. The Battle on LinkedIn
    100. 100. The Battle on LinkedIn
    101. 101. The Battle on LinkedIn
    102. 102. The Battle on LinkedIn
    103. 103. Library Solution
    104. 104. Library Solution
    105. 105. Library Solution Tho mas Fu chs, author of Scriptaculo us
    106. 106. Library Solution Tho mas Fu chs, author of Scriptaculo us
    107. 107. (fake) Fat Twitter Feed
    108. 108. (fake) Fat Twitter Feed
    109. 109. (fake) Fat Twitter Feed
    110. 110. (fake) Fat Twitter Feed
    111. 111. (fake) Fat Twitter Feed
    112. 112. (fake) Fat Twitter Feed
    113. 113. (fake) Fat Twitter Feed
    114. 114. (fake) Fat Twitter Feed
    115. 115. (fake) Fat Twitter Feed
    116. 116. Brendan Makes it Clear.
    117. 117. Brendan Makes it Clear. Most of the comments inthe semicolons exchange make me sad.
    118. 118. Brendan Makes it Clear. Most of the comments in In the proposed promisesthe semicolons exchange make grammar and you’ll see something me sad. surprising about ASI and infix operators: we can add new infix operators in the future.
    119. 119. Brendan Makes it Clear. Most of the comments in In the proposed promisesthe semicolons exchange make grammar and you’ll see something me sad. surprising about ASI and infix operators: we can add new infix operators in the future. let flag = x is y; // no n before is! x ! p = v; // Q(x).put(’p’, v)
    120. 120. Brendan Makes it Clear. Most of the comments in In the proposed promisesthe semicolons exchange make grammar and you’ll see something me sad. surprising about ASI and infix operators: we can add new infix operators in the future. The moral of this story: ASI is (formally speaking) a syntactic error correction procedure. If you start to code as if it were a universal significant- newline rule, you will get into trouble. let flag = x is y; // no n before is! x ! p = v; // Q(x).put(’p’, v)
    121. 121. is an infix?
    122. 122. infix http://inimino.org/~inimino/blog/javascript_semicolons
    123. 123. infix An infix is an operand that goes in between numbers instead of in front of, or after them. http://inimino.org/~inimino/blog/javascript_semicolons
    124. 124. infix An infix is an operand that goes in between numbers instead of in front of, or after them. infix: 2 + 2 prefix: + 2 2 postfix: 2 2 + http://inimino.org/~inimino/blog/javascript_semicolons
    125. 125. infix An infix is an operand that goes in between numbers instead of in front of, or after them. infix: 2 + 2 prefix: + 2 2 postfix: 2 2 + Infix is much more difficult for machines to parse, but it is done so for the sake of human familiarity http://inimino.org/~inimino/blog/javascript_semicolons
    126. 126. infix An infix is an operand that goes in between numbers instead of in front of, or after them. infix: 2 + 2 prefix: + 2 2 postfix: 2 2 + Infix is much more difficult for machines to parse, but it is done so for the sake of human familiarity var foo = asdf http://inimino.org/~inimino/blog/javascript_semicolons
    127. 127. infix An infix is an operand that goes in between numbers instead of in front of, or after them. infix: 2 + 2 prefix: + 2 2 postfix: 2 2 + Infix is much more difficult for machines to parse, but it is done so for the sake of human familiarity var foo = asdf[1,2,3].forEach(function(n){log(n)}) http://inimino.org/~inimino/blog/javascript_semicolons
    128. 128. Conclusion
    129. 129. Conclusion
    130. 130. Conclusion
    131. 131. Conclusion David Flanagans JS Definitive Guide on semi- colons: "Omitting semi-colons is not good programming practice; you should get in the habit of using them."
    132. 132. Conclusion David Flanagans JS Definitive Guide on semi- colons: "Omitting semi-colons is not good programming practice; you should get in the habit of using them." Brendan Eich designed newline-terminators quite consciously, and they will not break in strict- mode (Ive tested that).
    133. 133. Conclusion David Flanagans JS Definitive Guide on semi- colons: "Omitting semi-colons is not good programming practice; you should get in the habit of using them." Brendan Eich designed newline-terminators quite consciously, and they will not break in strict- mode (Ive tested that). Dont forget, there are plenty of places where you are *not* supposed to use a semicolon. So really, its ultimately a matter of understanding the rules.

    ×