La sfârșitul anilor 90 – când am învățat JavaScript – am fost învățați să scriem funcția „Hello World” folosind un declarația funcției. Asa…

function helloWorld() {
  return ‘Hello World!’;
}

În zilele noastre se pare că toți copiii minunați scriu funcția „Hello World” astfel …

const helloWorld = () => 'Hello World!';

Acesta este un expresia funcției în ES2015 JavaScript și este sexy ca naiba. Este frumos să te uiți. Totul este o singură linie. Deci concis. Atat de dragut.

Folosește o funcție săgeată care este una dintre cele mai populare caracteristici ale ES2015.

Când am văzut asta pentru prima dată, am fost ca:

Confuzie constanta de ce mai folosesc instructiunile functiei JavaScript
Chiar dacă Babel este gratuit.

Deci, după aproape 20 de ani de JavaScript și după ce am folosit ES2015 pentru mai multe proiecte, iată cum aș scrie funcția „Hello World” astăzi:

function helloWorld() {
  return ‘Hello World!’;
}

Acum, că ți-am arătat noul mod, sunt sigur că abia poți sta să privești vechiul cod școlar de mai sus.

Trei linii întregi pentru o simplă funcție! Toate acele personaje în plus!

Știu la ce te gândești …

Confuzie constanta de ce mai folosesc instructiunile functiei JavaScript
Nu are nimeni timp pentru asta!

Îmi plac funcțiile săgeți, chiar îmi place. Dar când trebuie să declar o funcție de nivel superior în codul meu, folosesc în continuare o declarație bună de modă veche.

Acest citat de „Unchiul Bob” Martin explică de ce:

„… raportul dintre timpul petrecut citind versus scriere depășește cu mult 10 – 1. Citim constant codul vechi ca parte a efortului de a scrie cod nou.

Deoarece acest raport este atât de mare, dorim ca citirea codului să fie ușoară chiar dacă îngreunează scrierea. ”

– Robert C. Martin
Cod curat: un manual de artizanat software agil

Instrucțiunile funcționale au două avantaje clare față de expresiile funcționale:

Avantajul # 1: Claritatea intenției

Când scanați prin mii de linii de cod pe zi, este util să puteți descoperi intenția programatorului cât mai repede și mai ușor posibil.

Uita-te la asta:

const maxNumberOfItemsInCart = ...;

Citiți toate aceste caractere și încă nu știți dacă elipsa reprezintă o funcție sau o altă valoare. Ar putea fi:

const maxNumberOfItemsInCart = 100;

… Sau ar putea fi la fel de ușor:

const maxNumberOfItemsInCart = (statusPoints) => statusPoints * 10;

Dacă utilizați o declarație de funcție, nu există o astfel de ambiguitate.

Uita-te la:

const maxNumberOfItemsInCart = 100;

…contra:

function maxNumberOfItemsInCart(statusPoints) {
  return statusPoints * 10;
}

Intenția este cristalină chiar de la începutul liniei.

Dar poate folosiți un editor de cod care are câteva indicii de codare a culorilor. Poate că ești un cititor de viteză. Poate pur și simplu nu crezi că este o afacere atât de mare.

Te aud. Incordarea pare inca destul de sexy.

De fapt, dacă acesta ar fi singurul meu motiv, aș fi putut găsi o modalitate de a mă convinge că este un compromis care merită.

Dar e nu singurul meu motiv …

Avantajul nr. 2: Ordinul declarației == ordinea executării

În mod ideal, vreau să declar codul meu mai mult sau mai puțin în ordinea în care mă aștept să fie executat.

Acesta este showstopper-ul pentru mine: orice valoare declarată folosind cuvântul cheie const este inaccesibil până când ajunge la execuție.

1612080909 882 Confuzie constanta de ce mai folosesc instructiunile functiei JavaScript
Pregătește-te pentru jargonul de lux care demonstrează că știu cam despre ce vorbesc (sperăm).

Avertisment corect: Sunt pe cale să pun totul pe tine, „Profesor JavaScript”. Singurul lucru pe care trebuie să îl înțelegeți în tot jargonul de mai jos este că nu puteți utiliza un const până nu îl declarați.

Următorul cod va genera o eroare:

sayHelloTo(‘Bill’);

const sayHelloTo = (name) => `Hello ${name}`;

Acest lucru se datorează faptului că, atunci când motorul JavaScript citește codul, va fi lega „SayHelloTo”, dar nu o va face inițializați aceasta.

Toate declarațiile din JavaScript sunt legate devreme, dar sunt inițializate diferit.

Cu alte cuvinte, JavaScript se leagă declarația „sayHelloTo” – o citește mai întâi și creează un spațiu în memorie pentru păstrează-i valoarea – dar nu a stabilit „Spune Salut” la orice până când ajunge la el în timpul execuţie.

