How to conditionally build an javascript object with features in (ssr)

Written by Knut Melvær

Missing Image!

I've been tinkering with RSS-feeds for podcasts in CLIs, Express and Serverless functions lately, which involves both parsing and constructing complex objects with lots of fields and information. Since you're dealing with user-generated data from different sources, you aren't guaranteed that all fields are populated all the times. Some fields are optional as well.

Earlier I would deal with this by conditionally applying new keys on an object like this:

function episodeParser(data) {
  const { id, 
  	title,
  	description,
  	optionalField,
  	anotherOptionalField
  } = data
  const parsedEpisode = { guid: id, title, summary: description }
  if (optionalField) {
    parsedEpisode.optionalField = optionalField
  } else if (anotherOptionalField) {
    parsedEpisode.anotherOptionalField = anotherOptionalField
  }
  // and so on
  return parsedEpisode
}

This isn't exactly smooth (but it works). I could also do nifty things with looping the object keys and so on, but that entails code that's a bit more convoluted and you don't get a good sense of what the data object is either.

Yet again, new syntax in ES6 comes to the rescue, and I found a pattern where I was able to rewrite the code over to something like this:

function episodeParser({
  id, 
  title, 
  description = 'No summary', 
  optionalField, 
  anotherOptionalField
}) {
  return {
    guid: id,
    title,
    summary: description,
    ...(optionalField && {optionalField},
    ...(anotherOptionalField && {anotherOptionalField})
  }
}

If we put the function into action, it would look something like this:

const data = { 
  id: 1, 
  title: 'An episode', 
  description: 'An episode summary', 
  anotherOptionalField: 'some data' 
}
episodeParser(data)
//> { guid: 1, title: 'An episode', summary: 'An episode summary', anotherOptionalField: 'some data' }

This function has a couple of features. The first is parameter object destructuring, which is a good pattern if you want to deal with lots of arguments in a function. The second is the three dots spread syntax (...), which here is used to “spread” the object if the condition is true-ish, which we check if the AND operator (&&). What you end up with is a neat concise function which is also easy to test.

You can see it action in our podcast feeds implementation for express.js and netlify lambdas.