Higher-Order Functions ב-JavaScript: map, filter, reduce ו-Callbacks

פונקציות הן ערכים

ב-JavaScript, פונקציה היא ערך כמו כל ערך אחר. אפשר לשמור אותה במשתנה, להכניס אותה למערך, להעביר אותה לפונקציה אחרת או להחזיר אותה מפונקציה. העובדה הזאת לבדה פותחת סגנון תכנות שלם:

const square = (n) => n * n;
const operations = [square, (n) => n + 1];

console.log(square);          // the function itself
console.log(operations[0](5)); // call it out of the array

ברגע שנוח לכם להתייחס לפונקציות כאל ערכים, פונקציות מסדר גבוה מפסיקות להרגיש מסתוריות. Higher-order function היא פשוט פונקציה שמקבלת פונקציה כארגומנט, מחזירה פונקציה, או את שניהם. זו כל ההגדרה.

קבלת פונקציה כארגומנט

הצורה הנפוצה ביותר: פונקציה שמקבלת callback ומריצה אותו בשבילכם. כבר השתמשתם בכאלה בלי לחשוב על זה.

[1, 2, 3].forEach((n) => console.log(n * 10));

setTimeout(() => console.log("אחר כך"), 100);

forEach היא מסדר גבוה: היא מקבלת את הפונקציה שלכם וקוראת לה פעם אחת לכל איבר. setTimeout היא מסדר גבוה: היא מקבלת את הפונקציה שלכם וקוראת לה אחרי השהיה. אתם מתמקדים ב_מה_ לעשות, והן מטפלות ב_מתי_ וב_כמה פעמים_.

כתיבה של פונקציה כזאת בעצמכם נראית אותו דבר. הנה פונקציה קטנה שמריצה callback רק אם תנאי מתקיים:

function runIf(condition, action) {
    if (condition) action();
}

runIf(2 + 2 === 4, () => console.log("החשבון עדיין עובד"));
runIf(false, () => console.log("לעולם לא רץ"));

action הוא פרמטר שבמקרה מחזיק פונקציה. קריאה לו עם action() מריצה את מה שהועבר.

שלוש שבאמת תשתמשו בהן: map, filter, reduce

למערכים יש מתודות מסדר גבוה שמחליפות את רוב לולאות ה-for שהייתם כותבים אחרת. למדו את שלוש אלה, וכמות עצומה של קוד יומיומי תהיה קצרה וברורה יותר.

map: שינוי של כל איבר

const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.08);

console.log(withTax);

map קוראת לפונקציה שלכם פעם אחת לכל איבר ואוספת את ערכי ההחזרה למערך חדש. אותו אורך, תוכן אחרי שינוי. המערך המקורי לא משתנה.

filter: שמירה של מה שמתאים

const users = [
    { name: "Ada", active: true },
    { name: "Boris", active: false },
    { name: "Chen", active: true },
];

const active = users.filter((user) => user.active);
console.log(active);

filter שומרת את האיברים שעבורם ה-callback מחזיר ערך truthy ומשליכה את השאר. ערך ההחזרה הוא מערך חדש, אולי קצר יותר.

reduce: קיפול המערך לערך אחד

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

reduce היא הכללית מכולן. ה-callback מקבל את הצובר (accumulator) הנוכחי ואת האיבר הנוכחי, ומה שתחזירו הופך לצובר הבא. הארגומנט השני (0 כאן) הוא ערך ההתחלה.

אפשר לשרשר אותן. כאן הסגנון הזה משתלם באמת:

const orders = [
    { item: "book", price: 12, paid: true },
    { item: "pen", price: 3, paid: false },
    { item: "mug", price: 8, paid: true },
];

const revenue = orders
    .filter((o) => o.paid)
    .map((o) => o.price)
    .reduce((sum, p) => sum + p, 0);

console.log(revenue);

קראו את זה מלמעלה למטה: שומרים הזמנות ששולמו, שולפים את המחיר, סוכמים. בלי לולאה, בלי מונה שמשתנה, בלי טעויות של אחד מעבר לגבול.

החזרת פונקציה מפונקציה

החצי השני של מסדר גבוה: פונקציה שבונה ומחזירה פונקציה אחרת:

function multiplyBy(factor) {
    return (n) => n * factor;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));
