An Approach to Organize Optional Function Parameter in Javascript
Tags: javascript
Published: 2021-07-20 06:57:14

Optional parameters in a function are very common. You can define and organize your function and parameters as you want. But, are you sure that your function and parameters are easy to understand and easy to use? If you are not sure, you should read this post.

In this post, I will give you suggestions and approach on how to define your optional parameter in javascript.

##Optional Parameter

In Javascript, the default value of the function parameter is `undefined`. So, if you define a parameter but you don't provide it in the function call, the value will be `undefined`.

```javascript
function greeting(name) {
  console.log(`hello ${name}`)
}

greeting() // hello undefined
```

Let's make the parameter to be an optional parameter (or default parameter) by adding a default value for the parameter.

```javascript
function greeting(name = 'guest') {
  console.log(`hello ${name}`)
}

greeting() // hello guest
```

As you can see, when we add a default value to a parameter, it becomes an optional parameter, which means you don't have to provide a value in the function call. Easy right? Hold on, let's take a look at a function that has many parameters.

##The Problem of Optional Parameter

```javascript
function makeSmoothie (type, sugarLevel = 1, topping = 'pudding', size: 'small'){
	// code to make a smoothie
}
```

Now we have a sample function `makeSmothie`, which has 1 required parameter, and 3 optional parameters (`sugarLevel`, `topping`, `size`). In case you wrote code like this, you better keep reading this post.

Next, If I want to make a mango smoothie, I can call the function like this:

```javascript
makeSmoothie('mango')
```

If I want to make a mango smoothie that is sweeter than the first one, I change sugarLevel to 2:

```javascript
makeSmoothie('mango', 2)
```

Ok, there is no problem at all. However, what if I want to make a smoothie, but don't like pudding as the topping, So I decide to make a smoothie with red bean topping:

```javascript
makeSmoothie('mango', 1, 'red bean')
```

As you can see, what I actually want is to only change the topping, but, in fact, I have to provide sugarLevel value when calling the function.

Even worst, when I only want to change the size of the smoothie, I have to give the value of all optional parameters before the `size` parameter.

```javascript
makeSmoothie('mango', 1, 'pudding', 'medium')
```

Are these really optional parameters? Why do I still have to give a value for `sugarLevel` and `topping`?  This is just a sample case to show you the problem you might face if you write code similar to the sample. Let's solve the problem.

##The Approach to Define Optional Parameters

In order to solve the problem, we can follow these rules:
- If the function only has 1 optional parameter, put it in the very last after all required parameters

```javascript
function makeSmoothie (type, sugarLevel = 1){
  // code to make a smoothie
}
```

- If the function has more than 1 optional parameter, use `Object` and `Object Destructuring`

```javascript
function makeSmoothie (type, { sugarLevel = 1, topping = 'pudding', size = 'small' } = {}){
	// code to make a smoothie
}
```

Now we have two parameters, let's call them `type` and `variant`. We can call the function in a more efficient way:


```javascript
makeSmoothie('mango')
makeSmoothie('mango', { sugarLevel: 2 })
makeSmoothie('mango', { topping: 'red bean'})
makeSmoothie('mango', { size: 'medium'})
```

That's the approach I prefer to use. If you have another solution, share yours in the comment section.