112 lines
3.5 KiB
Plaintext
112 lines
3.5 KiB
Plaintext
== Why is this an issue?
|
|
|
|
JavaScript will automatically insert semicolons when parsing the code so invalid sequences can be "fixed" to valid syntax. This behavior, called https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion["Automatic semicolon insertion"] or *ASI*, makes semicolons at the end of statements optional and attempts to make JavaScript more approachable and convenient.
|
|
|
|
However, sometimes, relying on ASI can lead to unexpected results. ASI will only be triggered if a line break separates tokens that would otherwise produce invalid syntax. JavaScript will not insert semicolons if the next token can be parsed as part of a valid structure.
|
|
|
|
In the case of function call arguments, they are allowed to be on a separate line. But, depending on the developer's intent and, especially when working with https://developer.mozilla.org/en-US/docs/Glossary/IIFE[IIFE] (or any other design pattern using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping[Grouping operator]), it can lead to errors and most likely _will_ lead to questions for maintainers.
|
|
|
|
What was the initial intent of the developer?
|
|
|
|
. Defining a function and then executing some unrelated code inside a closure?
|
|
. Passing the second function as a parameter to the first one?
|
|
|
|
The first option will be the one chosen by the JavaScript interpreter.
|
|
|
|
[source,javascript]
|
|
----
|
|
const fn = function () {
|
|
//...
|
|
}
|
|
|
|
(function () { // Noncompliant: function is passed as a parameter to fn
|
|
//...
|
|
})();
|
|
----
|
|
|
|
By extension, and to improve readability, any kind of function call argument should not start on a new line.
|
|
|
|
[source,javascript]
|
|
----
|
|
// Define a function
|
|
const fn = function () {
|
|
//...
|
|
}; // <-- semicolon added
|
|
|
|
// then execute some code inside a closure
|
|
(function () {
|
|
//...
|
|
})();
|
|
----
|
|
|
|
Or
|
|
|
|
[source,javascript]
|
|
----
|
|
var fn = function () {
|
|
//...
|
|
}(function () { // <-- start function call arguments on same line
|
|
//...
|
|
})();
|
|
----
|
|
|
|
Similarly, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates[tagged templates] allow for advanced forms of string interpolation by evaluating the tag as a function to call, passing the
|
|
template literal elements as arguments.
|
|
|
|
[source,javascript]
|
|
----
|
|
const foo = function() {
|
|
return 'foo';
|
|
}
|
|
|
|
`bar`; // Noncompliant: `bar` passed as a parameter to function. foo is a string, not a function
|
|
----
|
|
|
|
|
|
Therefore, the rule also verifies that template literals don't start on a separate line.
|
|
|
|
|
|
[source,javascript]
|
|
----
|
|
function foo() { // <-- Use a function declaration
|
|
return 'foo';
|
|
}
|
|
|
|
`bar`;
|
|
----
|
|
|
|
Or
|
|
|
|
[source,javascript]
|
|
----
|
|
const foo = function() {
|
|
return 'foo';
|
|
}`bar`; // <-- start template literal on same line
|
|
----
|
|
|
|
== Resouces
|
|
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion[Automatic semicolon insertion]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping#grouping_operator_and_automatic_semicolon_insertion[Grouping operator and automatic semicolon insertion]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates[Tagged templates]
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
include::../message.adoc[]
|
|
|
|
include::../highlighting.adoc[]
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
include::../comments-and-links.adoc[]
|
|
|
|
endif::env-github,rspecator-view[]
|