-2
\$\begingroup\$

TLDR: Does the javascript community regard it as poor syntax to include a terminating semicolon inside an anonymous function inside an Event Listener / Event Assignment statement, when the terminating semicolon of the surrounding statement will be following not long after?


I'm currently writing a parser which reads optimised data and outputs javascript.

Generally, when the parser encounters data describing an Event Listener Statement, if an anonymous function is provided instead of a named callback, it will output something like the following:

Event Listener Statement:

myNode.addEventListener('click', () => {

  console.log('You clicked myNode.');

}, false);

Very occasionally, the data may describe an Event Assignment Statement instead:

Event Assignment Statement:

myNode.onclick = () => {

  console.log('You clicked myNode.');

};

Now, if I were handwriting the two examples above, I'd write them as:

Event Listener Statement:

myNode.addEventListener('click', () => console.log('You clicked myNode.'), false);

and

Event Assignment Statement:

myNode.onclick = () => console.log('You clicked myNode.');

In Summary: I'd not only skip the newlines, but in each case I'd also skip the curly braces ({}) since they're not necessary for any arrow functions implicitly returning a single statement and I'd definitely skip the semicolon (;) at the end of the single-statement anonymous arrow function.


And that last consideration leads to my question:

Does the javascript community regard it as poor (superfluous?) syntax to include a terminating semicolon inside an anonymous function inside an Event Listener / Event Assignment statement, when the terminating semicolon of the statement itself will be following not long after?

Or can I continue to allow my parser to do its own robotic thing and not worry about its grungy semi-colon-heavy style?

\$\endgroup\$
2
  • 2
    \$\begingroup\$ You're getting downvotes/close votes because you've presented us with hypothetical code, not code you wrote (i.e, from a project/assignment). \$\endgroup\$
    – Linny
    Feb 5, 2020 at 23:19
  • \$\begingroup\$ I'm not really understanding the difference, @Linny. Are you saying it makes a difference whether I use .onclick in my example above or .onsuccess? Because, otherwise, this is code that I wrote. (Or, rather, it's code that code I wrote wrote.) \$\endgroup\$
    – Rounin
    Feb 7, 2020 at 16:00

1 Answer 1

3
\$\begingroup\$

Semi-colons aren't necessarily required in JavaScript, and to be honest it's a pretty divisive topic in the JS community. Having said that, I think that it is generally considered good practice to always terminate your statements. Using things such as a beautifier or minifier will typically add semi-colons into your code where necessary/missing (depending on your rules).

If you follow some popular JS code style guides; Google's Style Guide, they indicate that semi-colons are required and automatic insertion is forbidden. AirBnB's Style Guide basically says the exact same thing.

Edit: To clarify, I am saying that this snippet would be the "recommended" way to go, if you were to follow either of the 2 style guides that I shared.

myNode.addEventListener('click', () => { console.log('You clicked myNode.'); }, false);

You need the braces in an arrow function, if you want to use semicolons. If you don't want to use semicolon, braces are not required for syntactic correctness.

\$\endgroup\$
3
  • \$\begingroup\$ Thanks for that. So, to clarify, are you explicitly saying that: myNode.addEventListener('click', () => {console.log('You clicked myNode.');}, false); is regarded as better practice than myNode.addEventListener('click', () => console.log('You clicked myNode.'), false);? Many thanks. \$\endgroup\$
    – Rounin
    Feb 5, 2020 at 18:14
  • 1
    \$\begingroup\$ @Rounin see my update :) \$\endgroup\$ Feb 5, 2020 at 18:19
  • 1
    \$\begingroup\$ Thanks again. I've bookmarked the two style guides you've linked to above. That was the confirmation I needed. Hah. That's hilarious. The parser I wrote writes better javascript than I do. \$\endgroup\$
    – Rounin
    Feb 5, 2020 at 18:27

Not the answer you're looking for? Browse other questions tagged or ask your own question.