JavaScript/jQuery string handling Recently I wrote some code to take two arrays of data and create a title. Each array could have 0-n elements. However, the multiple if statements seem messy to me. Is there a nicer way to do this? Perhaps one that harnesses the power of jQuery better?

var campaign_names = data["campaign_names"];
var list_names = data["list_names"];
var title;

if (campaign_names &amp;&amp; campaign_names.length &gt; 1) {
  campaign_names = campaign_names.join(", ");
} else if (campaign_names) {
  campaign_names = campaign_names[0];
}

if (list_names &amp;&amp; list_names.length &gt; 1) {
  list_names = list_names.join(", ");
} else if (list_names) {
  list_names = list_names[0];
}

if (campaign_names &amp;&amp; list_names) {
  title = campaign_names + " &amp; " + list_names;
} else if (campaign_names) {
  title = campaign_names; 
} else if (list_names) {
  title = list_names;
}
Fun question,

if (campaign_names &amp;&amp; campaign_names.length &gt; 1) {
  campaign_names = campaign_names.join(", ");
} else if (campaign_names) {
  campaign_names = campaign_names[0];
}


is equivalent to

if (campaign_names &amp;&amp; campaign_names.length ) {
  campaign_names = campaign_names.join(", ");
}


if you initialized campaign_names and list_names to '' you could simplify the last part to

if (campaign_names &amp;&amp; list_names) {
  title = campaign_names + " &amp; " + list_names;
} else {
  title = campaign_names + list_names; 
}


Personally I would go for this:

var campaigns = data["campaign_names"] || [],
    lists = data["list_names"] || [],
    title;

if (campaigns.length) {
  campaigns = campaigns .join(", ");
}

if (lists.length) {
  lists = lists.join(", ");
}

if (campaigns &amp;&amp; lists) {
  title = campaigns + " &amp; " + lists;
} else {
  title = campaigns + lists;
}


If I was feeling ternary that day I would write the last part as

  title = campaigns + (campaigns&amp;&amp;lists) ? " &amp; " : "" + lists;