How to use optional function parameters in js

js is one of the core technologies of the web. Most websites use it, and all modern web browsers support it without plugins. In this article, we'll discuss different tips and tricks that will help you with your day-to-day JavaScript development.

In JavaScript coding, you often need to make function parameters optional. When you use JavaScript functions, there are two types of parameters: mandatory parameters and optional parameters. In the case of mandatory parameters, you must pass them or JavaScript will throw an error. However, for optional parameters, if you don't pass them, they will be initialized to default values.

Below we'll discuss the basics of optional function parameters in JavaScript and how to use them.

How to use optional function parameters in ES5 and before

In this section, we'll discuss a solution that works even on older browsers. This was used frequently up until the days of JavaScript ES5, when there was no built-in support for making function parameters optional.

Let's see how it works with the following example.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;

  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

 In the example above, getFullImagePaththe function takes two parameters: imagePathand imageBaseUrl. We want to make the second imageBaseUrlparameter optional, so you can skip passing it if you want to use the default parameter value. To make it optional, we have used the following statement.

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

 

Basically, we check imageBaseUrlif the variable is defined. If it is defined and evaluates to TRUE, we assume the second argument is available, and we will use it. On the other hand, if imageBaseUrlthe parameter is undefined or evaluates to FALSE, we use https://code.tutsplus.com/the value as the default value for that parameter. It is important that optional parameters always appear at the end of the parameter list.

Note that this method does not work with numeric values ​​as it will overwrite the value 0. Likewise, if you want to be able to pass an 0or nullinto a function, you must explicitly check whether the argument is undefined.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

 

In this example, we explicitly check that imageBaseUrlthe parameter has a value of to undefineddetermine if it is optional. Here's an easier way to determine if a parameter is optional.

This is how function parameters are made optional in browsers that don't support ES6+ versions. In the next section, we'll discuss it in the context of modern browsers.

How to use optional function parameters in JavaScript ES6

In this section, we'll discuss methods that can be used in modern browsers that support the ES6 version of JavaScript. Let's see how it works with the following example. We'll rewrite the example discussed in the previous section with an ES6 version.

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

 

If you have used other programming languages, the above method of defining optional function parameters may be familiar to you. In this case, optional parameters are assigned default values ​​in the function declaration statement itself.

Additionally, you can have multiple optional parameters, as shown in the following code snippet, as long as you define them at the end of the parameter list.

function foo(a, b=0, c=10) {
  //...
}

 

As you can see, JavaScript ES6 syntax is simpler and easier to write than the old method.

in conclusion

Today, we discussed how to use optional function parameters in JavaScript, along with a few practical examples.

Here is a comparison of different approaches to optional function parameter encoding in JavaScript:

method	note
arg = arg ||默认值	Common idiom before ES6, but 0and nullwill be overridden by defaults.
arg = (typeof arg === '未定义') ?默认值：arg	The easiest way to implement optional parameters before ES6.
函数某事(arg=defaultValue) { }	The best approach for ES6 and newer versions of JavaScript.