DEV Community

loading...
Cover image for Pro tips of using ES6 destructuring assignment and spread operator

Pro tips of using ES6 destructuring assignment and spread operator

Terry Li
Web developer. Like helping people by building good software.
・2 min read

Destructuring assignment and Spread operator are my favorite ES6 features. Today I want to show you two pro tips that you can use to write clean code.

Remove unwanted properties

Sometimes you might need to write a function to convert an object to a different structure, and you might want to remove some properties from the object as you don't need them. Instead of directly deleting the properties from the object, you can use object destructuring to remove unwanted properties. See the code below.

function makeVeggieBurger(hamburger) {
  // 😞
  delete hamburger.meat
  return hamburger

  // 😃
  const { meat, ...veggieBurger } = hamburger
  return veggieBurger
}


Enter fullscreen mode Exit fullscreen mode

Here it uses object destructuring on hamburger, and gets meat property and puts all the other properties in veggieBurger. When it returns veggieBurger, it returns a shallow copy of hamburger without meat. This approach avoids mutating the original object, but achieves the same result with only a line of code.

Conditionally add properties to an object

Continue with the example above, but this time we add a new parameter isSpicy to indicate if we want to add chili to the burger. If isSpicy is true, we want to add chili property to veggieBurger, but if isSpicy is false, we don't want to have chili property at all. See the code below.

function makeVeggieBurger(hamburger, isSpicy) {
  const { meat, ...veggieBurger } = hamburger

  // 😞
  if (isSpicy) {
    veggieBurger.chili = 'hot'
  }
  return veggieBurger

  // 😃
  return {
    ...veggieBurger,
    ...(isSpicy && { chili: 'hot' }),
  }
}

Enter fullscreen mode Exit fullscreen mode

Let's take a close look at this

return {
  ...veggieBurger,
  ...(isSpicy && { chili: 'hot' }),
}

Enter fullscreen mode Exit fullscreen mode

If isSpicy is true, it will be like

return {
  ...veggieBurger,
  ...(true && { chili: 'hot' }),
}
Enter fullscreen mode Exit fullscreen mode

which is

return {
  ...veggieBurger,
  ...{ chili: 'hot' },
}
Enter fullscreen mode Exit fullscreen mode

And as we spread it, it becomes

return {
  ...veggieBurger,
  chili: 'hot'
}
Enter fullscreen mode Exit fullscreen mode

This is how you add chili to the returning object.

If isSpicy is false, it will become

return {
  ...veggieBurger,
  ...(false && { chili: 'hot' }),
}
Enter fullscreen mode Exit fullscreen mode

which is

return {
  ...veggieBurger,
  ...false
}
Enter fullscreen mode Exit fullscreen mode

and when you spread false, it returns nothing, so this expression becomes

return {
  ...veggieBurger,
}
Enter fullscreen mode Exit fullscreen mode

which essentially is

return veggieBurger
Enter fullscreen mode Exit fullscreen mode

So we won't have chili at all. This approach will make you code much cleaner especially when you add multiple properties conditionally.

That's it. I hope you find it helpful. Feel free to let me know if you have any questions. You can also find me on twitter.

Discussion (0)