Deep Learning about Rest parameters and default values in JavaScript

This article mainly introduces how to deeply learn the Rest parameters and default parameters in JavaScript. It is the basic knowledge in the JS getting started learning, for more information, see the following two features that make JavaScript Functions more expressive: Rest parameters and parameter default values.
Rest Parameters

Generally, we need to create a Variable Parameter Function. A variable parameter is a function that can accept any number of parameters. For example, String. prototype. concat can accept any number of strings as parameters. Using the Rest parameter, ES6 provides us with a new way to create variable parameter functions.

Let's implement an example function containsAll to check whether a string contains certain substrings. For example, containsAll ("banana", "B", "nan") returns true, containsAll ("banana", "c", "nan") returns false.

The following is a traditional implementation method:

function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) {  var needle = arguments[i];  if (haystack.indexOf(needle) === -1) {   return false;  } } return true;} function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) {  var needle = arguments[i];  if (haystack.indexOf(needle) === -1) {   return false;  } } return true;}

This implementation uses the arguments object, which is an array of classes and contains a list of real parameters when a function is called. This code is exactly what we want, but its readability is not optimal. The function has only one parameter, haystack, so it is impossible to know that the function requires multiple parameters at a Glance. When traversing arguments, pay special attention to the starting index of traversal as 1 rather than the common 0, because arguments [0] is the form parameter haystack when the function is defined. If we want to add some parameters before or after the haystack parameter, we have to update the internal loop. The Rest parameter solves these problems. The following describes how to implement the Rest parameter:

function containsAll(haystack, ...needles) { for (var needle of needles) {  if (haystack.indexOf(needle) === -1) {   return false;  } } return true;} function containsAll(haystack, ...needles) { for (var needle of needles) {  if (haystack.indexOf(needle) === -1) {   return false;  } } return true;}

The above two implementations meet our needs, but the latter includes a special... needles syntax. Let's take a look at the details of calling containsAll ("banana", "B", "nan"). The haystack parameter is the same as before and will be filled with the first real parameter of the function, the value is "banana", and the ellipsis in front of needles indicates that it is a Rest parameter. All the remaining parameters are placed in an array and assigned to the needles number. In this call, the value of needles is ["B", "nan"]. Then, the normal function is executed.

Only the last function of the function can be used as the Rest parameter. When the function is called, all parameters before the Rest parameter will be normally filled, and other parameters will be placed in an array, the array is used as the value of the Rest parameter. If there are no more parameters, the value of the Rest parameter is an empty array [], and the value of the Rest parameter is never undefined.
Default Value of the Parameter

Generally, when calling a function, the caller does not need to pass all possible parameters, and those parameters that are not passed need a reasonable default value. JavaScript has a fixed default value undefined for parameters that are not passed. In ES6, a new method is introduced to specify the default value of any parameter.

Take the following example:

function animalSentence(animals2="tigers", animals3="bears") {  return `Lions and ${animals2} and ${animals3}! Oh my!`;} function animalSentence(animals2="tigers", animals3="bears") {  return `Lions and ${animals2} and ${animals3}! Oh my!`;}

The = parameter is followed by an expression that specifies the default value when the parameter is not passed. Therefore, animalSentence () returns "Lions and tigers and bears! Oh my! ", AnimalSentence (" elephants ") returns" Lions and elephants and bears! Oh my! ", AnimalSentence (" elephants "," whales ") returns" Lions and elephants and whales! Oh my! ".

Pay attention to the following details when using the default parameter values:

Unlike Python, the default parameter expression is calculated from left to right during function calling, which means that the expression can use the previously filled parameter. For example, we can make the above functions more interesting:

function animalSentenceFancy(animals2="tigers",  animals3=(animals2 == "bears") ? "sealions" : "bears"){ return `Lions and ${animals2} and ${animals3}! Oh my!`;} function animalSentenceFancy(animals2="tigers",  animals3=(animals2 == "bears") ? "sealions" : "bears"){ return `Lions and ${animals2} and ${animals3}! Oh my!`;}

Then, animalSentenceFancy ("bears") will return "Lions and bears and sealions. Oh my! ".

Passing undefined is equivalent to not passing this parameter. Therefore, animalSentence (undefined, "unicorns") returns "Lions and tigers and unicorns! Oh my! ".
If the default value is not specified for a parameter, the default value of this parameter is undefined.

function myFunc(a=42, b) {...} function myFunc(a=42, b) {...}

Equivalent

function myFunc(a=42, b=undefined) {...} function myFunc(a=42, b=undefined) {...}

Discard arguments

With the default values of Rest parameters and parameters, we can discard the arguments object to make our code more readable. In addition, the arguments object also deepens the difficulty of optimizing JavaScript.

We hope the two new features can completely replace arguments. As the first step, avoid using the arguments object when using the Rest parameter or the default value of the parameter. If the arguments object is not removed immediately, or never, it is also best to avoid using the arguments object when using the Rest parameter or the default value of the parameter.
Compatibility

Firefox versions above 15 support these two new features. However, there is no other browser support. Recently, V8 added support for Rest parameters in the experiment environment, and the default parameter value is an issue. JSC also mentions some issue for the Rest parameters and parameter default values.

Both the Babel and Traceur compilers support the default parameter values, so you can use them boldly.
Conclusion

Although the two new features do not introduce new behaviors to functions at the technical level, they can make some function declarations more expressive and readable.