Function Parameter Extensions

Default Parameters

Basic Usage

function fn(name,age=17){ console.log(name+","+age); } fn("Amy",18); // Amy,18 fn("Amy",""); // Amy, fn("Amy"); // Amy,17

Note: When using function default parameters, duplicate parameter names are not allowed.

//No error function fn(name,name){ console.log(name); } //Error //SyntaxError: Duplicate parameter name not allowed in this context function fn(name,name,age=17){ console.log(name+","+age); }

Default parameters are used only when no argument is passed, or when the argument is undefined. The null value is considered a valid value passed.

function fn(name,age=17){ console.log(name+","+age); } fn("Amy",null); // Amy,null

Function parameter default values have a temporal dead zone. In a function parameter default value expression, a parameter value that has not yet been initialized cannot be used as the default value for other parameters.

function f(x,y=x){ console.log(x,y); } f(1); // 1 1 function f(x=y){ console.log(x); } f(); // ReferenceError: y is not defined

Rest Parameters

Rest parameters are used to represent an indefinite number of parameters, in the form ...variableName, consisting of ... plus a named parameter identifier. The named parameter can only be placed at the end of the parameter list, and there can be only one rest parameter.

Basic Usage

function f(...values){ console.log(values.length); } f(1,2); //2 f(1,2,3,4); //4

Arrow Functions

Arrow functions provide a more concise way to write functions. The basic syntax is:

Parameter => function body

Basic usage:

var f = v => v; //Equivalent to var f = function(a){ return a; } f(1); //1

When the arrow function has no parameters or has multiple parameters, use()parentheses to enclose them.

var f = (a,b) => a+b; f(6,2); //8

When the arrow function body has multiple statements, use{}curly braces to wrap it, representing a code block. When there is only one statement and a result needs to be returned, you can omit{}, and the result will be returned automatically.

var f = (a,b) => { let result = a+b; return result; } f(6,2); // 8

When an arrow function needs to return an object, in order to distinguish it from a code block, use()parentheses to wrap the object.

//Error var f = (id,name) => {id: id, name: name}; f(6,2); // SyntaxError: Unexpected token : //No error var f = (id,name) => ({id: id, name: name}); f(6,2); // {id: 6, name: 2}

Note: There are no bindings for this, super, arguments, and new.target.

var func = () => { //There is no this object inside an arrow function. //The this at this point is the outer this object, namely Window. console.log(this) } func(55) // Window var func = () => { console.log(arguments) } func(55); // ReferenceError: arguments is not defined

The this object in the arrow function body is the object at the time the function is defined, not the object at the time the function is used.

function fn(){ setTimeout(()=>{ //When defined, this is bound to the this object inside fn. console.log(this.a); },0) } var a = 20; //The this object of fn is {a: 18} fn.call({a: 18}); // 18

It cannot be used as a constructor, meaning you cannot use the new command, otherwise an error will be thrown.

Suitable Use Cases

Before ES6, the this object in JavaScript was always a headache. In callback functions, you often saw code like var self = this, in order to pass the external this into the callback function. With arrow functions, this is no longer needed; you can just use this directly.

//Callback Functions var Person = { 'age': 18, 'sayHello': function () { setTimeout(function () { console.log(this.age); }); } }; var age = 20; Person.sayHello(); // 20 var Person1 = { 'age': 18, 'sayHello': function () { setTimeout(()=>{ console.log(this.age); }); } }; var age = 20; Person1.sayHello(); // 18

Therefore, when we need to maintain a this context, we can use arrow functions.

Unsuitable Use Cases

Defining a function method, and the method contains this

var Person = { 'age': 18, 'sayHello': ()=>{ console.log(this.age); } }; var age = 20; Person.sayHello(); // 20 //At this point, this points to the global object. var Person1 = { 'age': 18, 'sayHello': function () { console.log(this.age); } }; var age = 20; Person1.sayHello(); // 18 //At this point, this points to the Person1 object.

When dynamic this is needed

var button = document.getElementById('userClick'); button.addEventListener('click', () => { this.classList.toggle('on'); });

The listener function of button is an arrow function, so the this inside the listener function points to the outer this object at the time of definition, namely Window, resulting in the inability to operate on the clicked button object.