1. Default values of function parameters

Prior to ES6, you could not specify default values for function parameters directly; you had to work around them.

function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
Copy the code

The above code checks to see if the parameter y to the function log is assigned a value, and if not, specifies a default value of World. The disadvantage of this notation is that if y is assigned, but the corresponding Boolean is false, the assignment does not work. As in the last line of the code above, the argument y equals the null character, and the result is changed to the default value. To avoid this problem, it is often necessary to check whether y is assigned and, if not, equal to the default.

if (typeof y === 'undefined') {
y = 'World';
}
Copy the code

ES6 allows you to set default values for function arguments, which are written directly after the parameter definition.

function log(x, y = 'World') {

console.log(x, y);

}

log('Hello') // Hello World

log('Hello', 'China') // Hello China

log('Hello', '') // Hello
Copy the code

As you can see, ES6 is much cleaner and more natural than ES5. Here’s another example.

function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
var p = new Point();
p // { x: 0, y: 0 }
Copy the code

In addition to brevity, ES6 writing has two benefits: first, readers of the code can immediately recognize which parameters can be omitted without having to look at the function body or documentation; Secondly, it is beneficial for future code optimization. Even if the future version removes this parameter completely in the external interface, it will not cause the previous code to fail to run.

Parameter variables are declared by default, so they cannot be declared again with let or const.

function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
Copy the code

In the above code, the parameter variable x is declared by default. It cannot be declared again in the function body using let or const, otherwise an error will be reported.

2. Used in conjunction with destructively assigned defaults

Parameter defaults can be used in conjunction with the default values of deconstructed assignments.

function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
Copy the code

The above code uses the destruct assignment default value of the object, not the default value of the function argument. The variables x and y are generated by destructuring assignments only if the argument to function foo is an object. Such as

If function foo is called with parameters other than objects, the variables x and y are not generated, thus reporting an error. If the argument object has no y attribute, the default value of 5 for y takes effect.

Here is another example of a destructively assigned default value for an object.

function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } the fetch (' http://example.com ', {}) / / "GET" the fetch (' http://example.com ') / / an errorCopy the code

In the code above, if the second argument to the fetch function is an object, you can set default values for its three properties.

This does not omit the second argument, which can be omitted if combined with the default values of the function arguments. At this point, there is a double default.

function fetch(url, { method = 'GET' } = {}) {
console.log(method);
}
fetch('http://example.com')

// "GET"
Copy the code

In the code above, when fetch has no second argument, the default value of the function argument takes effect, then the default value of the deconstructed assignment takes effect, and the variable method takes the default value GET.

What is the difference between the following two ways?

Function m1({x = 0, y = 0} = {}) {return [x, y]; } / / writing function 2 m2 ({x, y} = {x: 0, y: 0}) {return (x, y); }Copy the code

Both methods set default values for function parameters. The difference is that the default values of function parameters are empty objects, but the default values of object deconstruction assignment are set. Write the default of two function arguments

Value is an object that has specific properties, but does not set the default value for object deconstruction assignment.

/ / function without parameters (m1) / / [0, 0] m2 () / / [0, 0] / / x and y values of m1 (8} {x: 3, y:) / / [3, 8] m2 ({x: 3, y: 8}) / / [3, 8] / / x has the value, y no value of m1 (3} {x:) / / [3, 0] m2 (3} {x:) / / [3, undefined] / / x and y are no value of m1 ({}) / / (0, 0); m2({}) // [undefined, undefined] m1({z: 3}) // [0, 0] m2({z: 3}) // [undefined, undefined]Copy the code