Mike Wilcox, profile picture
Uploaded byMike Wilcox
KEY, PDF2,075 views

The Great Semicolon Debate

The document discusses the use of semicolons in programming, particularly in JavaScript, highlighting the controversies surrounding their necessity and the rules governing their usage. It explains automatic semicolon insertion (ASI) and references various coding examples while cautioning against misunderstanding how newlines affect code execution. Ultimately, it emphasizes that while omitting semicolons might seem convenient, proper usage is essential for good programming practices.

Embed presentation

Downloaded 17 times
1 / 139
2 / 139
3 / 139
4 / 139
5 / 139
6 / 139
7 / 139
8 / 139
9 / 139
10 / 139
11 / 139
12 / 139
13 / 139
14 / 139
15 / 139
16 / 139
17 / 139
18 / 139
19 / 139
20 / 139
21 / 139
22 / 139
23 / 139
24 / 139
25 / 139
26 / 139
27 / 139
28 / 139
29 / 139
30 / 139
31 / 139
32 / 139
33 / 139
34 / 139
35 / 139
36 / 139
37 / 139
38 / 139
39 / 139
40 / 139
41 / 139
42 / 139
43 / 139
44 / 139
45 / 139
46 / 139
47 / 139
48 / 139
49 / 139
50 / 139
51 / 139
52 / 139
53 / 139
54 / 139
55 / 139
56 / 139
57 / 139
58 / 139
59 / 139
60 / 139
61 / 139
62 / 139
63 / 139
64 / 139
65 / 139
66 / 139
67 / 139
68 / 139
69 / 139
70 / 139
71 / 139
72 / 139
73 / 139
74 / 139
75 / 139
76 / 139
77 / 139
78 / 139
79 / 139
80 / 139
81 / 139
82 / 139
83 / 139
84 / 139
85 / 139
86 / 139
87 / 139
88 / 139
89 / 139
90 / 139
91 / 139
92 / 139
93 / 139
94 / 139
95 / 139
96 / 139
97 / 139
98 / 139
99 / 139
100 / 139
101 / 139
102 / 139
103 / 139
104 / 139
105 / 139
106 / 139
107 / 139
108 / 139
109 / 139
110 / 139
111 / 139
112 / 139
113 / 139
114 / 139
115 / 139
116 / 139
117 / 139
118 / 139
119 / 139
120 / 139
121 / 139
122 / 139
123 / 139
124 / 139
125 / 139
126 / 139
127 / 139
128 / 139
129 / 139
130 / 139
131 / 139
132 / 139
133 / 139
134 / 139
135 / 139
136 / 139
137 / 139
138 / 139
139 / 139
By Mike Wilcox May 2012
The Great Semicolon Debate By Mike Wilcox May 2012
or how the semicolon may bring down society By Mike Wilcox May 2012
By Mike Wilcox May 2012
What does a semicolon look like?
What does a semicolon look like?
What does a semicolon look like?
What does a semicolon look like?
What does a semicolon look like? ~ ~ !
What does a semicolon look like? ~ ~ !
What does a semicolon look like? ~ ~ !
In Other Languages
In Other Languages English: ;
In Other Languages English: ; French: ;
In Other Languages English: ; French: ; Spanish: ;
In Other Languages English: ; French: ; Spanish: ; Wingdings 1: 
In Other Languages English: ; French: ; Spanish: ; Wingdings 1:  Wingdings 2: 
In Code
In Code In CSS: Semicolons are REQUIRED
In Code In CSS: Semicolons are REQUIRED background:#ff0000;
In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED
In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div>
In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div> In JavaScript: Semicolons are... OPTIONAL
In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div> In JavaScript: Semicolons are... OPTIONAL Hence, the CONTROVERSY!
Example
Example Is this correct? var test = function(){ ! console.log('Hello World') }
Example Is this correct? var test = function(){ ! console.log('Hello World') } Or this? var test = function(){ ! console.log('Hello World'); };
Example Is this correct? var test = function(){ ! console.log('Hello World') } Or this? var test = function(){ ! console.log('Hello World'); }; Answer: both!
ASI
ASI Automatic Semicolon Insertion
ASI Automatic 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.
ASI Automatic 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.
ASI Automatic 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 really didn’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 Examples var foo = 3 var bar = “foo” var myObject = { a:1, b:2 } doSomething() while(a < 1){ b++ } return buzz
ASI Examples var foo = 3 var bar = “foo” var myObject = { a:1, b:2 } doSomething() while(a < 1){ b++ } return buzz No semicolons needed!
What’s the Point?
What’s the Point?
ASI Examples
ASI Examples Does this work?
ASI Examples Does this work? var foo = 1+2 ('bob' + 'guru').toUpperCase()
ASI Examples Does this work? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function
ASI Examples Does this work? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function JavaScript sees that code like this:
ASI Examples Does this work? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function JavaScript sees that code like this: var foo = 1+2('bob' + 'guru').toUpperCase();
Uhhh... I thought you said JavaScript will consider 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 Examples Does this work?
ASI Examples Does this work? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)})
ASI Examples Does this work? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function
ASI Examples Does this work? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this?
ASI Examples Does this work? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this? i=0 /[a-z]/g.exec(s)
ASI Examples Does this work? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this? i=0 /[a-z]/g.exec(s) a is not defined
ASI Examples
ASI Examples What does this return?
ASI Examples What does this return? return 1 + 2
ASI Examples What does this return? return 1 + 2 undefined
ASI Examples What does this return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used.
ASI Examples What does this return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used. return( 1 + 2 )
ASI Examples What does this return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used. return( 1 + 2 ) This works.
Newbie does what
Newbie does what You might think the solution is to add a semicolon to the end of every line...
Newbie does what You might think the solution is to add a semicolon to the end of every line... if(true){ doSomething(); }; function doBob(){ return “do not”; };
Newbie does what You might think the solution is to add a semicolon to the end of every line... if(true){ doSomething(); }; function doBob(){ return “do not”; }; Not an error! But... JSLint says: “unexpected semicolon.”
Newbie does what You might think the solution is to add a semicolon to the end of every line... if(true){ If yo u put doSomething(); o ne }; here... there ’s no function 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 here Semicolons should not be used for block statements.
No ASI to see here Semicolons 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 Trigger clearMenus() !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 in the semicolons exchange make me sad.
Brendan Makes it Clear. Most of the comments in In the proposed promises the 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 promises the 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 promises the 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 Flanagan's 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 Flanagan's 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 (I've tested that).
Conclusion David Flanagan's 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 (I've tested that). Don't forget, there are plenty of places where you are *not* supposed to use a semicolon. So really, it's ultimately a matter of understanding the rules.
The Great Semicolon Debate

