2.9 דסטרקצ׳רינג וספרד תרגול

תרגול דסטרקצ'רינג וספרד

---

תרגיל 1 - דסטרקצ'רינג בסיסי

בצעו את המשימות הבאות באמצעות דסטרקצ'רינג:

1. חלצו את שלושת הצבעים הראשונים מהמערך:

const colors = ["red", "green", "blue", "yellow", "purple"];
// extract red, green, blue using destructuring

1. חלצו רק את האלמנט השני והרביעי:

const numbers = [10, 20, 30, 40, 50];
// extract 20 and 40 only

1. חלצו name, age, ו-email מהאובייקט:

const user = { name: "Alice", age: 25, email: "alice@test.com", city: "Tel Aviv" };

1. חלצו את name ותנו ל-age ברירת מחדל של 18:

const partialUser = { name: "Bob" };

1. חלצו את name ושנו את השם של המשתנה ל-userName:

const profile = { name: "Charlie", role: "admin" };

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

let x = 100;
let y = 200;
// swap them

---

תרגיל 2 - דסטרקצ'רינג מקונן

חלצו ערכים מהאובייקטים הבאים באמצעות דסטרקצ'רינג:

1. חלצו את שם העיר ואת שם המדינה:

const company = {
  name: "TechCorp",
  address: {
    street: "Herzl 10",
    city: "Tel Aviv",
    country: "Israel"
  }
};

1. חלצו את שם המשתמש, את הציון הראשון, ואת שם העיר:

const student = {
  name: "Alice",
  grades: [95, 88, 72],
  info: {
    city: "Haifa",
    school: "Tech High"
  }
};

1. חלצו נתונים מתשובת API:

const response = {
  status: 200,
  data: {
    users: [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" }
    ],
    total: 2
  }
};
// extract: status, first user's name, and total

---

תרגיל 3 - Rest ו-Spread עם מערכים

1. השתמשו ב-rest כדי לקבל את האלמנט הראשון ואת כל השאר:

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
// get first and rest

1. אחדו שלושה מערכים למערך אחד באמצעות spread:

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

1. צרו העתק של מערך והוסיפו אלמנט בהתחלה ובסוף:

const original = [2, 3, 4];
// create: [1, 2, 3, 4, 5]

1. כתבו פונקציה removeAt(arr, index) שמחזירה מערך חדש בלי האלמנט באינדקס הנתון (בלי splice, עם spread ו-slice):

removeAt([1, 2, 3, 4, 5], 2); // [1, 2, 4, 5]

---

תרגיל 4 - Rest ו-Spread עם אובייקטים

1. צרו העתק של אובייקט עם מאפיין נוסף:

const person = { name: "Alice", age: 25 };
// create: { name: "Alice", age: 25, city: "Tel Aviv" }

1. השתמשו ב-rest כדי להסיר מאפיין מאובייקט (בלי delete):

const user = { name: "Alice", password: "secret", email: "alice@test.com" };
// create a new object without password

1. מזגו שני אובייקטים כש-user דורס את defaults:

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

1. כתבו פונקציה updateObject(obj, updates) שמחזירה אובייקט חדש עם העדכונים:

const person = { name: "Alice", age: 25, city: "Tel Aviv" };
updateObject(person, { age: 26, email: "alice@test.com" });
// { name: "Alice", age: 26, city: "Tel Aviv", email: "alice@test.com" }

---

תרגיל 5 - דסטרקצ'רינג בפונקציות

1. כתבו פונקציה getFullName({ firstName, lastName }) שמקבלת אובייקט ומחזירה שם מלא:

getFullName({ firstName: "Alice", lastName: "Smith" }); // "Alice Smith"

1. כתבו פונקציה calculateArea({ width, height, unit = "cm" }) שמחשבת שטח ומחזירה מחרוזת:

calculateArea({ width: 10, height: 5 });            // "50 cm^2"
calculateArea({ width: 3, height: 4, unit: "m" });  // "12 m^2"