console.log(triple(5));

multiplyBy(2) רצה פעם אחת ומחזירה פונקציה חדשה לגמרי. הפונקציה החדשה עדיין זוכרת את factor: זה closure, ויש לו עמוד משלו בהמשך. בינתיים, המסקנה: קריאה ל-multiplyBy עם ארגומנטים שונים נותנת פונקציות ייעודיות שונות שנבנו מאותה תבנית.

התבנית הזאת מופיעה בכל מקום:

function prefixer(prefix) {
    return (message) => `[${prefix}] ${message}`;
}

const warn = prefixer("WARN");
const info = prefixer("INFO");

console.log(warn("disk almost full"));
console.log(info("backup complete"));

הגדרה אחת, שתי פונקציות לשימוש חוזר. עדיף בהרבה על כתיבת warn ו-info ידנית ושמירה על סנכרון ביניהן.

פונקציות עם שם מול callbacks בשורה

אפשר להעביר arrow function בתוך השורה, או להעביר פונקציה לפי השם שלה. שתי הדרכים עובדות, בחרו את מה שנקרא טוב יותר:

const nums = [1, 2, 3, 4, 5];

// Inline: good when the logic is short and used once.
const doubled = nums.map((n) => n * 2);

// By name: good when the logic has a meaningful name or is reused.
const isEven = (n) => n % 2 === 0;
const evens = nums.filter(isEven);

console.log(doubled, evens);

כשמעבירים את isEven (בלי סוגריים), מוסרים את הפונקציה עצמה. הוספת () הייתה קוראת לה מיד ומעבירה את ה_תוצאה_, טעות נפוצה אצל מתחילים:

nums.filter(isEven);     // correct: passes the function
nums.filter(isEven());   // wrong: calls isEven with no args, passes the result

אם ה-callback מתחיל להתפרס על יותר מכמה שורות, הוציאו אותו החוצה ותנו לו שם. הקוד שמסביב בדרך כלל נקרא טוב יותר בזכות זה.

דוגמה מלאה

פונקציות מסדר גבוה זוהרות כשמרכיבים חלקים קטנים. נניח שיש לכם רשימת מוצרים ואתם רוצים את השמות של הפריטים הזולים שנמצאים במלאי, באותיות גדולות:

const products = [
    { name: "notebook", price: 4, stock: 12 },
    { name: "laptop", price: 900, stock: 0 },
    { name: "pen", price: 1, stock: 50 },
    { name: "desk", price: 200, stock: 3 },
];

const affordable = (p) => p.price < 50;
const inStock = (p) => p.stock > 0;

const result = products
    .filter(affordable)
    .filter(inStock)
    .map((p) => p.name.toUpperCase());

console.log(result);

לכל פונקציית עזר יש תפקיד אחד. כל מתודת מערך מבצעת שינוי אחד. ה-pipeline נקרא כמו מפרט של מה שאתם רוצים, לא כמו תיאור של איך לעבור בלולאה.

מתי לא להשתמש בהן

מתודות מסדר גבוה מצוינות, אבל הן לא תחליף ללולאה בכל מצב:

• אם צריך לעצור באמצע, for או for...of עם break ברורים יותר מניסיון לצאת מ-forEach.
• אם אתם עושים משהו אסינכרוני בתוך ה-callback, map ו-forEach לא יחכו לו. השתמשו ב-for...of עם await, או ב-Promise.all עם map.
• אם ה-callback משנה state משותף, אתם מתרחקים מהחוזקות של הסגנון הזה. השתמשו בלולאה רגילה או שכתבו את הקוד כך שיחזיר ערכים חדשים.

במקומות שמתאימים, map, filter ו-reduce חותכות את רוב קוד הלולאות החוזר מהקוד היומיומי. בכל מקום, הן מתחילות לפגוע בקריאות. בחרו את הכלי שהופך את הכוונה לברורה ביותר.

הבא בתור: אובייקטים

פונקציות הן לא הערכים היחידים ששווה לבנות עליהם. אובייקטים הם סוס העבודה של JavaScript לקיבוץ נתונים והתנהגות קשורים, ובהם היו מלאים רוב המערכים שסיננתם ומיפיתם כאן. זה העמוד הבא.