More Related Content

PDF
Bi za pr - KT - LMS 162
byStripovi Klub
 
KEY
Douglas Crockford - Programming Style and Your Brain
byWeb Directions
 
PDF
Section 8 Programming Style and Your Brain: Douglas Crockford
byjaxconf
 
PDF
javascript teach
byguest3732fa
 
PDF
JSBootcamp_White
byguest3732fa
 
PDF
JavaScript for beginners
byShahrukh Ali Khan
 
PPT
Javascript
bySunil Thakur
 
PPTX
JavaScript Training in Ambala ! Batra Computer Centre
byjatin batra
 
Bi za pr - KT - LMS 162
byStripovi Klub
 
Douglas Crockford - Programming Style and Your Brain
byWeb Directions
 
Section 8 Programming Style and Your Brain: Douglas Crockford
byjaxconf
 
javascript teach
byguest3732fa
 
JSBootcamp_White
byguest3732fa
 
JavaScript for beginners
byShahrukh Ali Khan
 
Javascript
bySunil Thakur
 
JavaScript Training in Ambala ! Batra Computer Centre
byjatin batra
 

Similar to The Great Semicolon Debate

PDF
A Re-Introduction to JavaScript
bySimon Willison
 
PDF
Javascript - Tutorial
byadelaticleanu
 
PDF
Go Course Day1
byguest83950e2
 
PPT
Chapter 6 ppt
byChris Inman
 
