Easy Learning javascript--part 6th: JavaScript Arrow functions

The JavaScript arrow function is an easy way to write function expressions introduced in ECMAScript 6. Typically, in JavaScript, you can create functions in two ways:

• function statements.
• An expression of the function.

You can create a function statement as follows:

function add(num1, num2) {    var res = num1 + num2; return res;}var sum = add(7, 2);console.log(sum);

You can also create function expressions of the same functionality as follows:

var add = function (num1, num2) {    var res = num1 + num2; return res;}var sum = add(7, 2);console.log(sum);

ECMA 2015 (or ECMA Script 6) introduces a shorter syntax for writing function expressions, called arrow functions. Using the arrow function, you can write the above function expression as:

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

As you can see, the function expressions written with the arrow function are shorter.

Basic syntax rules for arrow functions

First, the parameters should be passed in parentheses. You can create an arrow function with two parameters, as follows:

(num1, num2) => { return num1 + num2; };

If you pass only one argument, the parentheses are optional and you can choose to ignore them. You can create an arrow function for a parameter, as follows:

var add = num => { return num * 10; };

If there are no arguments, then you have to have an empty parenthesis--not without. So for a function with no parameters, the arrow functions are written like this:

var add = () => { console.log("hey foo") };

If there is a single expression or statement in the function:

• The use of parentheses in the body is optional.
• Using the return statement is optional.

You can override the Add function without using parentheses and return statements in the body of the function, as follows:

var add = (num1, num2) => num1 + num2;

You can also use console statements to write functions without parameters, as follows:

var add = () => console.log("hey");

Returns the object literal

JavaScript arrow functions can also return object literals. The only requirement is that you need to enclose the returned object in parentheses as follows:

var foo = (name, age) => ({    name: name,    age: age})var r = foo("my cat", 22);console.log(r);

As you can see, the object to be returned is enclosed in parentheses. If you do not, JavaScript will not differentiate between object literals and function bodies.

The arrow function supports rest parameters

The JavaScript arrow function supports another ES6 function: Rest parameter. You can use the rest parameter in the arrow function, as shown in the following code:

var add = (num1, num2, ...restparam) => {    console.log(restparam.length);    var result = num1 + num2; return result;}var r = add(67, 8, 90, 23);console.log(r);

In this example, when you use an arrow function with a rest parameter, the output will be 2 and 75, because the number of extra arguments passed is the sum of 2,NUM1 and num2 is 75.

Arrow function supports default parameters

In addition, the JavaScript arrow function also supports another ES6 feature: default parameters. The default parameters are described in detail here. You can use the default parameters in the arrow functions as follows:

var add = (num1 = 9, num2 = 8) => { var result = num1 + num2; return result;}var r = add();console.log(r);

In the above code, there are default parameters in the arrow functions. When this function is called, we do not pass any values, and because of the default arguments, the output will be 17.

How does "this" work in the arrow function?

The arrow function does not have its own this value. The This value in the arrow function is always inherited from the enclosing range. In JavaScript, each function has its own this value, depending on how the code calls the function. Take a closer look at the code listed below:

var Cat = {    name: ‘mew‘,    canRun: function () { console.log(this) var foo = () => { console.log(this) } foo(); }};

Here, cat is an object literal, which includes:

• The property name.
• Method Canrun.

In the Canrun method, we created an arrow function foo, which gives the this value. Since the arrow function does not have its own this value, it will get from the surrounding function, so you will get:

Image

As you can see, the this value is the same in the Canrun method and the arrow function foo. The arrow function gets the this value from the inheritance range. If you're not sure about this, keep the following two rules in mind:

• Use Object.Method to get a meaningful object in the method as the this value.
• For any other requirement, use the arrow function, because the function does not have its own this value, so it inherits the this value of the enclosing range.

Restrictions on using Arrow functions

Some restrictions to note when applying the arrow functions:

• The arrow function does not have a parameter object.
• An arrow function cannot be used with a new operator, so it cannot be used as a constructor.
• The arrow function does not have a prototype property.

If you try to use the arrow function as a constructor, you will get an exception. Take a look at the following code:

var foo = (name, age) => { name = name, age = age };var f1 = new foo("cat", 6);

The code attempts to create an object by using the arrow function Foo as a constructor F1,javascript throws the following exception:

Image

And, when you try to output the prototype value of the arrow function, you get the output of the undefined:

var foo = (name, age) => { name = name, age = age };console.log(foo.prototype);

This occurs because the arrow function does not have a prototype property. Keep in mind that although the arrow function gives you a short way to write a function expression, it does not have its own this value and cannot be used as a constructor.

Welcome to join the Learning Exchange Group 569772982, we learn to communicate together.

Easy Learning javascript--part 6th: JavaScript Arrow functions