DEV Community

Finding Bugs in Languages/Frameworks You Don't Know: node.js

darkmage on March 29, 2019

I am helping my first node.js student. He's writing a server in node.js and I helped him find a missing parenthesis, curly-bracket, and semi-colo...

Read full post

JavaScript Joel • Mar 29 '19 • Edited

Do semi-colons matter in Javascript?

The examples you gave for #5, are valid with and without a semi-colon.

// ✅ OK
var f = function test() { 
    // ...
};

// ✅ OK
var f = function test() { 
    // ...
}

// ✅ OK
var f = () => {}

// ✅ OK
var f = () => {};

The times when you might require a semi colon are with naked expressions.

// ✅ OK
[1, 2, 3].map(x => x * 2)

// ❌ FAIL
[1, 2, 3].map(x => x * 2)
[1, 2, 3].map(x => x * 2)
//=> Cannot read property 'map' of undefined

In this instance you would have to use a semi-colon to implicitly separate the expressions.

// ✅ OK
[1, 2, 3].map(x => x * 2);
[1, 2, 3].map(x => x * 2);

darkmage • Mar 30 '19

Oh snap! Seems that Stackoverflow post needs updating ;)

Sébastien Vercammen • Mar 31 '19 • Edited

Oh snap! Seems that Stackoverflow post needs updating ;)

...No. This is the point where you need to know more JavaScript to know why this is happening, and when just getting by on assumptions and previous experience doesn't work.

This needs a semicolon:

const f = function(a) {
  return a;
}

Because e.g. build processes combine JS files. And this as a second file:

(function() { return 1; })()

Leads to a combined file of:

const f = function(a) {
  return a;
}(function() { return 1; })()

Which gives you the following result:

f = 1

Instead of defining a function f that could later be executed, and a separately defined IIFE (Immediately Invoked Function Expression) that would just be invoked in normal circumstances, the lack of a semicolon causes the result of the IIFE to be seen as the parameter for the invocation of function f:

const f = function(a) {
  return a;
}(1)

Add a semicolon and the statements are properly separated.

JavaScript Joel • Mar 31 '19

This needs a semicolon:

const f = function(a) {
return a;
}

I'm still standing by my statement as this does NOT need a semicolon.

I write semicolon-less code like this daily. Some projects for node, some for the browser, some projects for babel and some for webpack+babel.

I would need to see this reproduced in a repo to believe it. As it currently works fine for me projects without semicolons.

I have yet to see a scenario where that function expression requires a semicolon.

Except in the instance where a naked expression follows.

Cheers!

Sébastien Vercammen • Mar 31 '19 • Edited

Except in the instance where a naked expression follows.

So because there's only one situation that breaks the whole thing, you personally feel it's unnecessary.

That might be your personal opinion, but as a standard you should add a semicolon to prevent everything from breaking. If you enjoy having your own websites break, that's your own pleasure to enjoy.

It's a common scenario in build processes that include 3rd party libraries, since you might have no idea at all how that library's code starts. And updates to it can introduce an IIFE. IIFE's are also extremely common for scoping in libraries and browser extensions.

An application injecting an IIFE at the wrong place in your webpage = also breaks everything. Lots of companies do this to add functionality or scrape data, e.g. Pinterest does it in their WebView to discover pinnable content.

JavaScript Joel • Mar 31 '19 • Edited

as a standard you should add a semicolon

This is also an opinion.

Semicolons are absolutely optional.

The first thing I do in a new project is install prettier and set the semi option to off. This ensures that there are no semi colon in my projects.

I'll trying to tell you that it works because I am currently doing it.

You can look at this repo for a real world semicolon-less project. github.com/joelnet/MojiScript

The way you describe the build process is not how they work. You will never run into that scenario because they all handle semicolon-less code without issue.

It will work in webpack.
It will work in Babel.
It will work with roll-up.

So exactly which build process do you refer to?

Try to build a project yourself. You will find that it works. I guarantee it!

Sébastien Vercammen • Mar 31 '19 • Edited

I feel like you're having me repeat myself:

you personally feel it's unnecessary.

You realize that the world doesn't run on your personal build preferences, and that every third party library you're describing is not a language feature, right?

Requiring external dependencies is not a solution.

It's also not because you personally have a different build process, that the problem doesn't exist.

JavaScript Joel • Mar 31 '19

Since your theories are in direct conflict with my real world experience, and you refuse to actually run a real test to see what I am saying is correct, I don't see how this conversation can continue.

I feel like you're having me repeat myself:

Instead of continuously repeating yourself, if you were to attempt to actually create a repo you would see this for yourself.

One of us is correct and one of us is wrong. People reading this thread can test this for themselves to see who it is.

But I'll repeat myself for the final time for any other person's that stumble across this thread in the future and want the correct answer.

Since I started writing JavaScript, back from 1996 to today, with or without a build system, semi-colons are completely optional. with the exception of naked expression example mentioned in my original comment.

Cheers!

darkmage • Apr 1 '19

Let me ask you this, Joel:

Is there any security implication from omitting semicolons? Is it safer to use semicolons? I do not know the answer right now, or whether or not it matters, but I think this is something worth exploring.

JavaScript Joel • Apr 1 '19

Not that I am aware of. But if there were, it would be a game changer in the semi vs no semi debate. So I think if one was found, it would make big news.

If you minify your code, or webpack or roll-up, or Babel, then semi-colons will be added to the dist bundle anyway.

So develop in the style you prefer, use prettier and ESLint to enforce your chosen style and don't stress about it 😁

Cheers!

Sébastien Vercammen • Apr 1 '19 • Edited

Since your theories are in direct conflict with my real world experience

I've seen this problem happen in production with actual clients.

Since I started writing JavaScript, back from 1996

...ok. I'll leave you to your mental masturbation. We were talking about language implementations of semicolons, not how old you are.

For anyone that reads this thread: Know the language's implementation and consequences. It's a reasonable thing to expect you to know, and it might come up in an interview. Personal opinions don't matter much if you're asking for the answer to 1 + 1. Toolset iterates constantly and tools disappear sooner rather than later - it's JavaScript that stays. Learn from first principles.