rspec/rules/S1472/javascript/rule.adoc

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

* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion[MDN - Automatic semicolon insertion]
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping#grouping_operator_and_automatic_semicolon_insertion[MDN - Grouping operator and automatic semicolon insertion]
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates[MDN - 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[]