Question

I just posted this to a gist: https://gist.github.com/2228570

var out = '';

function doWhat(){
    out += '<li>';
    console.log(out === '<li>'); // at this point, out will equal '<li>'
    return '';
}

out += doWhat();
console.log(out, out === '<li>');
// I expect out to == '<li>', but it's actually an empty string!?

This behavior is odd, does anyone have an explanation? This is a tough thing to google. It also makes no difference if you use out += or out = out +.

EDIT: @paislee made a JSFiddle that demonstrates how if doWhat is on a separate line, it behaves as expected: http://jsfiddle.net/paislee/Y4WE8/

Answer 1

It seems you’re expecting doWhat to be called before the += is evaluated.

But, the progression of the line is:

out += doWhat();      // original line
out = out + doWhat(); // expand `+=`
out = '' + doWhat();  // evaluate `out`, which is currently an empty string
out = '' + '';        // call `doWhat`, which returns another empty string
out = '';             // result

The out += '<li>'; inside doWhat is updating the variable, but too late to have a lasting effect.