ES6 Series 4: Function Extension

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaohe Mountain" public account on WeChat to get the latest articles in time.

Preface

Before we start learning, what we want to tell you is that this article is a "Function Extensions" chapter in Ruan Yifeng's "Introduction to ECMAScript6" book. If you have mastered the following knowledge items, you can skip this The link directly enters the question exercise

• Default value of function parameters
• Scope
• rest parameter
• Arrow function

If you have forgotten some parts, 👇🏻 is ready for you!

Learning link

function extended learning

Summary

Default value of function parameters

Specify default values for the parameters of the function

// ES5写法
function log(x, y) {
  y = y || 'World'
  console.log(x, y)
}

log('Hello') // Hello World

// ES6写法
function log(x, y = 'World') {
  console.log(x, y)
}

log('Hello') // Hello World

Advantages:

• People who read the code can immediately realize which parameters can be omitted, without having to look at the function body or documentation
• It is conducive to future code optimization. Even if the future version is in the external interface, completely remove this parameter, it will not cause the previous code to fail to run

Note:

• Parameter variables are declared by default, so they cannot be const again let or 060796e3ad46f5

function foo(x = 5) {
  let x = 1 // error
  const x = 2 // error
}

• When using parameter default values, functions cannot have parameters with the same name

// 不报错
function foo(x, x, y) {
  // ...
}

// 报错
function foo(x, x, y = 1) {
  // ...
}

• The parameter default value is not passed by value, but the value of the default value expression is recalculated every time. In other words, parameter default values are evaluated lazily

let x = 99
function foo(p = x + 1) {
  console.log(p)
}

foo() // 100

x = 100
foo() // 101

Scope

Once the default value of the parameter is set, when the function is declared and initialized, the parameter will form a separate scope (context). When the initialization is over, this scope will disappear. This kind of grammatical behavior will not appear when the parameter default value is not set.

var x = 1
function foo(
  x,
  y = function () {
    x = 2
  },
) {
  var x = 3
  y()
  console.log(x)
}

foo() // 3
x // 1

// 分割线

var x = 1
function foo(
  x,
  y = function () {
    x = 2
  },
) {
  x = 3
  y()
  console.log(x)
}

foo() // 2
x // 1

rest parameter

ES6 introduces the rest parameter (in the form of...variable name), which is used to obtain redundant parameters of the function, so that there is no need to use the arguments object. rest parameter is an array, which puts the extra parameters into the array.

function add(...values) {
  let sum = 0

  for (var val of values) {
    sum += val
  }

  return sum
}

add(2, 5, 3) // 10

//上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数
//传入任意数目的参数。

Note that rest parameter (that is, it can only be the last parameter), otherwise an error will be reported.

Arrow function

ES6 allows the use of "arrows" ( => ) to define functions.

var f = (v) => v

// 等同于
var f = function (v) {
  return v
}

If the arrow function does not require parameters or requires multiple parameters, use a parenthesis to represent the parameter part.

var f = () => 5
// 等同于
var f = function () {
  return 5
}

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function (num1, num2) {
  return num1 + num2
}

If the code block part of the arrow function is more than one statement, it is necessary to use curly braces to enclose them and use the return statement to return.

var sum = (num1, num2) => {
  return num1 + num2
}

arrow function has several points of attention:

• this object in the function body is the object when it is defined, not the object when it is used.
• It cannot be used as a constructor, that is, you cannot use the new command, otherwise an error will be thrown.
• You cannot use the arguments object, which does not exist in the function body. If you want to use it, you can use the rest parameter instead.
• The yield command cannot be used, so the arrow function cannot be used as the Generator function.

Of the four points above, the first is particularly noteworthy. this object is variable, but in the arrow function, it is fixed.

Self-test

One: What does the following code output

var x = 1
function foo(x, y = () => (x = 5)) {
  x = 9
  y()
  console.log(x)
}

foo()

---

2: What does the following code output

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2
  },
  perimeter: () => 2 * Math.PI * this.radius,
}

shape.diameter()
shape.perimeter()

• A: 20 and 62.83185307179586
• B: 20 and NaN
• C: 20 and 63
• D: NaN and 63

---

Three: Explain the following code (meaning, operation result and function).

f1 = (x) => (y) => (z) => x * y * z

Problem analysis

One,

Answer：5

First of all, you need to understand the functions foo and function foo(x, y = () => x = 5) . The focus is on the second y = () => x = 5 , which means that a function needs to be given to the foo function. If not, then y represents

;() => {
  x = 5
}

For this function, foo is called here, and the second function is not given. When executed, y() actually assigns x to 5 , so it is printed as 5 .

---

two,

Answer：B

First of all, you need to understand that in the arrow function, this is different from that in the ordinary function. The this in the arrow function is determined when it is defined. In the diameter function, this.radius accessed shape in radius , which is 10 .

However, in perimeter function, followed by this.radius access radius not shape in radius , looking for can not be found in the outer layer, and therefore return NaN . So the answer is 20 and NaN

---

three,

First of all, it is not very clear to use arrow function logic in this way, convert it to a normal function:

function f1(x) {
  return function f2(y) {
    return function f3(z) {
      return x * y * z
    }
  }
}

Meaning: Multiply three numbers

Running result: f1(x)(y)(z)===x*y*z

The outermost layer, f1 is a function with one parameter, the return value is a function with one parameter f2,f1(x)(y)(z)->f2(y)(z),f2 return value is a function with one parameter f3，f2(y)(z)->f3(z) , because the returned function is defined f1 and f2 the scope chain, may take the x and y value, so f3 return value x*y*z , finally f1(x)(y)(z)===x*y*z

ES 6 series of function extensions, we are over here, thank you for your support to the authors! Your attention and praise will be the strongest driving force for us to move forward! thank you all!