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

1. By Mike Wilcox
May 2012

2. The Great Semicolon
Debate
By Mike Wilcox
May 2012

3. or how the semicolon
may bring down society
By Mike Wilcox
May 2012

4. By Mike Wilcox
May 2012

5. What does a semicolon
look like?

6. What does a semicolon
look like?

7. What does a semicolon
look like?

8. What does a semicolon
look like?

9. What does a semicolon
look like?
~
~ !

10. What does a semicolon
look like?
~
~ !

11. What does a semicolon
look like?
~
~ !

12. In Other Languages

13. In Other Languages
English: ;

14. In Other Languages
English: ;
French: ;

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

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

26. Example
Is this correct?
var test = function(){
! console.log('Hello World')
}

27. Example
Is this correct?
var test = function(){
! console.log('Hello World')
}
Or this?
var test = function(){
! console.log('Hello World');
};

28. Example
Is this correct?
var test = function(){
! console.log('Hello World')
}
Or this?
var test = function(){
! console.log('Hello World');
};
Answer: both!

29. ASI

30. ASI
Automatic Semicolon Insertion

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. I really
didn’t get that.

36. ASI (simplified)

37. ASI (simplified)
Automatic Semicolon Insertion

38. ASI (simplified)
Automatic Semicolon Insertion
Other than continue, break, return, and throw,
JavaScript will consider a newline to be the end of
your expression.

39. ASI Examples

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. What’s the Point?

44. What’s the Point?

45. ASI Examples

46. ASI Examples
Does this work?

47. ASI Examples
Does this work?
var foo = 1+2
('bob' + 'guru').toUpperCase()

48. ASI Examples
Does this work?
var foo = 1+2
('bob' + 'guru').toUpperCase()
ERROR: number is not a function

49. ASI Examples
Does this work?
var foo = 1+2
('bob' + 'guru').toUpperCase()
ERROR: number is not a function
JavaScript sees that code like this:

50. 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();

52. Uhhh... I thought you
said JavaScript will
consider a newline to be
the end of your
expression.

53. ASI

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

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

56. 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:
(
[

57. ASI Examples

58. ASI Examples
Does this work?

59. ASI Examples
Does this work?
var foo = 'asdf'
[1,2,3].forEach(function(n){log(n)})

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

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

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

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

64. ASI Examples

65. ASI Examples
What does this return?

66. ASI Examples
What does this return?
return
1 + 2

67. ASI Examples
What does this return?
return
1 + 2
undefined

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

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

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

71. Newbie does what

72. Newbie does what
You might think the solution is to add a semicolon to
the end of every line...

73. 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”;
};

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

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

76. No ASI to see here

77. No ASI to see here
Semicolons should not be used for block statements.

78. 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++;
}

80. This is News?

81. This is News?

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

85. The Response

86. The Response

87. The Battle on Github

88. The Battle on Github

89. The Battle on Github

90. The Battle on Github

91. The Battle on Github

92. The Battle on Github

93. The Battle on Github

94. The Battle on Github

95. The Battle on Github

96. The Battle on Github

97. The Battle on Github

98. The Battle on Github

99. The Battle on Github

100. The Battle on Github

101. The Battle on Github

102. The Battle on LinkedIn

103. The Battle on LinkedIn

104. The Battle on LinkedIn

105. The Battle on LinkedIn

106. The Battle on LinkedIn

107. Library Solution

108. Library Solution

109. Library Solution
Tho mas Fu
chs,
author of
Scriptaculo
us

110. Library Solution
Tho mas Fu
chs,
author of
Scriptaculo
us

111. (fake) Fat Twitter Feed

112. (fake) Fat Twitter Feed

113. (fake) Fat Twitter Feed

114. (fake) Fat Twitter Feed

115. (fake) Fat Twitter Feed

116. (fake) Fat Twitter Feed

117. (fake) Fat Twitter Feed

118. (fake) Fat Twitter Feed

119. (fake) Fat Twitter Feed

120. Brendan Makes it Clear.

121. Brendan Makes it Clear.
Most of the comments in
the semicolons exchange make
me sad.

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

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

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

126. is an infix?

127. infix
http://inimino.org/~inimino/blog/javascript_semicolons

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

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

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

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

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

133. Conclusion

134. Conclusion

135. Conclusion

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.