Neden işlev foo () {} `yerine` const foo = () => {} `

Örneğin, bu Redux videosunda eğitmen her zaman şöyle bir sözdizimi kullanır

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

sadece "geleneksel"

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

Bu aslında daha kısa ve IMO daha net. Sayfanın "işlev" kelimesi için oldukça eşit ve yapılandırılmış sol kenarını küçük bir "=>" için düzensiz sağ kenarını taramaktan daha kolaydır.

thisGörüş dışında , objektif olmaya çalışmak ve yeni ortaya çıkan sözdiziminde bazı yararlı farklar veya avantajlar var mı?

İşlev ifadeleri (adlandırılmış işlevler, gösterilen 2. sözdizimi), ififadeler gibi rasgele ve kontrol bloklarının ardında bile, tam sözlük kapsamının en üstünde yer alır . Bir değişkeni bildirmek için const(like let) kullanmak ona blok kapsamı verir, tam kaldırma işlemini (sadece blokla kaldırma) durdurur ve yeniden bildirilememesini sağlar.

Komut dosyalarını bir arada birleştirirken veya diğer paket oluşturma araçlarını kullanırken, işlev kaldırma, çakışan komut dosyalarını sessizce başarısız olduğu için hata ayıklaması zor yollarla kesebilir. Yeniden bildirilen const, programın çalışması için bir istisna atar, bu nedenle hata ayıklamak çok daha kolaydır.

İşte neden kullanmalısınız function:

1. Sinyaller açık ve özlüdür. Bu, diğer cevapta listelenen son durum kaldırma endişelerinden çok daha faydalıdır.

2. Aslında, aşağıdaki koddan da görebileceğiniz gibi, hata constbildirimi tryDoTheThingsessizce başarısız olur ve siz çağırmaya çalışana kadar yakalanmaz.

3. Temas kurduğum çoğu genç, consther fonksiyonu açıklamak için kullanmaya başladı çünkü şu anda bir solma, sekmeler üzerinde boşluk kullanmak veya functional!!!"OOP kötü" olduğu için her şeyi yapmak gibi . Bunu yapma. Etkilerini tam olarak anlamadan solukları takip eden adam olmak istemezsiniz.

https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074 aracılığıyla

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