JavaScript հասկացություններ 101. Բարձրագույն կարգի գործառույթներ

Ողջույն տղերք! Շարունակելով իմ կոդավորման ճամփորդությունը, ես իմ ուսուցման մեջ հայտնաբերեցի մեծ բացթողում. չնայած ես կարող եմ մշակել կոդ և կարգաբերել այնպես, ինչպես ոչ ոքի գործը, ես իսկապես դժվարանում եմ բացատրել ավելի հայեցակարգային հիմունքները, թե ինչպես են աշխատում JavaScript-ը և կոդավորման այլ լեզուները: Այսպիսով, ես որոշեցի ստեղծել մի շարք բլոգեր, որպեսզի ժամանակ տրամադրեմ այս հասկացությունները ինքս ինձ համար քանդելու համար՝ հույս ունենալով, որ ես կարող եմ օգնել մեկ ուրիշին այդ ճանապարհին: Հայեցակարգ թիվ մեկ. ավելի բարձր կարգի գործառույթներ:

Ի՞նչ է ավելի բարձր կարգի ֆունկցիան:

Ես ստացել եմ իմ սիրելի սահմանումը freeCodeCamp-ից. Ըստ նրանց՝ ավելի բարձր կարգի ֆունկցիան է.

Գործառույթ, որն ընդունում և/կամ վերադարձնում է մեկ այլ ֆունկցիա:

Դա նշանակում է, որ ավելի բարձր կարգի ֆունկցիաները կա՛մ ա) կընդունեն ֆունկցիա որպես պարամետր, կա՛մ բ) կվերադարձնեն մեկ այլ ֆունկցիա, երբ այն գործարկվի:

Բայց ինչպե՞ս է դա նույնիսկ աշխատում:

JavaScript-ը սիրում էֆունկցիաները: Այնքան, որ JavaScript-ը ֆունկցիան վերաբերվում է հատուկ տեսակի օբյեկտի նման: Ամենատարածված ձևը, որը ես տեսնում եմ դա գործնականում, գործառույթները որպես փոփոխականներ դնելն է.

const hello = function(name) {
   console.log('Hello, ${name}!')
}

Հիմնականում այն ​​ամենը, ինչ դուք կանեիք ցանկացած այլ տեսակի տվյալների հետ (տողեր, բուլյաններ և այլն), կարող եք նաև անել JavaScript-ի ֆունկցիայի հետ: Տեսնենք այս ավելի բարձր կարգի գործառույթների մի քանի օրինակներ գործողության մեջ.

Ֆունկցիան որպես փաստարկ ընդունելը

Սրանք ավելի բարձր կարգի գործառույթների տեսակներն են, որոնք դուք, հավանաբար, արդեն հաճախ օգտագործում եք առօրյա կյանքում և նույնիսկ չեք էլ պատկերացնում, թե դրանք ինչ են. կրկնողներ: Array.prototype.map, Array.prototype.filter, Array.prototype.reduce. Եկեք բաժանենք այն .map iterator-ով.

function doubledArray(array) {
   array.map(num => num * 2)
}

Սա պարզ կրկնող է, որը քարտեզագրում է թվերի զանգվածի վրա և վերադարձնում զանգված՝ զանգվածի յուրաքանչյուր թվով կրկնապատկված: Հավանաբար, մենք բոլորս կարող ենք խախտել այս շարահյուսությունը մեր քնի մեջ, բայց երբ իջնում ​​եք կոշտության մեջ, .map ֆունկցիայի արգումենտը մեկ այլ ֆունկցիա է: Եկեք նայենք դրան այլ կերպ.

let doubler = num => {
   return num * 2
}
function doubledArray(array) {
   array.map(doubler)
}

Մենք անում ենք ճիշտ նույն բանը, ինչ նախկինում, բայց այս անգամ պարզապես հանում ենք այն ֆունկցիան, որը կրկնապատկում է թիվը և այնուհետևկանչում այն ​​կրկնապատկված զանգվածի ֆունկցիայի ներսում: Առաջին օրինակը, իհարկե, խորհուրդ է տրվում ավելի մաքուր կոդի համար, բայց այսպես քանդելն օգնում է ինձ իսկապես հասկանալ, թե ինչ են անում այս կրկնողները:

Մեկ այլ գործառույթի վերադարձ

Ամենից հաճախ, ես տեսնում եմ այս տեսակի ավելի բարձր կարգի գործառույթը, երբ ես օգտագործում եմ Redux-ը React բաղադրիչները կառուցելիս.

export default connect(mapStateToProps, mapDispatchToProps)(App);

Այս օրինակումconnect-ը ֆունկցիա է, որը մենք հանում ենք react-redux գրադարանից: MapStateToProps և mapDispatchToProps արգումենտները նաև ֆունկցիաներ են, բայց դրանք, ըստ էության, պարզապես վերադարձվող արժեքներ են: Այնուհետև դրանք կապվում են Հավելվածի բաղադրիչի հետ՝ օգտագործելով այն, ինչը կոչվում էկրկնակի կանչ (որի մեջ ես կցանկանայի ավելի խորանալ ապագա բլոգում):

*** Անկեղծ ասած, այս տեսակի ավելի բարձր կարգի գործառույթը դեռ մի փոքր շփոթեցնող է ինձ համար, և ես անպայման պետք է ևս մի քիչ կարդալ: ***

Բարձրագույն կարգի գործառույթների առավելությունները

Եկեք վերադառնանք այն կրկնողներին, որոնք մենք քննարկեցինք վերևում: Մինչ այդ ավելի բարձր կարգի գործառույթներն օգտագործելը, ինչպե՞ս կվերափոխենք զանգվածը: Անձամբ ինձ համար ես, հավանաբար, կօգտագործեի for loop, և դրա մեջ կդնեի պայմանականները և ցանկացած այլ անհրաժեշտ կոդ: Թեև սա, իհարկե, դեռ աշխատում է, այն ավելի շատ կոդ է, և սխալի համար ավելի շատ տեղ կա:

Հուսով եմ, որ այս բլոգը օգնեց ձեզ հասկանալու Բարձրագույն կարգի գործառույթների հայեցակարգը: Խնդրում եմ, տեղեկացրեք ինձ, թե ինչ եք կարծում, ես նույնպես դեռ սովորում եմ: