Destructuring Assignment In A Function Parameter

Have you ever passed an argument as a null or undefined in a function? Since ES2015 (aka ES6) you don’t have to. You can use JavaScript destructuring.

Use Case

We all have this Utils.js file in our projects where we have all kinds of functions that will be used all over the project. Imagine you have a To-Do app and one of those functions was addTodoItem and you had to call this function in different places.

Function declaration would look like this:

function addTodoItem(title, description, dueDate) {
  // Your code here
}

Before calling the function, see the characteristics for each parameter:

Title => required.
Description => !required.
DueDate => !required.

Let’s add a few items to the list now.

addTodoItem('Shopping List', 'eggs, milk', '30-11-2020')
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem('Call Mom')
> { title: 'Call Mom' }
addTodoItem('Pay Bills', undefined, '01-12-2020')
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If we pay attention to the last example, we can see that on the first day of the month I need to pay my bills. 🤣

Jokes aside, we see that I had to pass the second value as undefined because the function is expecting the description as the second parameter.

For this specific example, if I wanted to pass a dueDate, first I would have to check whether the description is undefined or not before I call the addTodoItem function.

Here is where using destructuring will be very helpful.

This is how the addTodoItem would look now. 👇

function addTodoItem({title, description, dueDate}) {
  // Your code here
}

Let’s add again the same items as before.

addTodoItem({ title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ title: 'Pay Bills', dueDate: '01-12-2020' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If you pay attention to the last item added, you’ll see that there was no need on adding the undefined for the description. Just title and dueDate.

Bonus!

There is more: not only do you not need to pass undefined anymore, but you can even change the order of how you pass the arguments and it will still work.

addTodoItem({ description: 'eggs, milk', dueDate: '30-11-2020', title: 'Shopping List' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ dueDate: '01-12-2020', title: 'Pay Bills' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

Conclusion

That’s it! We saw how to use destructuring when declaring a function and how to call that function and provide the arguments.

Remember that you can get rid of the undefined or null since the order of the arguments doesn’t matter.

PS. Remember to pay your bills. 🤣

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Destructuring Assignment In A Function Parameter

Comments

More from this blog

Unlocking Improved Accessibility with React's createPortal Method

Why I started #30days30walks Challenge

How to Teleport in Vue 3

Trim Your Inputs!

Default Function Parameters

Use Case

Bonus!

Conclusion

Command Palette

Comments

More from this blog

Use Case

Bonus!

Conclusion