Front-End Developer
توابع مرتبه بالا(Higher-Order Functions) در جاوا اسکریپت
جاوا اسکریپت یکی از زبان های برنامه نویسی سطح بالا محسوب میشه که امروزه قدرتش بر کسی پوشیده نیست، یکی از قابلیت های جاوا اسکریپت که اونو به یه زبان برنامه نویسی فانکشنال مناسب تبدیل کرده اینه که اجازه میده از توابع مرتبه بالا استفاده کنین.
توابع مرتبه بالا توابعی هستند که یک تابع را به عنوان پارامتر ورودی دریافت و یا به عنوان خروجی ارسال می کنند، دانستن اینکه چه زمانی و چگونه از این توابع استفاده می شود ضروری است ،استفاده از این توابع باعث میشه کد هایی که می نویسین ساده تر و قابل فهم تر بشه.
Filter
فیلتر یک متد برای آرایه ها است، پارامتری که فیلتر می پذیرد یک فانکشن تست است که حتما خروجی آن باید Boolean باشد، خروجی تابع فیلتر یک آرایه جدید از عضو های تابع اولیه است که در تست فانکشن true را برگرداندند.
تصور کنید کدی را می نویسید که شامل لیست افرادی است که می خواهید با فیلتر افرادی که 18 سال و یا بیشتر از آن سن دارند را پیدا کند.
const people = [
{ name: ‘John Doe’, age: 16 },
{ name: ‘Thomas Calls’, age: 19 },
{ name: ‘Liam Smith’, age: 20 },
{ name: ‘Jessy Pinkman’, age: 18 },
];
حالا اگه ما بخوایم بدون استفاده از توابع مرتبه بالا افرادی که 18 سال یا بیشتر سن دارند رو پیدا کنیم باید کدی بنویسیم مثل کد زیر:
const peopleAbove18 = (collection) => {
const results = [];
for (let i = 0; i < collection.length; i++) {
const person = collection[i];
if (person.age >= 18) {
results.push(person);
}
}
return results;
};
حالا می خوایم با استفاده از توابع مرتبه بالا و filter() کدی بنویسیم که مشابه کار کد بالا رو انجام بده
const peopleAbove18 = (collection) => {
return collection
.filter((person) => person.age >= 18);
}
و یا حتی:
const peopleAbove18 = people.filter(above18 => above18.age >= 18);
به همین سادگی می تونیم با استفاده از توابع مرتبه بالا حجم کد نویسی خودمونو کم کنیم و همون طور که می دونید کم شدن حجم کد باعث کم تر شدن میزان اشتباه تو کد نویسی میشه علاوه بر این باعث خوانایی بیشتر کد های ما می شود .
Map
یکی دیگه از چیزایی که خیلی در توابع مرتبه بالا استفاده می شود متد map() است، که یک فانکشن را دریافت می کند و آن را بر روی تک تک اعضای آرایه اعمال می کند.
برای مثال در یک رشته از اعداد وقتی بخواهیم همه ی اعضا را به توان 2 برسانیم از متد map() استفاده می کنیم:
const numbers = [1,2,3,4,5,6,10,20];
const squares = numbers.map((x) => Math.pow(x,2));
console.log(squares); //[1, 4, 9, 16, 25, 36, 49, 64, 81]
و یا برای نمایش نام و سن افراد در مثال قبلی از کد زیر استفاده می کنیم:
const showInfo = people.map(arr => arr.name + "|" + arr.age);
Reduce
آخرین و قدرتمندترین متدی که تو این مطلب در موردش حرف می زنیم Reduce هست، با این تابع می تونیم هر گونه تغییری که دلمون می خواد تو لیستمون ایجاد کنیم.reduce یک تابع و یک مقدار اولیه برای شروع رو دریافت میکنه
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
چند مثال با reduce
ضرب کردن اعضای آرایه:
const numbers = [2,3,4,5];
const product = numbers.reduce((acc) => acc * 2, 1);
console.log(product); // [4, 6, 8, 10]
پیدا کردن اعداد زوج:
const isEven = (x) => {
return x % 2 === 0;
}
const numbers = [12,324,213,4,2,3,45,4234];
const callback = (acc, x) => {
if (isEven(x)){
acc.push(x)
}
return acc
}
const evenNumbers = numbers.reduce(callback, []);
console.log(evenNumbers); //[12, 324, 4, 2, 4234]
پیاده سازی map با raduce:
function map(arr, callback){
return arr.reduce((acc, x) => {
acc.push(callback(x));
return acc;
}, []);
}
// squaring example
const squares = map([1,2,3,4,5], (x) => Math.pow(x,2) );
console.log(squares); // [1, 4, 9, 16, 25]
مطلبی دیگر از این انتشارات
CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset
مطلبی دیگر از این انتشارات
یادگیری جاوا اسکریپت: یازده منبع آنلاین برای هر سطح تخصص
مطلبی دیگر از این انتشارات
جوری کد بنویس که بشه خوند...!