Better Parameter Handling


00:00 One common issue that occurs as a code evolves is that our functions end up

00:04 taking way too many parameters,

00:05 and that is what we will demonstrate in this tutorial along with a popular way

00:09 to clean it up. So let's go.

00:12 Even with the best of intentions, our code will become inevitably messy.

00:16 For example, hey,

00:17 we have the basic signature of a create button function that takes a title and

00:21 an icon. And even though both of the arguments are currently strings,

00:25 it's pretty easy to see which one is the title and which one is the icon.

00:29 However, as a button evolves,

00:31 it starts to end up taking more and more configuration options. For example,

00:34 it can start taking something like a button text and a disabled bullion.

00:38 And now when we invoke this function,

00:40 you can see that the arguments are unclear in the purpose. For example,

00:43 which one is the title and which one is the text? Now,

00:47 something like named arguments would be great over here. However,

00:49 JavaScript doesn't have that. However,

00:51 what it does have is objects as parameters.

00:55 So instead of taking multiple parameters,

00:57 we can take a single config object as a parameter,

01:00 which means that when we invoke this function,

01:02 the argument needs to be an object with the values explicitly named.

01:07 So now when we look at the function being called,

01:09 there is no confusion about which one is the title and which one is the button

01:13 text.

01:14 An additional tip that you can use over here is that defining the entire type in

01:18 line can become a bit tiresome,

01:20 but fortunately you can always select anything that is a part of the type

01:24 annotation and you can click this slide bulb or on a Mac.

01:27 Use the shortcut trigger a quick fix,

01:30 and then choose the option to extract this to a type alias.

01:34 And this code is going to be much more maintainable in the long term when you

01:38 have to do some powerful refactoring.

01:40 And you can even take this to the next level by combining this with other

01:43 features of JavaScript, which are destructuring and default values. For example,

01:47 right now when we want to use values off of the config object,

01:50 we have to go config dot title config icon and stuff like that.

01:54 But wouldn't it be great if we didn't have to go config dot every single time

01:57 within the function body?

01:59 We can do that quite easily by changing the config object into a destructuring

02:04 of the properties that we want to access. Now,

02:07 if you want to use title or icon within the function body,

02:10 we can do that quite easily as they become local variables for this function.

02:15 An additional need feature provided by Destructuring within JavaScript is the

02:19 ability to provide default values. For example,

02:22 if title was something that is optional and we do not provide it into the screen

02:26 button function,

02:28 that would mean that title could possibly be undefined within the function body

02:31 and we would not be able to use it immediately as a string.

02:35 But if we want the title to always be present,

02:38 we can do that by providing a default value for the title member and we are

02:42 destructuring it from the function parameter. Now,

02:44 even though the title was optional within the original config object,

02:48 it is always going to be present as a valid string within the function body

02:53 RA things say. As always,

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