Using a ternary operator to output a string

Question

Why does this

var marketName = (controller.state.operation.code === 'copy')
    ? controller.state.market.targetName
    : controller.state.market.name;

$('dd.preview-step1').html(
    'Market = <i>' 
    + marketName 
    + '</i><br />Source = <i>'
    + controller.state.source.name 
    + '</i><br />Target = <i>'
    + controller.state.target.name
    +'</i>'
);

output this:

Market = blabla
Source = blabla
Target = blabla

While this

$('dd.preview-step1').html(
    'Market = <i>'
    + (controller.state.operation.code === 'copy') 
        ? controller.state.market.targetName
        : controller.state.market.name
    + '</i><br />Source = <i>'
    + controller.state.source.name
    + '</i><br />Target = <i>'
    + controller.state.target.name 
    + '</i>'
);

only outputs this:

Market = blabla

I don't get why the rest of the string after the inline ternary operator is not printed.

Thanks for help.

Answer 1

Because it does not know that the + is not part of it. Use () around the ternary part so the order of operations does what you want.

$('dd.preview-step1').html('Market = <i>'+ 
    ((controller.state.operation.code === 'copy') ? controller.state.market.targetName : controller.state.market.name)
     +'</i><br />Source = <i>'+ controller.state.source.name +'</i><br />Target = <i>'+ controller.state.target.name +'</i>');

See the extra ( and ) I added at the beginning and end of the second line above.