PPTX
Javascript - Break statement, type conversion, regular expression
byShivam gupta
 
PPTX
Introduction to Client-Side Javascript
byJulie Iskander
 
PDF
Ch. 17 FIT5, CIS 110 13F
bymh-108
 
PDF
Javascript part1
byRaghu nath
 
ODP
jsbasics-slide
byPeter Borkuti
 
PPTX
JAVASCRIPT - LinkedIn
byGino Louie Peña, ITIL®,MOS®
 
PPTX
JavaScript Proven Practises
byRobert MacLean
 
PDF
Viaje al centro de la locura con Javascript
byJuan Rodríguez
 
PDF
Unit 2.5
byAbhishek Kesharwani
 
PPSX
DIWE - Programming with JavaScript
byRasan Samarasinghe
 
PDF
Javascript good parts - for novice programmers
byManohar Shetty
 
PPT
Javascript
byvikram singh
 
PDF
Amber and beyond: Java language changes
byStephen Colebourne
 
PPTX
Arduino introduction
byAbdelrahman Elewah
 
PDF
JavaScript: Core Part
by維佋 唐
 
PPTX
JavaScript 101
byMindy McAdams
 
A Re-Introduction to JavaScript
bySimon Willison
 
Javascript - Tutorial
byadelaticleanu
 
Go Course Day1
byguest83950e2
 
Chapter 6 ppt
byChris Inman
 
Javascript - Break statement, type conversion, regular expression
byShivam gupta
 
Introduction to Client-Side Javascript
byJulie Iskander
 
Ch. 17 FIT5, CIS 110 13F
bymh-108
 
Javascript part1
byRaghu nath
 
jsbasics-slide
byPeter Borkuti
 
JAVASCRIPT - LinkedIn
byGino Louie Peña, ITIL®,MOS®
 
JavaScript Proven Practises
byRobert MacLean
 
Viaje al centro de la locura con Javascript
byJuan Rodríguez
 
Unit 2.5
byAbhishek Kesharwani
 
DIWE - Programming with JavaScript
byRasan Samarasinghe
 
Javascript good parts - for novice programmers
byManohar Shetty
 
Javascript
byvikram singh
 
Amber and beyond: Java language changes
byStephen Colebourne
 
Arduino introduction
byAbdelrahman Elewah
 
JavaScript: Core Part
by維佋 唐
 
JavaScript 101
byMindy McAdams
 

More from Mike Wilcox

PDF
Accessibility for Fun and Profit
byMike Wilcox
 
PDF
WTF R PWAs?
byMike Wilcox
 
PDF
Advanced React
byMike Wilcox
 
PDF
Webpack: What it is, What it does, Whether you need it
byMike Wilcox
 
PDF
Dangerous CSS
byMike Wilcox
 
PDF
Web Components v1
byMike Wilcox
 
PDF
Great Responsive-ability Web Design
byMike Wilcox
 
PDF
Professional JavaScript: AntiPatterns
byMike Wilcox
 
PDF
Model View Madness
byMike Wilcox
 
PDF
Hardcore JavaScript – Write it Right
byMike Wilcox
 
KEY
AMD - Why, What and How
byMike Wilcox
 
KEY
Dojo & HTML5
byMike Wilcox
 
KEY
Webpage Design Basics for Non-Designers
byMike Wilcox
 
KEY
Why You Need a Front End Developer
byMike Wilcox
 
KEY
A Conversation About REST
byMike Wilcox
 
KEY
The Fight Over HTML5
byMike Wilcox
 
KEY
The Fight Over HTML5
byMike Wilcox
 
PPT
How to get a Job as a Front End Developer
byMike Wilcox
 
KEY
The History of HTML5
byMike Wilcox
 
KEY
Thats Not Flash?
byMike Wilcox
 
Accessibility for Fun and Profit
byMike Wilcox
 
WTF R PWAs?
byMike Wilcox
 
Advanced React
byMike Wilcox
 
Webpack: What it is, What it does, Whether you need it
byMike Wilcox
 
Dangerous CSS
byMike Wilcox
 
Web Components v1
byMike Wilcox
 
