เหตุใดจึงใช้ `const foo = () => {}` แทนที่จะเป็น `function foo () {} '

ตัวอย่างเช่นในวิดีโอ Reduxนี้ผู้สอนมักใช้ไวยากรณ์เช่น

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

ฉันจะใช้ "ดั้งเดิม" แค่ไหน

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

ซึ่งสั้นกว่าจริงๆและ IMO จะชัดเจนขึ้น มันง่ายกว่าที่จะสแกนขอบซ้ายที่เป็นธรรมและมีโครงสร้างของหน้าสำหรับคำว่า "ฟังก์ชั่น" มากกว่าการสแกนขอบด้านขวาที่เป็นเศษเล็กเศษน้อยสำหรับขนาดเล็ก "=>"

นอกเหนือจากthisและพยายามที่จะมีวัตถุประสงค์ไม่ใช่ความเห็นมีความแตกต่างหรือประโยชน์ที่เป็นประโยชน์ต่อไวยากรณ์ newfangled หรือไม่

คำสั่งฟังก์ชั่น (ฟังก์ชั่นที่มีชื่อ, ไวยากรณ์ที่ 2 ที่แสดง) ถูกยกขึ้นไปด้านบนของขอบเขตคำศัพท์เต็มแม้กระทั่งคำสั่งที่อยู่เบื้องหลังและบล็อกควบคุมเช่นifคำสั่ง การใช้const(เช่นlet) เพื่อประกาศตัวแปรให้ขอบเขตการบล็อกหยุดการยกแบบเต็ม (การยกเป็นบล็อกเท่านั้น) และทำให้แน่ใจว่าไม่สามารถประกาศใหม่ได้

เมื่อทำการเชื่อมสคริปต์เข้าด้วยกันหรือบางส่วนใช้เครื่องมือสร้างแพ็กเกจอื่นการยกฟังก์ชั่นสามารถทำลายสคริปต์ที่ขัดแย้งกันในรูปแบบที่ยากต่อการดีบักเนื่องจากล้มเหลวอย่างเงียบ ๆ การประกาศอีกครั้งconstจะส่งข้อยกเว้นก่อนที่โปรแกรมจะสามารถทำงานได้ดังนั้นจึงง่ายต่อการดีบัก

นี่คือเหตุผลที่คุณควรใช้function:

1. สัญญาณมีความชัดเจนและรัดกุม นี่เป็นประโยชน์มากกว่าข้อกังวลเกี่ยวกับการยกของเคสที่ระบุไว้ในคำตอบอื่น ๆ

2. คุณต้องการยกขึ้นภายในโมดูลเพราะอย่างที่คุณเห็นจากโค้ดด้านล่างการconstประกาศความtryDoTheThingล้มเหลวอย่างเงียบ ๆ และจะไม่ถูกจับจนกว่าคุณจะพยายามเรียกมัน

3. จูเนียร์ส่วนใหญ่ที่ฉันเข้ามาติดต่อด้วยเริ่มใช้constเพื่อประกาศทุกฟังก์ชั่นเพราะมันเป็นแฟชั่นตอนนี้เช่นการใช้ช่องว่างเหนือแท็บหรือทำทุกอย่างfunctional!!!เพราะ "OOP ไม่ดี" อย่าทำอย่างนั้น คุณไม่ต้องการเป็นคนที่ติดตามแฟชั่นโดยไม่เข้าใจความหมายที่แท้จริง

ผ่าน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

VS

/*
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]))
}