The right ways to accept optional parameters in JavaScript.

If you’ve worked in any coding scripting language, changes are you’ve created a function that takes values from users. But sometimes these values should be optional, for example a parameter that specifies settings for the function.

Single Value Parameters.

Let’s say you have a function that takes two numbers, adds them together and returns the result. The code would look something like this.

function addTwoNumbers(a, b){
  return a + b
}

We know that calling the function like addTwoNumbers(1, 2); would result in “3" being returned. But what if we call the function without any parameters like so: addTwoNumbers(); ? Well I’ll tell you, you’ll get “NaN” or “Not a Number”. Let’s say our application requires a numerical value be returned, we can mitigate this error by setting defaults to the parameters. If we alter the function above to look like this:

function addTwoNumbers(a = 0, b = 0){
  return a + b
}

Then if we call the function without arguments, now the function returns “0” instead of “NaN”. So to put it simply, to set a parameter’s default value, simply add “= val” in the function definition where you accept the parameters.

Objects or Arrays.

For some applications, setting a default value for the whole parameter’s value will work. But let’s say we have function that applies a bunch of styles to an element from a parameter named “elemStyles” which is an object like so:

function elementStyles(elem, elemStyles= {color: "red", backgroundColor: "black"}){
  for(property in settings){
    elem.style[property] = elemStyles[property];
  }
}

If we set up the function like that and then pass {color: “green”}as the “elemStyles” parameter, then the “backgroundColor” default setting will be removed since the whole "elemStyles" object would be replaced by the passed value.

We can fix this by altering the function to look like this:

function elementStyles(elem, elemStyles){

  const currentStyles ={
    color: "red",
    backgroundColor: "black",
    ...elemStyles
  }

  for(property in currentStyles){
    elem.style[property] = currentStyles[property];
  }
}

Now the default settings for the object are defined in “currentStyles” and any properties set by the user will simply overwrite the default properties.

Let me know some methods you use for these functions. Happy Coding everyone!

Thanks for reading! For more tips, tricks and tutorials follow me on YouTube or Instagram.

Make sure and leave a comment if you want to see me cover something specific.