How to conditionally build an object in ES6
Tags: javascript, serverless, webdev, node
Published: 2018-08-13 06:11:19

---
title: How to conditionally build an object in ES6
published: true
description: The spread syntax lets you conveniently build an object with optional fields.
canonical_url: https://www.sanity.io/blog/how-to-conditionally-build-an-object-in-es6
tags: javascript, serverless, webdev, node
cover_image: https://thepracticaldev.s3.amazonaws.com/i/shjv3wilge6i8krrur6u.png
---

I've been tinkering with RSS-feeds for podcasts in [CLIs](https://github.com/sanity-io/podcast-to-sanity), [Express and Serverless functions](https://github.com/sanity-io/Syntax) 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:

```javascript
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:

```javascript
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: 

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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](https://github.com/sanity-io/Syntax/blob/master/routeHandlers/rss.js) and [netlify lambdas](https://github.com/sanity-io/Syntax/blob/master/functions/rss.js).