Can somebody explain how John Resig's pretty.js JavaScript works?

Question

http://ejohn.org/files/pretty.js

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time){
    var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;

    return day_diff == 0 && (
            diff < 60 && "just now" ||
            diff < 120 && "1 minute ago" ||
            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
            diff < 7200 && "1 hour ago" ||
            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
        day_diff == 1 && "Yesterday" ||
        day_diff < 7 && day_diff + " days ago" ||
        day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if ( typeof jQuery != "undefined" )
    jQuery.fn.prettyDate = function(){
        return this.each(function(){
            var date = prettyDate(this.title);
            if ( date )
                jQuery(this).text( date );
        });
    };

How exactly is the prettyDate() method returning a string? Is this another one of those 'strange' things you can do in JavaScript or am I just missing something?

edit: I didn't ask how he's returning a value, I asked how he's returning a string.

return day_diff == 0 && (....) returns a boolean in any language I've ever used.

Answer 1

In JavaScript:

• a || b is equivalent to a ? a : b
• a && b is equivalent to a ? b : a
• any non-empty string in a boolean expression evaluates to true

With this knowledge, the logic of the return statement becomes fairly straightforward.

Assume, for example, that day_diff = 5

Then taking the statement from above step-by-step:

return day_diff == 0 && (
       diff < 60 && "just now" ||
       diff < 120 && "1 minute ago" ||
       diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
       diff < 7200 && "1 hour ago" ||
       diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
   day_diff == 1 && "Yesterday" ||
   day_diff < 7 && day_diff + " days ago" ||
   day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";

First, day_diff == 0 will evaluate to false and the right-hand side:

(diff < 60 && "just now" ||
 diff < 120 && "1 minute ago" ||
 diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
 diff < 7200 && "1 hour ago" ||
 diff < 86400 && Math.floor( diff / 3600 ) + " hours ago")

...is not evaluated. Both sides of:

day_diff == 1 && "Yesterday"

...evaluate to false. Next is:

day_diff < 7 && day_diff + " days ago"

In this expression day_diff < 7 evaluates to true, so its right-hand side, which is a string, will be evaluated and its result returned.

Further reading:

http://www.ejball.com/EdAtWork/2005/02/19/JavaScriptBooleanOperators.aspx

Answer 2

It says right there: return ... and then goes into a long nested list of basically "inline ifs". ;-)

In Javascript, the boolean operators return the value of one of the operands, not just true or false. E.g. 0 || 'foo' returns 'foo'. This characteristic is used in conjunction with operator short-circuiting. false && true will not evaluate the true side and return false immediately, since the whole expression must be false.