Destructuring ב-JavaScript: אובייקטים, מערכים, ברירות מחדל ו-rest

Destructuring הוא התאמת תבניות לפי צורה

Destructuring מאפשר לכתוב תבנית שמשקפת את הצורה של אובייקט או מערך, ובסגנון של Python לשלוף ערכים לפי שם או לפי מיקום בשורה אחת. במקום לגשת לערך מאפיין אחרי מאפיין, מתארים מה רוצים ו-JavaScript מגיש את זה.

שני הסוגים:

const user = { name: "Ada", age: 36 };
const { name, age } = user;
console.log(name, age);

const scores = [90, 85, 72];
const [first, second, third] = scores;
console.log(first, second, third);

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

לפני שהיה destructuring, אותו קוד נראה כך:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

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

Destructuring של אובייקטים משתמש בשמות מאפיינים

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

const book = {
    title: "The Pragmatic Programmer",
    author: "Hunt & Thomas",
    year: 1999,
};

const { year, title } = book;
console.log(title, year);

אם מאפיין לא קיים באובייקט, המשתנה יהיה undefined, בלי שגיאה:

const book = { title: "Refactoring" };
const { title, author } = book;
console.log(title);
console.log(author);

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

שינוי שמות של משתנים

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

const response = { id: 42, msg: "ok" };
const { id: userId, msg: message } = response;

console.log(userId, message);

קראו את זה כ"קח את המאפיין id וקרא לו userId". שם המאפיין בא קודם, ושם המשתנה החדש אחרי הנקודתיים. זה נראה כמו הגדרת טיפוס משפות אחרות, אבל זה לא.

ערכי ברירת מחדל

אם מאפיין עשוי לחסור, תנו לו ברירת מחדל ישר בתוך התבנית:

function connect(options) {
    const { host = "localhost", port = 5432, timeout = 5000 } = options;
    console.log(`connecting to ${host}:${port} (timeout ${timeout}ms)`);
}

connect({ host: "db.example.com" });
connect({});

ברירות מחדל נכנסות לפעולה רק כשהערך הוא undefined. null, 0 ו-"" עוברים כולם בלי שינוי:

const { retries = 3 } = { retries: null };
console.log(retries);

זה תופס הרבה אנשים. אם רוצים ש-null יפעיל גם הוא את ברירת המחדל, צריך בדיקה מפורשת, או להשתמש באופרטור nullish coalescing ?? אחרי ה-destructuring.

אפשר לשלב ברירות מחדל עם שינוי שם:

const { host: hostname = "localhost" } = {};
console.log(hostname);

Destructuring של מערכים משתמש במיקום

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

const coords = [40.7, -74.0, 10];
const [lat, lon] = coords;
console.log(lat, lon);

const [, , altitude] = coords;
console.log(altitude);

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

Destructuring של מערכים זוהר במיוחד עם פונקציות שמחזירות tuples:

function minMax(nums) {
    return [Math.min(...nums), Math.max(...nums)];
}

const [low, high] = minMax([5, 2, 9, 1, 7]);
console.log(low, high);

אותה תבנית מופיעה בכל מקום ב-hooks של React: const [count, setCount] = useState(0).

תבניות rest: איסוף השאריות

בתוך תבנית destructuring, ...name אוסף את כל מה שלא הותאם לפי שם או מיקום לתוך משתנה חדש.

במערכים, rest תופס את הזנב:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);
console.log(tail);

באובייקטים, rest תופס כל מאפיין שלא נקרא בשמו במפורש:

const user = { id: 1, name: "Ada", email: "ada@example.com", role: "admin" };
const { id, ...rest } = user;

console.log(id);
console.log(rest);

זו הדרך המקובלת להסיר שדה אחד מאובייקט בלי לשנות אותו: rest הוא אובייקט חדש שמכיל הכל חוץ מ-id.

Rest חייב להיות האיבר האחרון בתבנית. const [...init, last] היא שגיאת תחביר.

Destructuring מקונן

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

const response = {
    status: 200,
    data: {
        user: { name: "Ada", age: 36 },
        tags: ["admin", "beta"],
    },
};

const {
    status,
    data: {
        user: { name },
        tags: [primaryTag],
    },
} = response;

console.log(status, name, primaryTag);

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

מלכודת אחת: data: { user } בתבנית לא יוצר משתנה בשם data. זו הוראה שאומרת "רד לתוך data והמשך לפרק". אם אתם צריכים את data עצמו, הוסיפו אותו בנפרד:

const response = { data: { user: { name: "Ada" } } };
const { data, data: { user } } = response;
console.log(data);
console.log(user);

Destructuring של פרמטרים של פונקציה

המקום הנפוץ ביותר שבו תשתמשו ב-destructuring הוא רשימת הפרמטרים של פונקציה. הוא הופך "העבר אובייקט אפשרויות" לחתימה שמתעדת את עצמה:

function createUser({ name, email, role = "member", active = true }) {
    console.log({ name, email, role, active });
}

createUser({ name: "Ada", email: "ada@example.com" });
createUser({ name: "Boris", email: "b@example.com", role: "admin" });

בצד הקורא, זה נראה כמו כל קריאה עם אובייקט אפשרויות. בתוך הפונקציה מקבלים משתנים עם שמות וברירות מחדל, בלי עוד קוד תבניתי כמו options.name || "default".

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

function createUser({ name = "anon", role = "member" } = {}) {
    console.log(name, role);
}

createUser();

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

החלפה והשמה מחדש

Destructuring עובד גם עם משתנים שכבר הוצהרו, אבל צריך סוגריים עגולים סביב תבנית האובייקט (אחרת JavaScript קורא את ה-{ כתחילת בלוק):

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

let user = { name: "Ada" };
({ name: user.name } = { name: "Boris" });
console.log(user);

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

דוגמה מציאותית

שילוב של רוב מה שראינו: פונקציה שמעבדת תשובה מ-API:

function summarise({
    status,
    data: { items = [] } = {},
    meta: { total = 0 } = {},
} = {}) {
    const [firstItem, ...rest] = items;
    return {
        ok: status === 200,
        first: firstItem?.name ?? "none",
        remaining: rest.length,
        total,
    };
}

console.log(summarise({
    status: 200,
    data: { items: [{ name: "alpha" }, { name: "beta" }, { name: "gamma" }] },
    meta: { total: 3 },
}));

console.log(summarise());

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

הבא בתור: object spread

Destructuring שולף ערכים מתוך אובייקטים. Spread מכניס אותם פנימה: העתקה, מיזוג ודריסה. השניים הולכים יד ביד ב-JavaScript מודרני, ו-spread הוא הנושא הבא.