• How to View Build an Object in JavaScript with ES6
  • Author: Knut Melvær
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: ssshooter
  • Proofreader: Kezhenxu94, Park-Ma

Moving user-generated data between different sources often requires checking whether specific fields have values and building output based on that data. This article will show you how to do this more concisely using JavaScript ES6 features.

I have been handling podcasting RSS-feeds at CLIs and Express, and Serverless Functions since Metasao. IO (where I work) sponsored Syntax. This involves working with and building complex objects with lots of fields and information. Because different data sources are being processed, it is difficult to ensure that all fields are populated. Some fields are optional, but you don’t want to output tags with no values in an RSS XML or JSON FEED.

Previously I solved this problem by adding new keys to the object:

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
}
Copy the code

It’s not elegant (but it works), and if you have a lot of optional fields, you have to write a lot of if-statements. I’ve also dealt with this problem by looping through the key object, but doing so makes the code more complex and makes it difficult to visually understand the object.

This is where ES6’s new grammar comes to the rescue. I found that I could rewrite the code as follows:

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

This function uses two new ES6 features. The first is argument object destructuring, which is a good pattern if you need to handle a large number of arguments in a function. Instead of writing this:

function episodeParser(data) {
  const id = data.id
  const title = data.title
  // and so on...
}
Copy the code

To:

function({id, title}) {
  // and so on...
}
Copy the code

This is also a good way to avoid a function with too many arguments. Also notice the description = ‘No summary’ section of the object destruct, which is called the default parameter. If description is not defined, it will be defined by default to the string No summary.

The second… Is expansion syntax. If the condition is true (the effect of &&), it will “unwrap” the object:

{
  id: 'some-id'. (true && { optionalField: 'something'})
}

// is the same as

{
  id: 'some-id',
  optionalField: 'someting'
}
Copy the code

What you end up with is a function that is clean and easy to test. One thing to note about using the && operator: the number 0 will be treated as false, so some data types need to be handled with care.

Using this function in practice would look 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' }
Copy the code

You can see this in action in the podcast subscriptions we implemented for Express.js and Netlify Lambdas. If you’d like to try sensory. IO for yourself, you can do so at Sensory. IO/Freecodecam… Get a free developer program. ✨

Starting fromwww.sanity.io.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.