40
loading...
An Approach to Organize Optional Function Parameter in Javascript
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.
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 undefinedLet'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 guestAs 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.
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:
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.In order to solve the problem, we can follow these rules:
function makeSmoothie (type, sugarLevel = 1){
// code to make a smoothie
}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 them
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.
40