4.1 ES6 Functions

❮ Cpp Enums Intro And Strongly Typed Verilog2 Fast2Slow ❯

4.1 ES6 Functions

Category ES6 Tutorial

Function Parameter Expansion

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, it is not allowed to have parameters with the same name.

// 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 only used when no argument is passed, or the argument is undefined; null is considered a valid value.

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

Function parameter default values have a temporary dead zone; parameters that have not been initialized cannot be used as default values 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 indicate an indefinite number of arguments, in the form of ...variable name, composed of ... and a named parameter identifier. The named parameter can only be placed at the end of the parameter list, and there can only be 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 of writing 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 multiple parameters, they should be enclosed in ().

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

When the arrow function body has multiple statements, it should be wrapped in {} to indicate a code block. When there is only one statement and a result needs to be returned, {} can be omitted, and the result will be returned automatically.

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

When the arrow function needs to return an object, in order to distinguish it from a code block, the object should be wrapped in ().

// 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, or new.target.

var func = () => {
  // Arrow functions do not have a this object,
  // the this here is the outer this object, i.e., 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 of function definition, not the object at the time of function usage.

function fn() {
  setTimeout(() => {
    // At the time of definition, this is bound to the this object in fn
    console.log(this.a);
  }, 0)
}
var a = 20;
// The this object for fn is {a: 18}
fn.call({a: 18});  // 18

Arrow functions cannot be used as constructors, i.e., they cannot be used with the new command, otherwise an error will occur.

Suitable Use Cases

Before ES6, JavaScript's this object has always been a headache. In callback functions, you often see

❮ Cpp Enums Intro And Strongly Typed Verilog2 Fast2Slow ❯