Great Responsive-ability Web Design
byMike Wilcox
 
Professional JavaScript: AntiPatterns
byMike Wilcox
 
Model View Madness
byMike Wilcox
 
Hardcore JavaScript – Write it Right
byMike Wilcox
 
AMD - Why, What and How
byMike Wilcox
 
Dojo & HTML5
byMike Wilcox
 
Webpage Design Basics for Non-Designers
byMike Wilcox
 
Why You Need a Front End Developer
byMike Wilcox
 
A Conversation About REST
byMike Wilcox
 
The Fight Over HTML5
byMike Wilcox
 
The Fight Over HTML5
byMike Wilcox
 
How to get a Job as a Front End Developer
byMike Wilcox
 
The History of HTML5
byMike Wilcox
 
Thats Not Flash?
byMike Wilcox
 

Recently uploaded

PDF
apidays Paris 2025 | API Layer7 Security: Real-World Use Cases (BBVA & Nexi)
byapidays
 
PDF
20260212 Security-JAWS activity results for 2025 and activity goals for 2026
byTyphon 666
 
PDF
GTM-and-Sales-Plan for a cyber security product
byAshish Jangir
 
PDF
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
PPTX
Tech Trends 2026: AI Agents, Quantum Computing, Robotics & Cybersecurity
byridwansassman
 
PDF
AI Vector Search Best Practices Multicloud Feb 2026
bySandesh Rao
 
PPTX
apidays Paris 2025 | Building Agentic Workflows
byapidays
 
PDF
Agent to agent service discovery using HashiCorp Consul and Vault
byBram Vogelaar
 
PPTX
Workflow and decision Automation with Flowable
bychakib ch
 
PDF
final~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.pdf
byomarbishtawi04
 
PDF
February 2026 Patch Tuesday hosted by Chris Goettl and Todd Schell
byIvanti
 
PPTX
PPTX game guess the logo with a twistppt
byAdrianAnig
 
PDF
shayk.online - Anonymous chat with Sinatra and WebSockets
byEleanor McHugh
 
PDF
GDG Cloud Southlake #49: Pradeep R Kumar: Implications of Agentic AI for Iden...
byJames Anderson
 
PPTX
Introducing VisualSim 2610 The Next Leap in System Level Modeling
byDeepak Shankar
 
PDF
Constraint Collapse and Fidelity Decay in Scaled Language Models
bySemantic Fidelity Lab | A. Jacobs
 
PDF
Chapter 5 Security Mechanisms iin computer security.pdf
byGetnet Tigabie Askale -(GM)
 
PDF
Security-Fails-in-the-Gaps-Between-Systems.pptx.pdf
byOhhproJunction
 
PPTX
Do You Control the AI, or Does the AI Control You?
bymedhateltoukhy
 
PDF
Founder & Tech Lead | Web Development & Digital Growth Consultant | Helping B...
byShyamal Das
 
apidays Paris 2025 | API Layer7 Security: Real-World Use Cases (BBVA & Nexi)
byapidays
 
20260212 Security-JAWS activity results for 2025 and activity goals for 2026
byTyphon 666
 
GTM-and-Sales-Plan for a cyber security product
byAshish Jangir
 
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
Tech Trends 2026: AI Agents, Quantum Computing, Robotics & Cybersecurity
byridwansassman
 
AI Vector Search Best Practices Multicloud Feb 2026
bySandesh Rao
 
apidays Paris 2025 | Building Agentic Workflows
byapidays
 
Agent to agent service discovery using HashiCorp Consul and Vault
byBram Vogelaar
 
Workflow and decision Automation with Flowable
bychakib ch
 
final~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.pdf
byomarbishtawi04
 
February 2026 Patch Tuesday hosted by Chris Goettl and Todd Schell
byIvanti
 
PPTX game guess the logo with a twistppt
byAdrianAnig
 
shayk.online - Anonymous chat with Sinatra and WebSockets
byEleanor McHugh
 
GDG Cloud Southlake #49: Pradeep R Kumar: Implications of Agentic AI for Iden...
byJames Anderson
 
Introducing VisualSim 2610 The Next Leap in System Level Modeling
byDeepak Shankar
 
