Rest ו-Spread ב-JavaScript: האופרטור ... בהסבר פשוט

אותו תחביר, שתי עבודות

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

• Rest: ...name בצד המקבל אוסף כמה ערכים למערך או לאובייקט אחד.
• Spread: ...value בצד הנותן פורס מערך או אובייקט לחלקים הבודדים שלו.

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

פרמטרי Rest: איסוף ארגומנטים

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

function sum(...nums) {
  let total = 0;
  for (const n of nums) total += n;
  return total;
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40, 50));
console.log(sum());

nums הוא מערך רגיל. אפשר להפעיל עליו .map, .filter, לבדוק את .length שלו, להעביר אותו לפונקציה אחרת: כל מה שמערכים עושים.

אפשר לשלב פרמטרי rest עם פרמטרים רגילים, אבל פרמטר ה-rest חייב להיות אחרון:

function tag(label, ...items) {
  return items.map(item => `[${label}] ${item}`);
}

console.log(tag("todo", "buy milk", "call mom", "write docs"));

label בולע את הארגומנט הראשון; כל מה שאחריו נוחת ב-items. כתיבת פרמטר rest בכל מקום אחר חוץ מהסוף היא שגיאת תחביר.

Rest מול האובייקט הישן arguments

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

function oldStyle() {
  // arguments is array-like, not a real array
  return Array.prototype.slice.call(arguments).map(x => x * 2);
}

function newStyle(...args) {
  return args.map(x => x * 2);
}

console.log(oldStyle(1, 2, 3));
console.log(newStyle(1, 2, 3));

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

Spread בקריאות לפונקציות

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

function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

const parts = ["Hello", "Ada", "!"];
console.log(greet(...parts));

const nums = [5, 2, 9, 1, 7];
console.log(Math.max(...nums));

Math.max מקבלת מספרים בודדים, לא מערך. לפני spread הייתם כותבים Math.max.apply(null, nums). עכשיו זה ... וסיימתם.

שימו לב שאותו ... בדיוק הוא rest ב_הגדרת_ הפונקציה ו-spread ב_קריאה_ לפונקציה: המיקום אומר לכם מה הוא.

Spread בליטרלים של מערכים

פריסה לתוך ליטרל של מערך מעתיקה או משלבת מערכים:

const a = [1, 2, 3];
const b = [4, 5, 6];

const copy = [...a];
const joined = [...a, ...b];
const withExtra = [0, ...a, 99];

console.log(copy);
console.log(joined);
console.log(withExtra);

[...a] נותן מערך חדש עם אותם איברים, וזה שימושי כשרוצים למיין או לשנות בלי לגעת במקור:

const scores = [42, 17, 88, 3];
const sorted = [...scores].sort((x, y) => x - y);

console.log(sorted);
console.log(scores);

scores לא השתנה, כי .sort רצה על העותק. הרגל קטן, תמורה גדולה כשכותבים קוד שלא אמורות להיות לו תופעות לוואי מפתיעות.

Spread בליטרלים של אובייקטים

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

const user = { name: "Rosa", age: 30 };
const updates = { age: 31, city: "Lisbon" };

const merged = { ...user, ...updates };
console.log(merged);

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

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };

const settings = { ...defaults, ...userPrefs };
console.log(settings);

קודם ברירות המחדל, אחר כך הבחירות של המשתמש. המשתמש מנצח ב-fontSize ויורש את theme.

מלכודת העותק הרדוד

spread מעתיק לעומק של רמה אחת. אובייקטים ומערכים מקוננים עדיין משותפים בין המקור לעותק:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const copy = { ...original };

copy.tags.push("owner");

console.log(original.tags);
console.log(copy.tags);

שני המערכים מציגים את התגית החדשה, כי copy.tags ו-original.tags הם אותו מערך. spread לא שכפל את הרשימה המקוננת, הוא רק העתיק את ההפניה.

לעותק עמוק אמיתי של נתונים פשוטים, השתמשו ב-structuredClone:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const deep = structuredClone(original);

deep.tags.push("owner");

console.log(original.tags);
console.log(deep.tags);

עכשיו שני המערכים בלתי תלויים. structuredClone מובנה בדפדפנים מודרניים וב-Node, מטפל במבנים מקוננים, והוא הבחירה הנכונה בכל פעם שעותק "רדוד" לא מספיק.

Rest ב-Destructuring

rest עובד גם ב-destructuring, שם הוא אוסף את האיברים או המאפיינים שנשארו:

const [first, second, ...others] = [10, 20, 30, 40, 50];
console.log(first);
console.log(second);
console.log(others);

const { name, ...rest } = { name: "Rosa", age: 30, city: "Lisbon" };
console.log(name);
console.log(rest);

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

const user = { id: 1, name: "Rosa", password: "secret", email: "r@example.com" };
const { password, ...safe } = user;

console.log(safe);

password נשלף (ומתעלמים ממנו); safe מחזיק את כל השאר. בלי שינוי של המקור, בלי העתקה ידנית.

סיכום קצר

• ...name ברשימת פרמטרים או בתבנית destructuring הוא rest: הוא אוסף.
• ...value בקריאה לפונקציה, בליטרל של מערך או בליטרל של אובייקט הוא spread: הוא פורס.
• עותקים של spread הם רדודים. מבנים מקוננים נשארים משותפים. השתמשו ב-structuredClone לעותקים עמוקים.
• פרמטרי rest הם מערכים אמיתיים: השתמשו בהם במקום ב-arguments.
• בליטרלים של אובייקטים, פריסות מאוחרות דורסות מוקדמות, וכך בונים ברירות מחדל עם דריסות.

הבא בתור: Closures

פונקציות ב-JavaScript לא רק מקבלות קלט ומחזירות פלט: הן גם זוכרות את ה-scope שבו הוגדרו. הזיכרון הזה נקרא closure, והוא המנגנון שמאחורי callbacks, פונקציות מפעל (factories) ורוב הדפוסים שתפגשו בדף הבא.