Timpul dintre „sayHelloTo” fiind legat și „sayHelloTo” fiind inițializat se numește zona moartă temporală (TDZ).

Dacă utilizați ES2015 direct în browser (spre deosebire de transpunerea în ES5 cu ceva de genul Babel), următorul cod aruncă de fapt și o eroare:

if(thing) { 
  console.log(thing);
}
const thing = 'awesome thing';

Codul de mai sus, scris folosind „var” în loc de „const”, ar fi nu aruncați o eroare deoarece varurile sunt inițializate ca nedefinit atunci când sunt legate, în timp ce consts nu sunt inițializate deloc în timpul legării. Dar deviez …

Instrucțiunile funcționale nu suferă de această problemă TDZ. Următoarele sunt perfect valabile:

sayHelloTo(‘Bill’);

function sayHelloTo(name) {
  return `Hello ${name}`;
}

Acest lucru se datorează faptului că instrucțiunile funcționale sunt inițializate imediat ce sunt legate – inainte de orice cod este executat.

Deci, indiferent când declarați funcția, aceasta va fi disponibilă pentru aceasta sfera lexicală de îndată ce codul începe să se execute.

1612080910 562 Confuzie constanta de ce mai folosesc instructiunile functiei JavaScript
Profesor JavaScript, afară!

Ceea ce tocmai am descris mai sus ne obligă să scriem un cod care arată invers. Trebuie să începem cu funcția de cel mai mic nivel și să ne ridicăm.

Creierul meu nu funcționează așa. Vreau contextul înainte de detalii.

Majoritatea codului este scris de oameni. Deci, este logic că ordinea de înțelegere a celor mai mulți oameni respectă ordinea de execuție a celor mai multe coduri.

De fapt, nu ar fi frumos dacă am putea oferi un mic rezumat al API-ului nostru în partea de sus a codului nostru? Cu declarațiile funcționale, putem în totalitate.

Verificați acest modul (oarecum inventat) de coș de cumpărături …

export {
          createCart,
       addItemToCart,
  removeItemFromCart,
        cartSubTotal,
           cartTotal,
            saveCart,
           clearCart,
}

function createCart(customerId) {...}

function isValidCustomer(customerId) {...}

function addItemToCart(item, cart) {...}

function isValidCart(cart) {...}

function isValidItem(item) {...}

...

Cu expresii funcționale ar arăta ceva de genul …

...

const _isValidCustomer = (customerId) => ...

const _isValidCart = (cart) => ...

const _isValidItem = (item) => ...

const createCart = (customerId) => ...

const addItemToCart = (item, cart) => ...

...
export {
          createCart,
       addItemToCart,
  removeItemFromCart,
        cartSubTotal,
           cartTotal,
            saveCart,
           clearCart,
}

Imaginați-vă acest lucru ca pe un modul mai mare, cu multe funcții interne mici. Pe care ai prefera-o?

Există cei care vor susține că utilizarea ceva înainte de a declara că este nefiresc și poate avea consecințe neintenționate. Există chiar și oameni extrem de deștepți care au spus astfel de lucruri.

Este cu siguranță o părere – nu un fapt – că o cale este mai bună decât cealaltă.

Dar dacă mă întrebi: Codul este comunicare. Un cod bun spune o poveste.

Voi lăsa compilatoarele și transpilerele, minifierele și urâtele, să se ocupe de optimizarea codului pentru mașini.

Vreau să îmi optimizez codul pentru intelegerea umana.

Dar despre acele funcții săgeată?

Da. Încă sexy și încă minunat.

De obicei folosesc funcții săgeată pentru a transmite o funcție mică ca valoare către o funcție de ordin superior. Folosesc funcții săgeată cu promisiuni, cu hartă, cu filtru, cu reducere. Sunt genunchii albinelor, prieteni!

Cateva exemple:

const goodSingers = singers.filter((singer) => singer.name !== 'Justin Bieber');

function tonyMontana() {
  return getTheMoney()
           .then((money) => money.getThePower())
           .then((power) => power.getTheWomen());
}

Am folosit câteva alte funcții JavaScript noi în acest articol. Dacă doriți să aflați mai multe despre cel mai recent standard JavaScript (ES2015) și toate caracteristicile interesante pe care le are de oferit, Ar trebui obțineți gratuit ghidul meu de pornire rapidă.

Scopul meu este întotdeauna să ajut cât mai mulți dezvoltatori posibil, dacă ați găsit util acest articol, vă rugăm să apăsați butonul ❤ (recomandare) pentru ca alții să îl vadă. Mulțumiri!