Arrow function trong JS

Chào các bạn, Arrow function là 1 new feature được giới thiệu trong ES6, được sử dụng song song với cách viết function truyền thống, giúp cho syntax được ngắn ngọn và súc tích hơn. Arrow function thích hợp để sử dụng cho các non-method functions, không sử dụng constrctors

• Basic Syntax:

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }
singleParam => expression


// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

• Advanced Syntax

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6

2 Yếu tố ảnh hưởng đến việc giới thiệu arrow function là: ngắn gọn va không có rắng buộc về this Ví dụ:

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]

materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

materials.map(material => material.length); // [8, 6, 7, 9]

Cho đến khi Arrow function được giới thiệu, mọi hàm mới đều xác định giá trị của nó (một đối tượng mới trong trường hợp có một constructor sẽ không được definde trong chế độ strict mode, đối tượng cơ sở sẽ được gọi nếu hàm được gọi là một "object method", vv). Điều này là 1 ý tưởng rút gọn của style object- oriented mới.

1. Liên quan tới strict mode

Điều này xuất phát từ surrounding lexical context, tại strict mode thì this được ignored

var f = () => { 'use strict'; return this; };
f() === window; // or the global object

2. Lời gọi thông qua call hoặc apply

• Từ khi sử dụng arrow function bạn không cần phải sử dụng this, các methods call() or apply() có thể được pass trong parameters.

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // This would log to 2
console.log(adder.addThruCall(1)); // This would log to 2 still

2.1. Không bị rằng buộc bởi arguments

• Arrow function không có argument object của riêng nó. Vì vậy trong ví dụ này arguments đơn giản là reference tới argument của encoling scope:

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
  return f(10);
}

foo(1); // 2

• Trong nhiều trường hợp thì rest paramertes được sử dụng thay thế tốt hơn arguments object:

function foo(n) { 
  var f = (...args) => args[0] + n; 
  return f(10); 
}

foo(1); // 11

3. Body funtion

Arrow function có thể có một "concise body" hoặc thông thường "block body". Trong một trường hợp ngắn gọn , chỉ có một biểu thức được xác định, nó trở thành 1 return value rõ ràng. Trong một block body, thì bạn phải return 1 trạng thái rõ ràng

var func = x => x * x;                  
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed

4. Trả về một object literals

Hãy nhớ rằng việc ruturn 1 literals object sử dụng concíse body syntax params => {object:literal} sẽ dần đến các kết quả làm việc không mong muốn:

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

5. Ký tự xuống dòng (line break)

• Không thể chứa line break giữa paramters và arrow

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

Trên đây là bày giới thiệu về Arrow function, nó là 1 cái mới, hay ho được giới thiệu trong ES6. Bạn có thể sử dụng song song với cách viết function truyền thống. Thanks for reading.