1. כתבו פונקציה createUser({ name, age = 18, role = "user", ...rest }) שמחזירה אובייקט משתמש:

createUser({ name: "Alice", email: "alice@test.com", active: true });
// { name: "Alice", age: 18, role: "user", extra: { email: "alice@test.com", active: true } }

1. כתבו פונקציה printScores(name, ...scores) שמקבלת שם ומספר כלשהו של ציונים, ומדפיסה ממוצע:

printScores("Alice", 90, 85, 92, 88);
// "Alice's average: 88.75"

---

תרגיל 6 - Shallow vs Deep Copy

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

const original = {
  name: "Alice",
  scores: [90, 85, 92],
  address: { city: "Tel Aviv" }
};
// create shallow copy
// change scores[0] and address.city in the copy
// check: does it affect the original?

1. צרו העתקה עמוקה עם structuredClone ובדקו שהשינויים לא משפיעים על המקור.

2. צרו העתקה עמוקה עם JSON.parse(JSON.stringify(...)) ובדקו מה קורה כשיש:

3. פונקציה כמאפיין
4. ערך undefined
5. אובייקט Date

---

תרגיל 7 - דפוסים מעשיים

1. כתבו פונקציה mergeConfig(...configs) שמקבלת מספר כלשהו של אובייקטי קונפיגורציה ומחזירה אובייקט ממוזג (האחרון מנצח):

mergeConfig(
  { host: "localhost", port: 3000 },
  { port: 8080, debug: true },
  { debug: false, timeout: 5000 }
);
// { host: "localhost", port: 8080, debug: false, timeout: 5000 }

1. כתבו פונקציה pluck(arr, key) שמחלצת מאפיין מסוים ממערך של אובייקטים:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
pluck(users, "name"); // ["Alice", "Bob", "Charlie"]

1. כתבו פונקציה immutableUpdate(obj, path, value) שמעדכנת ערך בנתיב מקונן בצורה immutable:

const state = {
  user: {
    name: "Alice",
    address: { city: "Tel Aviv" }
  }
};

immutableUpdate(state, ["user", "address", "city"], "Haifa");
// returns new object:
// { user: { name: "Alice", address: { city: "Haifa" } } }
// original state is unchanged

---

תרגיל 8 - תרגיל מסכם

נתון מערך של נתוני עובדים:

const employees = [
  { id: 1, name: "Alice", department: "Engineering", salary: 15000, skills: ["JavaScript", "React"] },
  { id: 2, name: "Bob", department: "Design", salary: 12000, skills: ["Figma", "CSS"] },
  { id: 3, name: "Charlie", department: "Engineering", salary: 18000, skills: ["Python", "Node.js"] },
  { id: 4, name: "Diana", department: "Marketing", salary: 11000, skills: ["SEO", "Analytics"] },
  { id: 5, name: "Eve", department: "Engineering", salary: 16000, skills: ["JavaScript", "TypeScript"] }
];

השתמשו בדסטרקצ'רינג, spread, rest, ומתודות מערכים כדי:

1. חלצו את השם והמחלקה של העובד הראשון עם דסטרקצ'רינג
2. צרו מערך חדש שבו לכל עובד יש מאפיין bonus שווה ל-10% מהמשכורת (בלי לשנות את המקור)
3. צרו פונקציה getEngineerNames(employees) שמחזירה שמות של כל מהנדסי התוכנה (השתמשו בדסטרקצ'רינג ב-callback)
4. צרו פונקציה addSkill(employees, employeeId, newSkill) שמוסיפה מיומנות לעובד ומחזירה מערך חדש (immutable)
5. צרו פונקציה transferEmployee(employees, employeeId, newDepartment, salaryChange) שמעבירה עובד למחלקה אחרת עם שינוי משכורת - הכל בצורה immutable
6. צרו פונקציה getSummary(employees) שמחזירה סיכום: רשימה ייחודית של כל המיומנויות, ממוצע משכורות, ועובדים לפי מחלקה