Tại sao sử dụng `const foo = () => {}` thay vì `function foo () {}`

Ví dụ: trong video Redux này , người hướng dẫn luôn sử dụng cú pháp như

const counter = (state=0, action) => {
   ... function body here
}

nơi tôi sẽ chỉ sử dụng "truyền thống"

function counter(state=0, action) {
   ... function body here
}

Mà thực sự ngắn hơn và, IMO, rõ ràng hơn. Thật dễ dàng để quét cạnh trái khá đều và có cấu trúc của trang cho từ "hàm" hơn là quét cạnh phải raggedy cho một "=>" nhỏ.

Khác với this, và cố gắng để khách quan, không phải ý kiến, có một số khác biệt hữu ích hoặc lợi thế cho cú pháp mới lạ?

Các câu lệnh hàm (các hàm được đặt tên, cú pháp thứ 2 được hiển thị) được kéo lên trên cùng của phạm vi từ vựng đầy đủ, ngay cả các câu lệnh phía sau các khối điều khiển và tùy ý, như các ifcâu lệnh. Việc sử dụng const(như let) để khai báo một biến cung cấp cho nó phạm vi khối, dừng việc nâng toàn bộ (nâng lên khối đơn thuần) và đảm bảo nó không thể được khai báo lại.

Khi ghép các tập lệnh lại với nhau hoặc một số sử dụng các công cụ xây dựng gói khác, việc nâng chức năng có thể phá vỡ các tập lệnh xung đột theo những cách khó gỡ lỗi vì nó thất bại trong âm thầm. Một tuyên bố lại constsẽ đưa ra một ngoại lệ trước khi chương trình có thể chạy, do đó việc gỡ lỗi dễ dàng hơn nhiều.

Đây là lý do tại sao bạn nên sử dụng function:

1. Các tín hiệu rõ ràng và súc tích. Điều này có lợi hơn nhiều so với bất kỳ mối lo ngại nào về trường hợp cạnh được liệt kê trong câu trả lời khác.

2. Bạn thực sự muốn nâng hàng trong các mô-đun vì như bạn có thể thấy từ mã bên dưới, việc consttuyên bố tryDoTheThingthất bại trong âm thầm và sẽ không bị bắt cho đến khi bạn cố gắng gọi nó.

3. Hầu hết các đàn em mà tôi tiếp xúc bắt đầu sử dụng constđể khai báo mọi chức năng bởi vì đó là một mốt nhất thời, như sử dụng khoảng trắng trên các tab hoặc làm mọi thứ functional!!!vì "OOP xấu". Đừng làm vậy. Bạn không muốn trở thành kẻ theo đuổi mốt mà không hiểu đầy đủ ý nghĩa.

qua https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074

/*
This shows that, because of block-scoping, const function references must be
invoked in-order or else things will fail silently.
const's are added the name space serially (in the order in which they appear)
and much of the body isn't declared when we first try to invoke or functions
*/


const tryDoTheThing = () => {
  console.log(`This is me trying to be awesome ${getAwesome()}`)
}


// "getAwesome is not defined", because it is referenced too early
tryDoTheThing() // comment to see the rest work


const getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


const doTheThing = () => {
  console.log(`This is awesome! ${getAwesome()}`)
}

doTheThing() // prints

đấu với

/*
Function declarations are given two passes, where the first lifts them to
the top of the namespace, allowing "out of order" usage
*/

doTheThing();


function doTheThing() {
  console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}