Better JavaScript — Arguments and Parameters

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at ways to improve our JavaScript code.

Optional Arguments

Arguments of a function can be anything in JavaScript.

We can have optional arguments.

If they aren’t passed into a function, then they’re undefined .

We can provide a default value for parameters that may be undefined .

For example, we can write:

function f(x = 1) {  
  return x;  
}

Then x ‘s default value 1.

If no value is passed in, then it’s 1.

Accept Option Objects for Keyword Arguments

If we have a function that has many parameters, then it’s hard to remember what the parameters are and their type.

Therefore, the more arguments that it takes, the harder it is to work with the function.

If we have lots of parameters, then we should combine them into one object parameter.

Then we can destructure the object parameter into variables.

For instance, if we have:

const alert = new Alert(100, 75, 300, 200,  
  "Error", message,  
  "green", "white", "black",  
  "error", true);

Then that’s hard to remember.

Instead, we should put them into one object:

const alert = new Alert({  
  x: 100,  
  y: 75,  
  width: 300,  
  height: 200,  
  title: "Error",  
  message: message,  
  titleColor: "green",  
  bgColor: "white",  
  textColor: "black",  
  icon: "error",  
  modal: true  
});

Since we have the property keys, it’s easy to know what the parameters mean.

Then in the alert constructor, we can destructure the arguments:

function Alert({  
  x,  
  y,  
  width,  
  height,  
  title,  
  message,  
  titleColor,  
  bgColor,  
  textColor,  
  icon,  
  modal  
}) {  
  //...  
}

We get the same benefits of the parameters and get the property values as variables with destructuring.

The meaning of each property is clear with an object parameter.

And we don’t have to worry about the order.

Option objects consist of optional arguments, so we can omit everything in the object.

But if we need want something to be required, we can separate them out from the object parameter.

So we can write:

function Alert(  
  title,  
  message, {  
    x,  
    y,  
    width,  
    height,  
    titleColor,  
    bgColor,  
    textColor,  
    icon,  
    modal  
  }) {  
  //...  
}

If we want to provide default values for them, we can do that easily by assigning default values to the properties.

For instance, we can write:

function Alert({  
  x = 100,  
  y = 100,  
  width = 300,  
  height = 300,  
  title,  
  message,  
  titleColor,  
  bgColor,  
  textColor,  
  icon,  
  modal  
}) {  
  //...  
}

to set the default value of the parameters.

x , y , width , and height have default values.

We don’t have to check for undefined or use the || operator to provide default values.

Conclusion

If we have lots of parameters in our function, then we should use an object parameter instead.

We can assign values to them and destructure them into variables.

Optional arguments can be assigned to parameters.