DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Destructuring Assignment In A Function Parameter
Eliahu Garcia Lozano
Eliahu Garcia Lozano

Posted on • Originally published at blog.eligarlo.dev

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
}
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Classic DEV Post:

modern frameworks

Concepts behind modern frameworks

Many beginners ask "which framework should I learn?" and "How much JS or TS do I need to learn before a framework?" - countless opinionated articles go into promoting the advantages of the author's preferred framework or library, instead of demonstrating the readers the concepts behind them to allow for an informed decision.