How to use optional function parameters in JavaScript

In this short article, we will discuss how to use optional function parameters in JavaScript.

JavaScript is one of the core technologies of the Internet. It is used by most websites and supported by all modern web browsers without the need for plugins. In this series, we will discuss different tips and tricks that will help you with your daily 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.

Today we will discuss the basics of optional function parameters in JavaScript and how to use them.

How to use optional function parameters in ES5 and previous versions

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

Let's understand 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 above example, the getFullImagePath function takes two parameters: imagePath and imageBaseUrl. We want to make the second imageBaseUrl parameter optional, so you can skip passing it if you want to use the default parameter value. To make it optional we use the following statement.

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

Basically, we check if the imageBaseUrl 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 the imageBaseUrl parameter is undefined or evaluates to FALSE, we will use the https://code.tutsplus.com/ value for that parameter the default value. It is important that optional parameters should always appear at the end of the parameter list.

Please note that this method will not work with numeric values ​​as it will overwrite the value 0. Likewise, if you want to be able to pass 0 or null into 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 whether the value of the imageBaseUrl parameter is undefined to determine whether it is an optional parameter. This is a simpler way to determine whether a parameter is optional.

This is how to make function parameters 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 will discuss methods that can be used in modern browsers that support the ES6 version of JavaScript. Let's understand how it works with the following example. We will 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, then you may be familiar with the above method of defining optional function parameters. In this case, the 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 approach.

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 ways of encoding optional function parameters in JavaScript:

The above is the detailed content of How to use optional function parameters in JavaScript. For more information, please follow other related articles on the PHP Chinese website!