דסטרקצ'רינג וספרד ב-JS מוסברים

אם פתחתם קוד ריאקט כלשהו, בטוח נתקלתם בתחביר כמו const { name, age } = user או [...items, newItem] ותהיתם מה בדיוק קורה שם. אלה שני מכניזמים בסיסיים בג'אווהסקריפט מודרני - דסטרקצ'רינג (destructuring) וספרד (spread) - וברגע שהם מתיישבים, קוד שנראה כמו קסם הופך לפשוט לגמרי.

דסטרקצ'רינג אובייקטים - שליפה בשורה אחת

הדרך הישנה לשלוף ערכים מתוך אובייקט היא לגשת לכל שדה בנפרד:

const user = { name: "מיכל", age: 28, city: "תל אביב" };

const name = user.name;
const age = user.age;

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

const { name, age } = user;
console.log(name); // מיכל
console.log(age); // 28

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

const { name: userName, country = "ישראל" } = user;
console.log(userName); // מיכל
console.log(country); // ישראל - כי לא קיים באובייקט

דסטרקצ'רינג מערכים - שליפה לפי מיקום

מערכים עובדים בצורה דומה, רק לפי סדר ולא לפי שם:

const colors = ["אדום", "ירוק", "כחול"];
const [first, second] = colors;
console.log(first); // אדום
console.log(second); // ירוק

אפשר לדלג על איברים עם פסיק ריק:

const [, , third] = colors;
console.log(third); // כחול

דסטרקצ'רינג בפרמטרים של פונקציה

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

function greet({ name, age }) {
  console.log(`שלום ${name}, גיל ${age}`);
}

greet({ name: "אורי", age: 30 });

בקומפוננטת ריאקט זה נראה בדיוק כך, כשמקבלים props:

function UserCard({ name, age }) {
  return <p>{name}, {age}</p>;
}

ספרד - פריסת ערכים החוצה

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

const nums1 = [1, 2, 3];
const nums2 = [...nums1, 4, 5];
console.log(nums2); // [1, 2, 3, 4, 5]

השימוש הכי חשוב לספרד הוא יצירת עותק חדש בלי לשנות את המקורי - עיקרון קריטי בריאקט, שם לא נכון לשנות state ישירות:

const settings = { theme: "dark", fontSize: 14 };
const newSettings = { ...settings, fontSize: 16 };
// settings לא השתנה, newSettings הוא עותק עם שינוי אחד

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

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

setUser((prevUser) => ({ ...prevUser, name: "שם חדש" }));

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

פרמטר rest - האח התאום של ספרד

כשמשתמשים ב-... בצד שמאל של דסטרקצ'רינג, זה נקרא rest, וזה אוסף את מה שנשאר:

const { name, ...rest } = user;
console.log(name); // מיכל
console.log(rest); // { age: 28, city: "תל אביב" }

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

המלכודת שכדאי לדעת

ספרד עושה עותק "שטוח" (shallow copy) בלבד - אם האובייקט מכיל אובייקט מקונן, השכבה הפנימית עדיין משותפת עם המקור:

const original = { info: { city: "חיפה" } };
const copy = { ...original };
copy.info.city = "אילת";
console.log(original.info.city); // אילת - השתנה גם במקור!

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

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

לסיכום

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

תקועים עם תחביר שנראה מוזר עם נקודות? תשאלו בדיסקורד ונפרק את זה יחד.

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