Constraint Collapse and Fidelity Decay in Scaled Language Models
bySemantic Fidelity Lab | A. Jacobs
 
Chapter 5 Security Mechanisms iin computer security.pdf
byGetnet Tigabie Askale -(GM)
 
Security-Fails-in-the-Gaps-Between-Systems.pptx.pdf
byOhhproJunction
 
Do You Control the AI, or Does the AI Control You?
bymedhateltoukhy
 
Founder & Tech Lead | Web Development & Digital Growth Consultant | Helping B...
byShyamal Das
 

The Great Semicolon Debate

  • 1.
  • 2.
    The Great Semicolon Debate By Mike Wilcox May 2012
  • 3.
    or how thesemicolon may bring down society By Mike Wilcox May 2012
  • 4.
  • 5.
    What does asemicolon look like?
  • 6.
    What does asemicolon look like?
  • 7.
    What does asemicolon look like?
  • 8.
    What does asemicolon look like?
  • 9.
    What does asemicolon look like? ~ ~ !
  • 10.
    What does asemicolon look like? ~ ~ !
  • 11.
    What does asemicolon look like? ~ ~ !
  • 12.
  • 13.
  • 14.
  • 15.
    In Other Languages English: ; French: ; Spanish: ;
  • 16.
    In Other Languages English: ; French: ; Spanish: ; Wingdings 1: 
  • 17.
    In Other Languages English: ; French: ; Spanish: ; Wingdings 1:  Wingdings 2: 
  • 18.
  • 19.
    In Code In CSS: Semicolons are REQUIRED
  • 20.
    In Code In CSS: Semicolons are REQUIRED background:#ff0000;
  • 21.
    In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED
  • 22.
    In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div>
  • 23.
    In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div> In JavaScript: Semicolons are... OPTIONAL
  • 24.
    In Code In CSS: Semicolons are REQUIRED background:#ff0000; In HTML: Semicolons are NOT USED <div class=”awesomeness”>bob</div> In JavaScript: Semicolons are... OPTIONAL Hence, the CONTROVERSY!
  • 25.
  • 26.
    Example Is this correct? vartest = function(){ ! console.log('Hello World') }
  • 27.
    Example Is this correct? vartest = function(){ ! console.log('Hello World') } Or this? var test = function(){ ! console.log('Hello World'); };
  • 28.
    Example Is this correct? vartest = function(){ ! console.log('Hello World') } Or this? var test = function(){ ! console.log('Hello World'); }; Answer: both!
  • 29.
  • 30.
  • 31.
    ASI Automatic 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.
    ASI Automatic 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.
    ASI Automatic 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.
  • 35.
    Uh, no. Ireally didn’t get that.
  • 36.
    ASI (simplified)
  • 37.
    ASI (simplified) AutomaticSemicolon Insertion
  • 38.
    ASI (simplified) AutomaticSemicolon Insertion Other than continue, break, return, and throw, JavaScript will consider a newline to be the end of your expression.
  • 39.
  • 40.
    ASI Examples var foo= 3 var bar = “foo” var myObject = { a:1, b:2 } doSomething() while(a < 1){ b++ } return buzz
  • 41.
    ASI Examples var foo= 3 var bar = “foo” var myObject = { a:1, b:2 } doSomething() while(a < 1){ b++ } return buzz No semicolons needed!
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
    ASI Examples Does thiswork? var foo = 1+2 ('bob' + 'guru').toUpperCase()
  • 48.
    ASI Examples Does thiswork? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function
  • 49.
    ASI Examples Does thiswork? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function JavaScript sees that code like this:
  • 50.
    ASI Examples Does thiswork? var foo = 1+2 ('bob' + 'guru').toUpperCase() ERROR: number is not a function JavaScript sees that code like this: var foo = 1+2('bob' + 'guru').toUpperCase();
  • 52.
    Uhhh... I thoughtyou said JavaScript will consider a newline to be the end of your expression.
  • 53.
  • 54.
    ASI A semicolonis 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.
  • 55.
    ASI A semicolonis 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 -.
  • 56.
    ASI A semicolonis 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: ( [
  • 57.
  • 58.
  • 59.
    ASI Examples Does thiswork? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)})
  • 60.
    ASI Examples Does thiswork? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function
  • 61.
    ASI Examples Does thiswork? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this?
  • 62.
    ASI Examples Does thiswork? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this? i=0 /[a-z]/g.exec(s)
  • 63.
    ASI Examples Does thiswork? var foo = 'asdf' [1,2,3].forEach(function(n){log(n)}) "asdf"[1, 2, 3].forEach is not a function What’s wrong with this? i=0 /[a-z]/g.exec(s) a is not defined
  • 64.
  • 65.
  • 66.
    ASI Examples What doesthis return? return 1 + 2
  • 67.
    ASI Examples What doesthis return? return 1 + 2 undefined
  • 68.
    ASI Examples What doesthis return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used.
  • 69.
    ASI Examples What doesthis return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used. return( 1 + 2 )
  • 70.
    ASI Examples What doesthis return? return 1 + 2 undefined Remember, continue, break, return, and throw are exceptions and must end with a semicolon. ASI is not used. return( 1 + 2 ) This works.
  • 71.
  • 72.
    Newbie does what Youmight think the solution is to add a semicolon to the end of every line...
  • 73.
    Newbie does what Youmight think the solution is to add a semicolon to the end of every line... if(true){ doSomething(); }; function doBob(){ return “do not”; };
  • 74.
    Newbie does what Youmight think the solution is to add a semicolon to the end of every line... if(true){ doSomething(); }; function doBob(){ return “do not”; }; Not an error! But... JSLint says: “unexpected semicolon.”
  • 75.
    Newbie does what Youmight think the solution is to add a semicolon to the end of every line... if(true){ If yo u put doSomething(); o ne }; here... there ’s no function doBob(){ helping yo u r return “do not”; }; cause. Not an error! But... JSLint says: “unexpected semicolon.”
  • 76.
    No ASI tosee here
  • 77.
    No ASI tosee here Semicolons should not be used for block statements.
  • 78.
    No ASI tosee here Semicolons 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++; }
  • 80.
  • 81.
  • 82.
    The Trigger https://github.com/twitter/bootstrap/issues/3057
  • 83.
    The Trigger clearMenus() !isActive &&$parent.toggleClass(‘open’) https://github.com/twitter/bootstrap/issues/3057
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
    The Battle onLinkedIn
  • 103.
    The Battle onLinkedIn
  • 104.
    The Battle onLinkedIn
  • 105.
    The Battle onLinkedIn
  • 106.
    The Battle onLinkedIn
  • 107.
  • 108.
  • 109.
    Library Solution Tho mas Fu chs, author of Scriptaculo us
  • 110.
    Library Solution Tho mas Fu chs, author of Scriptaculo us
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
    Brendan Makes itClear. Most of the comments in the semicolons exchange make me sad.
  • 122.
    Brendan Makes itClear. Most of the comments in In the proposed promises the 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.
  • 123.
    Brendan Makes itClear. Most of the comments in In the proposed promises the 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)
  • 124.
    Brendan Makes itClear. Most of the comments in In the proposed promises the 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)
  • 126.
  • 127.
    infix http://inimino.org/~inimino/blog/javascript_semicolons
  • 128.
    infix An infixis an operand that goes in between numbers instead of in front of, or after them. http://inimino.org/~inimino/blog/javascript_semicolons
  • 129.
    infix An infixis 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
  • 130.
    infix An infixis 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
  • 131.
    infix An infixis 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
  • 132.
    infix An infixis 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
  • 133.
  • 134.
  • 135.
  • 136.
    Conclusion David Flanagan's JS Definitive Guide on semi- colons: "Omitting semi-colons is not good programming practice; you should get in the habit of using them."
  • 137.
    Conclusion David Flanagan's 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 (I've tested that).
  • 138.
    Conclusion David Flanagan's 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 (I've tested that). Don't forget, there are plenty of places where you are *not* supposed to use a semicolon. So really, it's ultimately a matter of understanding the rules.

Editor's Notes