NEWS · August 13th 2018

How to conditionally build an javascript object with features in ES6

The spread syntax lets you conveniently build an object with optional fields. Especially useful when you move user generated data via APIs to serverless functions.

Portrait of Knut Melvær

Knut Melvær

Knut runs developer relations at Sanity.io.

How to conditionally build an javascript object with features in ES6

I've been tinkering with RSS-feeds for podcasts in CLIsExpress 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.