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!
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!
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.
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.
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();
51.
52. Uhhh... I thought you
said JavaScript will
consider a newline to be
the end of your
expression.
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:
(
[
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
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.
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.”
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++;
}
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)
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
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.