מהי המשמעות של ... ב es6

שלום יינון,

בבקשה הסבר בפירוט את משמעות ה… בes6.

מבינה בערך אך לא ממש.
בתודה
אילנית

הי,
בטח - כתבתי כאן הסבר מקיף עם דוגמאות:

מוסיף כאן את הדברים שרלוונטים לריאקט:

אופרטור שלוש נקודות נקרא Spread Operator או אופרטור הפריסה. תפקידו לקחת אוביקט ו״לפרוס״ אותו לצורך בניית אוביקט אחר או שליחה לפונקציה.

חשבי על מצב שיש לנו שני אוביקטים:

const a = { foo: 10 };
const b = { bar: 20, buz: 30 };

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

const c = {};
for (k in a) { c[k] = a[k] }
for (k in b) { c[k] = b[k] }

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

אופרטור ה Spread לוקח גישה אחרת לתהליך כזה, גישה שמבוססת על Immutable Data. המחשבה שם שחיבור בין אוביקטים מובן יותר כשהוא כתוב כפקודה אחת דקלרטיבית (במקום רצף הוראות).

את אותה פעולת חיבור נכתוב עם Spread כך:

const c = { ...a, ...b };

והיתרון כאן שלא באמת חייבים את c יותר. כלומר יש לנו עכשיו דרך לכתוב ב JavaScript ״כל הערכים מ-a ומ-b יחד כאוביקט״ כפקודה בשפה.

בריאקט אנחנו נראה הרבה מאוד פעמים את ה Spread בתוך כתיב JSX:

<Item count={5} {...props} />

נניח שה props שלי כולל שני מפתחות: status ו color עם הערכים busy ו red בהתאמה, אז במעבר ל JavaScript זה יראה כך:

React.createElement(Item, { count: 5, status: 'busy', color: 'red' }, null);

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