פרק 18: Destructuring (פירוק) ב-JavaScript

1. מה זה Destructuring?

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

2. Destructuring של מערכים (Array Destructuring)

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

דוגמה בסיסית:

let fruits = ["Apple", "Banana", "Orange"];

// פירוק המערך למשתנים
let [first, second, third] = fruits;

console.log(first);  // מציג "Apple"
console.log(second); // מציג "Banana"
console.log(third);  // מציג "Orange"

הסבר:

• במקום לגשת למערך באמצעות אינדקסים כמו fruits[0], אנחנו מפרקים את המערך ישירות לשלושה משתנים: first, second, ו-third.

3. דילוג על ערכים במערך

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

דוגמה לדילוג על ערכים:

let numbers = [1, 2, 3, 4];

// דילוג על הערך השני
let [first, , third] = numbers;

console.log(first); // מציג 1
console.log(third); // מציג 3

הסבר:

• בדוגמה זו, דילגנו על הערך השני (2) במערך, כך שרק הערך הראשון והשלישי נשמרו במשתנים.

4. שימוש בערכי ברירת מחדל בפירוק

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

דוגמה לערכי ברירת מחדל:

let fruits = ["Apple"];

// הגדרת ערך ברירת מחדל ל-second
let [first, second = "Banana"] = fruits;

console.log(first);  // מציג "Apple"
console.log(second); // מציג "Banana" (ערך ברירת מחדל)

הסבר:

• מכיוון שהמערך מכיל רק פריט אחד, הפירוק של second ייקח את ערך ברירת המחדל "Banana".

5. Destructuring של אובייקטים (Object Destructuring)

פירוק של אובייקטים מאפשר לגשת ישירות למאפיינים שלהם ולשמור אותם במשתנים בקלות, לפי שמות המאפיינים.

דוגמה בסיסית:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

// פירוק האובייקט למשתנים
let { name, age, city } = person;

console.log(name);  // מציג "Alice"
console.log(age);   // מציג 30
console.log(city);  // מציג "New York"

הסבר:

• כאן פירקנו את האובייקט person למשתנים name, age, ו-city, במקום לגשת אליהם באופן מסורתי כמו person.name.

6. שינוי שמות משתנים בפירוק אובייקטים

ניתן לשנות את שמות המשתנים שמקבלים את הערכים מהאובייקט באמצעות שמות מותאמים אישית.

דוגמה לשינוי שם משתנים:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

// שינוי שמות המשתנים
let { name: fullName, age: years } = person;

console.log(fullName); // מציג "Alice"
console.log(years);    // מציג 30

הסבר:

• במקום לשמור את הערכים מהאובייקט במשתנים בשם name ו-age, השתמשנו בשמות מותאמים אישית (fullName ו-years).

7. ערכי ברירת מחדל בפירוק אובייקטים

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

דוגמה לערכי ברירת מחדל:

let person = {
    name: "Bob",
    age: 25
};

// הגדרת ערך ברירת מחדל ל-city
let { name, city = "Unknown" } = person;

console.log(name);  // מציג "Bob"
console.log(city);  // מציג "Unknown" (כי אין מאפיין בשם city באובייקט)

הסבר:

• מכיוון שאין באובייקט person מאפיין בשם city, המשתנה city מקבל את ערך ברירת המחדל "Unknown".

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

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

דוגמה עם אובייקט כפרמטר:

function displayPerson({ name, age }) {
    console.log(name + " is " + age + " years old.");
}

let person = { name: "Alice", age: 30 };
displayPerson(person); // מציג "Alice is 30 years old."

הסבר:

• כאן הפונקציה displayPerson מקבלת אובייקט כפרמטר ומפרקת אותו ישירות למשתנים name ו-age כדי להשתמש בהם בפנים.

9. דוגמה מלאה: פירוק מערכים ואובייקטים

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

// מערך של פירות
let fruits = ["Apple", "Banana", "Orange"];

// פירוק המערך
let [firstFruit, secondFruit] = fruits;
console.log("First fruit:", firstFruit);   // מציג "First fruit: Apple"
console.log("Second fruit:", secondFruit); // מציג "Second fruit: Banana"

// אובייקט של עובד
let employee = {
    name: "John",
    position: "Developer",
    salary: 50000
};

// פונקציה שמפרקת את האובייקט בפרמטרים
function displayEmployee({ name, position, salary }) {
    console.log(`${name} is a ${position} earning $${salary} per year.`);
}

displayEmployee(employee); // מציג "John is a Developer earning $50000 per year."

הסבר:

• פירקנו את המערך fruits למשתנים firstFruit ו-secondFruit.
• הפונקציה displayEmployee מקבלת אובייקט employee ומפרקת אותו ישירות למשתנים name, position, ו-salary כדי להציג את פרטי העובד.

סיכום

בפרק זה למדנו על:

1. Array Destructuring: איך לפרק ערכים מתוך מערכים ולהכניסם ישירות למשתנים.
2. Object Destructuring: איך לפרק מאפיינים מתוך אובייקטים לשמות משתנים מותאמים אישית.
3. שימוש ב-ערכי ברירת מחדל כאשר הערכים אינם קיימים.
4. איך להשתמש ב-Destructuring בפרמטרים של פונקציה כדי לקבל ערכים ממערכים ואובייקטים בצורה פשוטה וישירה.

בפרק הבא נעמיק בנושא Data Structures ונלמד על מבני נתונים שונים ב-JavaScript כמו Map, Set, ועוד.