שאלה שקיבלתי מתלמידה השבוע ועונה כאן שגם אתם תרוויחו. בהינתן רשימה של אוביקטים שלכל אחד מהם מבנה שונה, איך אפשר לחפש רק אוביקטים שמכילים ערך ידוע בשדה פנימי?

1. המחשת הבעיה בקוד

קחו את רשימת האוביקטים הבאה:

const data = [
  {name:'image1', style:{height:30,Width:30}},
  {name:'image2'},
  {name:'image3', style:{height:30,Width:30}},
  {name:'image1', style:{height:20,Width:30}},
  {name:'image1'},
];

וכתבו קוד שמוציא ממנה רק את התמונות ששמן image1 ושהגובה שלהן הוא 20.

ניסיון ראשון שלא עובד יכול להיראות כך:

console.log(data.filter(
  (img) => (
    img.name === 'image1' && 
    img.style.height === 20));

זה נכשל בגלל שלא לכל האוביקטים יש שדה style ולכן הודעת השגיאה:

TypeError: Cannot read property 'height' of undefined

2. מה כן עובד

פונקציה קטנה שמאוד עוזרת במקרים כאלה נקראת במקומות אחרים dig. ב JavaScript עדיין אין אותה כחלק מהשפה, אבל כן הרבה אנשים מדברים על הצורך (רק חפשו בגוגל JavaScript Null Propagation ותגיעו לדיונים מרתקים). בכל מקרה ועד שתגיע הנה מימוש פשוט ואיתו הפתרון:

function dig(target, ...keys) {
  let digged = target;
  for (const key of keys) {
    digged = digged[key];
    if (typeof digged === 'undefined') {
      return undefined;
    }
  };
  return digged;
}

console.log(data.filter(
  (img) => img.name === 'image1' &&
           dig(img, 'style', 'height') === 20));