How do I read this?

Question

I am trying to understand a jQuery plugin and I'm seeing things like this all over the un-minified source:

"y" === self.options.direction && node.stop().scrollTop(floorActive * WH),
"x" === self.options.direction && (node.stop().scrollLeft(floorActive * WW), nodeChildren.each(function(index) {
    $(this).css("left", index * WW);
})), chocolate && (nodeChildren.each(function(index) {
    $(this).css({
        left: self.options.direction[index][1] * WW,
        top: self.options.direction[index][0] * WH
    });
}), node.stop().scrollLeft(self.options.direction[floorActive][1] * WW).scrollTop(self.options.direction[floorActive][0] * WH));

I see things similar to this everywhere too:

return $.each(floorCollection, function() {
    (!floor || Math.abs(this[axis] - goal) > Math.abs(floor[axis] - goal)) && (floor = this);
}), floor && -1 !== directionArray.indexOf(floor) ? directionArray.indexOf(floor) : false;

How would these things normally be written out in a more traditional syntax?

Or is the [Ternary Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) tripping you up? — Matt Burland, Jan 23 '14 at 18:31

score 3 · Answer 1 · answered Jan 23 '14 at 18:35

Not sure what you are talking about, but here is the code more readable:

if ("y" === self.options.direction) {
    node
        .stop()
        .scrollTop(floorActive * WH);
}
if ("x" === self.options.direction) {
    node
        .stop()
        .scrollLeft(floorActive * WW);
    nodeChildren.each(function(index) {
        $(this).css("left", index * WW);
    });
}
if (chocolate) {
    nodeChildren.each(function(index) {
        $(this).css({
            left: self.options.direction[index][1] * WW,
            top: self.options.direction[index][0] * WH
        });
    });
    node
        .stop()
        .scrollLeft(self.options.direction[floorActive][1] * WW)
        .scrollTop(self.options.direction[floorActive][0] * WH);
}

And the second one:

$.each(floorCollection, function() {
    if (!floor || Math.abs(this[axis] - goal) > Math.abs(floor[axis] - goal)) {
        floor = this;
    }
});
if (floor && -1 !== directionArray.indexOf(floor)) {
    return directionArray.indexOf(floor);
} else {
    return false;
}

score 3 · Accepted Answer · edited May 23 '17 at 11:56

There are a few different things going on here - I'd agree that most of them aren't necessarily best practice.

The author appears to be using commas to group expressions, which effectively puts them into a single statement.
The author is using short-circuit evaluation of condition && statement to mean if (condition) { statement }. Using commas and parentheses allows condition && (expression, expression, expression) to be the same as if (condition) { statement; statement; statement; }. This leads to some less-than-legible code like ... && (floor = this), where a statement is wrapped in parentheses to allow it to be evaluated as an expression.
The author is using left-hand comparison, i.e. 5 == x instead of x == 5. One advantage of this is that mistaken use of = instead of == is a syntax error.
The author is using short-circuit evaluation within comparisons, i.e. (a || b) > foo, which compares a if a is truthy or b otherwise.

All of this is valid, none of it is particularly recommended in my opinion. The commas in particular seem like a really illegible approach.

Thank you so much. Your answer is greatly appreciated and helped my to understand how the code is being parsed. — Chris Boerger, Jan 23 '14 at 19:49

How do I read this?

2 Answers2