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!