Video học lập trình mỗi ngày

Như tiêu đề bài viết ES6 Arrow Functions Cheatsheet, chủ đề này rất đơn giản và hầu hết những ai làm reactjs thì cũng tương đối thành thạo về chủ đề này. Nhưng không có nghĩa là tất cả đều biết về các cách viết arrow functions. Vậy thì tại sao không lướt sơ qua một chút phải không nào? 

✔ Yêu cầu người đọc: 

1 - Hiểu ES6 ?

2 - Arrow functions là gì?

Tổng hợp các bài viết về ES6 JAVASCRIPT: Đọc tại đây 

Có rất nhiều các viết arrow function và ở đây tôi đã tham khảo và tổng kết lại:

// Explicit Return, Multi-Line
a => {
  return a
}

// Explicit Return, Single-Line
a => { return a }

// Implicit Return, Multi-line
a => (
  a
)

// Implicit Return, Single-Line
a => a

// Multiple Parameters, Parentheses Required
(a, b) => a, b

✔ Implicit vs Explicit Return

Ở một function bình thường nếu bạn muốn return một thứ gì đó thì bạn có thể sử dụng keyword return. Arrow functions cũng có điều đó, nếu như sử dụng return thì đó là Explicit Return. Tuy nhiên, cũng còn một cách không sử dụng keyword return nhưng vẫn có thể return được đó là Implicit Return. Chúng ta cùng lướt qua ví dụ sau :

Example A: Normal Function

const sayHi = function(name) {
  return name
}

Example B: Arrow Function with Explicit Return

// Multi-line
const sayHi = (name) => {
  return name
}

// Single-line
const sayHi = (name) => { return name }

Example C: Arrow Function with Implicit Return

// Single-line
const sayHi = (name) => name

// Multi-line
const sayHi = (name) => (
  name
)

Thông qua ví dụ bạn cũng đã thấy khác gì rồi đúng không? Ở đây chú ý hai điều 

Block body ➡️ return keyword cần có 

Concise body ➡️ return keyword là implied và không cần thiết

✔  Parentheses - Dấu ngoặc ().

 Ở function bình thường thì ta đã thấy () quan trọng thế nào rồi thì chúng ta tiếp tục xem trong arrow function thì Parentheses có tác dụng gì nào? Parentheses hay dấu ngoặc không cần thiết khi có một parameter.

// Normal Function
const numbers = function(one) {}

// Arrow Function, with parentheses
const numbers = (one) => {}

// Arrow Function, without parentheses
const numbers = one => {}

Parentheses - hay dấu ngoặc sẽ phải có nếu có hơn một parameter.

// Normal Function
const numbers = function(one, two) {}

// Arrow Function, with parentheses
const numbers = (one, two) => {}

✔ Returning Objects

Hãy cẩn thận khi sử dụng return object trong arrow function nhé mấy chế. Sai sai sai...

const me = () => { name: "samantha" };

me(); // undefined 😱

Đúng đúng ...

const me = () => ({ name: "samantha" });

me(); // { name: "samantha" } ✅

✔ Done! 

Sơ lược cho bạn nào chưa biết thì xài thôi, chứ chẳng có gì sao siêu để rồi nhức đầu với mấy bài dạng này. Và cũng nên biết để đọc code của những anh chàng thích xài hàng này. 

Happy coding!
repush : https://www.samanthaming.com/tidbits/47-arrow-functions-cheatsheet