Code is read far more often than it is written. Comments help humans understand why the code exists, while styling (like semicolons and line breaks) helps JavaScript understand how to run it.
Comments are used to add hints, notes, suggestions, or warnings to JavaScript code. This makes code easier to read, and the JavaScript engine completely ignores them.
Line comments use // and make all text following them on the same line into a comment:
function test() {
// This is a line comment
return 1;
}
console.log(test());1
Block comments use /* and */ to span multiple lines. Be careful though: multi-line comments cannot be nested!
/* Outer
/* Inner */
let x = 1; */
console.log(x);SyntaxError
In many languages, semicolons ; are required to end every statement. JavaScript is more forgiving: it uses Automatic Semicolon Insertion (ASI). When the engine encounters a line break, it automatically inserts semicolons to “fix” invalid token sequences.
let a = 1
let b = 2
console.log(a + b)3
However, ASI is not magic. There are times when relying on it causes bizarre behavior.
What do you think happens if you place a line break immediately after the return keyword?
Read the code. What exactly will it print? Commit to an answer before you look.
function test() {
let a = 1, b = 2;
return
a + b;
}
console.log(test());undefined
function test() {
let a = 1, b = 2;
return
a + b;
}
console.log(test());undefinedJavaScript sees return and a line break, and assumes the statement is finished. It inserts a semicolon, making it return; (which returns undefined). The expression a + b becomes unreachable code.
ASI looks at the token stream and only inserts semicolons when parsing would otherwise fail. It does not insert a semicolon if the next line could technically be part of the current line!
let b = 1;
let c = 0;
b
++c;
console.log(b, c);1 1
Here, ++ is not treated as a postfix operator for b because of the line break. The engine inserted a semicolon before ++, breaking the expected logic.
Semicolons are also not inserted inside a for loop’s head:
let count = 0;
for (let i = 0; i < 1; i++) {
count++;
}
console.log(count);1
Starting a line with [, (, or ` without a preceding semicolon causes the engine to attempt to parse the previous line as a function call, array index, or template tag. Always use semicolons if the next line begins with one of these characters!
let a = 1
let c = 3
(a + 2).toString()TypeError
Without a semicolon after let c = 3, JavaScript tries to evaluate 3(a + 2), treating 3 as a function!
Whitespace and line breaks do matter in JavaScript because of ASI.
Can you nest multi-line comments?
No. The first */ closes the entire comment. — Multi-line comments (/* ... */) cannot be nested. The first */ encountered closes the comment.
What happens if you put a line break right after a return keyword?
ASI inserts a semicolon, making the function return undefined. — Breaking right after the return keyword triggers Automatic Semicolon Insertion (ASI), causing the function to return undefined.
Are semicolons completely optional and safe to ignore in JavaScript?
No, omitting semicolons before lines starting with [, (, or ` can lead to unexpected TypeErrors. — While optional in most cases, omitting semicolons before lines starting with [, (, or ` can lead to bizarre TypeErrors due to ASI failure.
Fix the function so it returns the expected array instead of undefined.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Bring the [ up to the same line as the return keyword to prevent ASI.
function getNumbers() {
return [
1,
2,
3
];
}
console.log(getNumbers().length);Fix the syntax error caused by improper use of block comments.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Remove the nested /* and */ inside the main block comment.
/* This is a comment
This is a nested comment
End of comment */
let a = 5;
console.log(a);