Javascript - Can indentation on method chaining cause issues with semicolons?

Question

From JSLint.com:

JavaScript uses a C-like syntax which requires the use of semicolons to delimit certain statements. JavaScript attempts to make those semicolons optional with a semicolon insertion mechanism. This is dangerous because it can mask errors.

Like C, JavaScript has ++ and -- and ( operators which can be prefixes or suffixes. The disambiguation is done by the semicolon.

In JavaScript, a linefeed can be whitespace or it can act as a semicolon. This replaces one ambiguity with another.

JSLint expects that every statement be followed by ; except for for, function, if, switch, try, and while. JSLint does not expect to see unnecessary semicolons or the empty statement.

So a good practice is:

var one = 'something';
var two = 'other thing';

vs:

var one = 'something'
  , two = 'other thing';

When it comes to method chaining, Air BnB's Style Guide - under the Whitespace Section suggests using indentation for method chains.

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
    .attr('width',  (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .class('led', true)
    .attr('width',  (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

Can this sort of indentation causes issues when Javascript goes to insert semicolons?

Answer 1

No. Indentation is ignored and the line breaks will be too since a valid statement continues on the following lines that have the chained methods.

JavaScript's automatic semicolon insertion is a little complex, but for the most part is very intuitive.

The issues that people run into is where having operators that can be interpreted as a postfix operator start a line where the previous statement wasn't terminated. None of your code suffers from that issue.

As long as you're not forgetting semicolons in a situation like this:

// forgot--v
var a = "b" 

(function() {
    // do some stuff
})();

or this:

// forgot--v
var a = "b"

[1,2,3].forEach(function(n) {
    // do something
});

You'll be fine.

Probably the biggest place to be aware of where having a line break would be after a return statement.

return
{
    foo: "bar"
}

This will give you an undefined return value instead of the object.

In particular, I prefer this form of variable declaration:

var one = 'something'
  , two = 'other thing';

Though I put the , below the v instead of the r (doesn't really matter). It makes it easy to see that you've remembered all the commas when there's a long list of variables. It's perfectly safe WRT semicolon insertion.