Destructuring ב-JavaScript

Destructuring הוא תחביר ב-JavaScript המאפשר לנו "לחלץ" ערכים מאובייקטים וממערכים בצורה מהירה ופשוטה.

Destructuring הוא תחביר שנוסף לשפת JavaScript בתקן ES6.

התחביר לפני Destructuring

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

const colors = ["blue", "red", "yellow", "pink"];

נניח והיינו רוצים להכניס למשתנה בשם blueColor את הערך המתאים, כלומר את האיבר הראשון, נכתוב כך:

const blueColor = colors[0];

עובד, אבל אפשר אחרת 🙂

שימוש ב-Destructuring

באמצעות Destructuring ניתן פשוט לרשום כך:

const [blueColor] = colors;

אם נרצה לחלץ יותר מאיבר אחד, נכתוב כך:

const [blueColor, redColor] = colors;

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

const [blueColor,, yellowColor] = colors;

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

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

const [blueColor, redColor, ...rest] = colors;

כעת, rest מכיל בתוכו את 2 האיברים האחרונים, yellow ו-pink.

גם אובייקטים!

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

const person = {
  firstname: "John",
  lastname: "Doe",
  age: "38"
}

ללא Destructuring, אוכל לחלץ את השם הפרטי כך:

const firstname = person.firstname;

באמצעות Destructuring זה פשוט יותר:

const { firstname } = person;

כמובן שניתן "לחלץ" יותר מ-key אחד:

const { firstname, lastname } = person;

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

const { firstname: personFirstName } = person;

כעת, השם הפרטי יהיה במשתנה personFirstName ולא ב-firstname כמו קודם.
ייתכן וזה נראה לכם קצת מטעה ומיותר אבל במקרים מסויימים לא תהיה ברירה, למשל, אם ה-key באובייקט הוא מילה שמורה שלא נוכל להשתמש בה.

סיכום

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

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

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