שיטות מערכים מתקדמות בג'אווהסקריפט

מתחילים לומדים לעבוד עם מערכים באמצעות לולאת for, וזה עובד מצוין. אבל ברגע שמסתכלים על קוד ריאקט אמיתי, או על כל קוד JavaScript מודרני, לולאות for כמעט נעלמות, ובמקומן מופיעות שרשראות של map, filter ו-reduce. אלה לא "תחביר מפואר" בלי סיבה - הן פותרות בעיות אמיתיות בקריאות ובבטיחות של הקוד.

map - יצירת מערך חדש מכל איבר

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

const prices = [100, 250, 80];
const withTax = prices.map((price) => price * 1.17);
// [117, 292.5, 93.6]

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

filter - השארת איברים מסוימים בלבד

filter בודק כל איבר עם פונקציה שמחזירה true או false, ומחזיר מערך חדש עם רק האיברים שעברו את הבדיקה.

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter((n) => n % 2 === 0);
// [2, 4, 6]

reduce - הכלי הכי חזק והכי מבלבל

reduce הוא השיטה הגמישה ביותר - היא "מצמצמת" מערך שלם לערך יחיד, שיכול להיות מספר, אובייקט, או אפילו מערך אחר. היא מקבלת פונקציה שרצה על כל איבר עם "צובר" (accumulator) שנבנה לאורך הדרך.

const cart = [{ price: 50 }, { price: 30 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 100

הפרמטר האחרון (0 בדוגמה) הוא הערך ההתחלתי של הצובר. בכל איטרציה, sum מקבל את הערך שהוחזר באיטרציה הקודמת. reduce יכול להחליף כמעט כל לולאה, אבל זה לא אומר שכדאי - כשקוד עם reduce נהיה מסובך מדי לקריאה, לפעמים לולאת for פשוטה עדיפה מבחינת תחזוקה.

find ו-findIndex - חיפוש איבר בודד

בניגוד ל-filter שמחזיר מערך, find מחזיר את האיבר הראשון שעונה על תנאי, או undefined אם לא נמצא כלום.

const users = [{ id: 1, name: "דנה" }, { id: 2, name: "יוסי" }];
const user = users.find((u) => u.id === 2);
// { id: 2, name: "יוסי" }

some ו-every - בדיקות בוליאניות על כל המערך

some בודק אם לפחות איבר אחד עונה על תנאי, every בודק אם כל האיברים עונים עליו. שניהם מחזירים true או false.

const scores = [85, 92, 78, 95];
scores.some((s) => s < 60); // false - אין ציון נכשל
scores.every((s) => s >= 70); // true - כולם מעל 70

sort - מיון, עם מלכודת שכולם נופלים בה

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

[10, 1, 21, 2].sort();
// [1, 10, 2, 21] - סדר לפי מחרוזת, לא לפי ערך מספרי

הפתרון - תמיד לספק פונקציית השוואה כשממיינים מספרים:

[10, 1, 21, 2].sort((a, b) => a - b);
// [1, 2, 10, 21]

שרשור שיטות - החוזק האמיתי

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

const total = orders
  .filter((order) => order.status === "completed")
  .map((order) => order.amount)
  .reduce((sum, amount) => sum + amount, 0);

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

למה זה חשוב במיוחד לריאקט

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

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

לסיכום

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

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

הצטרפו לקהילה בדיסקורד