• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Great Semicolon Debate
 

The Great Semicolon Debate

on

  • 1,214 views

...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

...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

Statistics

Views

Total Views
1,214
Views on SlideShare
1,144
Embed Views
70

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 70

http://clubajax.org 69
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \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 The Great Semicolon Debate Presentation Transcript

  • By Mike WilcoxMay 2012
  • The Great Semicolon DebateBy Mike WilcoxMay 2012
  • or how the semicolon may bring down societyBy Mike WilcoxMay 2012
  • By Mike WilcoxMay 2012
  • What does a semicolonlook like?
  • What does a semicolonlook like?
  • What does a semicolonlook like?
  • What does a semicolonlook like?
  • What does a semicolonlook like? ~ ~ !
  • What does a semicolonlook like? ~ ~ !
  • What does a semicolonlook like? ~ ~ !
  • In Other Languages
  • In Other LanguagesEnglish: ;
  • In Other LanguagesEnglish: ;French: ;
  • In Other LanguagesEnglish: ;French: ;Spanish: ;
  • In Other LanguagesEnglish: ;French: ;Spanish: ;Wingdings 1: 
  • In Other LanguagesEnglish: ;French: ;Spanish: ;Wingdings 1: Wingdings 2: 
  • In Code
  • In CodeIn CSS: Semicolons are REQUIRED
  • In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;
  • In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED
  • In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED<div class=”awesomeness”>bob</div>
  • In CodeIn CSS: Semicolons are REQUIREDbackground:#ff0000;In HTML: Semicolons are NOT USED<div class=”awesomeness”>bob</div>In JavaScript: Semicolons are... OPTIONAL
  • 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!
  • Example
  • ExampleIs this correct?var test = function(){! console.log(Hello World)}
  • ExampleIs this correct?var test = function(){! console.log(Hello World)}Or this?var test = function(){! console.log(Hello World);};
  • ExampleIs this correct?var test = function(){! console.log(Hello World)}Or this?var test = function(){! console.log(Hello World);};Answer: both!
  • ASI
  • ASIAutomatic Semicolon Insertion
  • 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.
  • 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.
  • 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.
  • Uh, no. I reallydidn’t get that.
  • ASI (simplified)
  • ASI (simplified)Automatic Semicolon Insertion
  • ASI (simplified)Automatic Semicolon Insertion Other than continue, break, return, and throw, JavaScript will consider a newline to be the end of your expression.
  • ASI Examples
  • ASI Examplesvar foo = 3var bar = “foo”var myObject = { a:1, b:2}doSomething()while(a < 1){ b++}return buzz
  • ASI Examplesvar foo = 3var bar = “foo”var myObject = { a:1, b:2}doSomething()while(a < 1){ b++}return buzzNo semicolons needed!
  • What’s the Point?
  • What’s the Point?
  • ASI Examples
  • ASI ExamplesDoes this work?
  • ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()
  • ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()ERROR: number is not a function
  • ASI ExamplesDoes this work?var foo = 1+2(bob + guru).toUpperCase()ERROR: number is not a functionJavaScript sees that code like this:
  • 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();
  • Uhhh... I thought you said JavaScript willconsider a newline to be the end of your expression.
  • ASI
  • 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.
  • 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 -.
  • 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: ( [
  • ASI Examples
  • ASI ExamplesDoes this work?
  • ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})
  • ASI ExamplesDoes this work?var foo = asdf[1,2,3].forEach(function(n){log(n)})"asdf"[1, 2, 3].forEach is not a function
  • 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?
  • 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)
  • 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
  • ASI Examples
  • ASI ExamplesWhat does this return?
  • ASI ExamplesWhat does this return?return1 + 2
  • ASI ExamplesWhat does this return?return1 + 2undefined
  • ASI ExamplesWhat does this return?return1 + 2undefinedRemember, continue, break, return, and throw areexceptions and must end with a semicolon. ASI is notused.
  • 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)
  • 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.
  • Newbie does what
  • Newbie does whatYou might think the solution is to add a semicolon tothe end of every line...
  • 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”;};
  • 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.”
  • 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.”
  • No ASI to see here
  • No ASI to see hereSemicolons should not be used for block statements.
  • 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++;}
  • This is News?
  • This is News?
  • The Trigger https://github.com/twitter/bootstrap/issues/3057
  • The TriggerclearMenus()!isActive && $parent.toggleClass(‘open’) https://github.com/twitter/bootstrap/issues/3057
  • The Response
  • The Response
  • The Response
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on Github
  • The Battle on LinkedIn
  • The Battle on LinkedIn
  • The Battle on LinkedIn
  • The Battle on LinkedIn
  • The Battle on LinkedIn
  • Library Solution
  • Library Solution
  • Library Solution Tho mas Fu chs, author of Scriptaculo us
  • Library Solution Tho mas Fu chs, author of Scriptaculo us
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • (fake) Fat Twitter Feed
  • Brendan Makes it Clear.
  • Brendan Makes it Clear. Most of the comments inthe semicolons exchange make me sad.
  • 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.
  • 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)
  • 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)
  • is an infix?
  • infix http://inimino.org/~inimino/blog/javascript_semicolons
  • 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
  • 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
  • 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
  • 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
  • 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
  • Conclusion
  • Conclusion
  • Conclusion
  • 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."
  • 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).
  • 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.