A Better Approach to Organize Optional Function Parameter in Javascript

Photo by Kelly Sikkema on Unsplash

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.

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.

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

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

Now we have a sample function makeSmoothie, 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:

makeSmoothie('mango')

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

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:

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.

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

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

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

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

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

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.