Better Parameter Handling

One common issue that occurs as a code evolves is that our functions end up taking way too many parameters, and that is what we will demonstrate in this tutorial along with a popular way to clean it up. So let's go. Even with the best of intentions, our code will become inevitably messy. For example, hey, we have the basic signature of a create button function that takes a title and an icon. And even though both of the arguments are currently strings, it's pretty easy to see which one is the title and which one is the icon. However, as a button evolves, it starts to end up taking more and more configuration options. For example,

it can start taking something like a button text and a disabled bullion. And now when we invoke this function, you can see that the arguments are unclear in the purpose. For example, which one is the title and which one is the text? Now, something like named arguments would be great over here. However, JavaScript doesn't have that. However, what it does have is objects as parameters. So instead of taking multiple parameters, we can take a single config object as a parameter, which means that when we invoke this function, the argument needs to be an object with the values explicitly named. So now when we look at the function being called,

there is no confusion about which one is the title and which one is the button text. An additional tip that you can use over here is that defining the entire type in line can become a bit tiresome, but fortunately you can always select anything that is a part of the type annotation and you can click this slide bulb or on a Mac. Use the shortcut command.to trigger a quick fix, and then choose the option to extract this to a type alias. And this code is going to be much more maintainable in the long term when you have to do some powerful refactoring. And you can even take this to the next level by combining this with other

features of JavaScript, which are destructuring and default values. For example, right now when we want to use values off of the config object, we have to go config dot title config icon and stuff like that. But wouldn't it be great if we didn't have to go config dot every single time within the function body? We can do that quite easily by changing the config object into a destructuring of the properties that we want to access. Now, if you want to use title or icon within the function body, we can do that quite easily as they become local variables for this function. An additional need feature provided by Destructuring within JavaScript is the

ability to provide default values. For example, if title was something that is optional and we do not provide it into the screen button function, that would mean that title could possibly be undefined within the function body and we would not be able to use it immediately as a string. But if we want the title to always be present, we can do that by providing a default value for the title member and we are destructuring it from the function parameter. Now, even though the title was optional within the original config object, it is always going to be present as a valid string within the function body RA things say. As always,

thank you for joining me and I will see you in the next one.