ECMAScript6 function default parameters_javascript tips

Every new feature added during the language update is extracted from the needs of millions of developers. Standard adoption can reduce the pain of programmers and bring convenience.

We often write like this

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

To put it simply, x and y provide a default value of 0. When not passed, x and y are calculated with the value 0. Once passed, the actual value will be used for calculation.

Another example is defining an ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

A simple ajax function encapsulated with native JS. The url is required, async and dataType are optional. If not filled in, the default is to request and return JSON format data synchronously.

Another example is defining a rectangle class

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

Without passing any parameters when new, a rectangle with a default width and height of 200*300 will be created.

Whether it is calc, ajax function or Rectangle class, we all need to handle the default value in the function body. Wouldn’t it be nice if the language handles it by itself? ES6 provides this feature (Default Parameters). The following are calc, ajax, and Rectangle rewritten with the new features of ES6.

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

As you can see, ES6 moved the default value part from braces to parentheses, and also reduced the "||" operation, and the function body has since been slimmed down. The default value of the parameter should be in the place where the parameter is defined, which looks a lot simpler. O(∩_∩)O

Default parameters can be defined at any position, such as defining a

in the middle

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

defines a default parameter async, url and success are required. In this case, you need to set the middle parameter to undefined

ajax('../user.action', undefined, function() {
   
})

Note, don’t take it for granted and change undefined to null. Even if null == undefined, after passing null, the async in the function body will be null and not true.

The following points need to be noted:

1. After defining the default parameters, the length attribute of the function will be reduced, that is, several default parameters are not included in the calculation of length

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. Let and const cannot be used to declare the default value again, var can be

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

Another interesting thing is: the default parameter can not be a value type, it can be a function call

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

You can see that the parameter success here is a function call. If the third parameter is not passed when calling ajax, the getCallback function will be executed, which returns a new function assigned to success. This is a very powerful function that gives programmers a lot of room for imagination.

For example, you can use this feature to force a certain parameter to be passed, otherwise an error will be reported

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

The above is the entire content of this article, I hope you all like it.