תרגילי JavaScript כולל פתרונות

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

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

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

פתרון:

function findMax(arr) {
  return Math.max(...arr);
}

// בדיקה
const numbers = [10, 5, 20, 8, 15];
console.log(findMax(numbers)); // פלט: 20

הסבר קצר:

• השתמשנו בשיטת Math.max המובנית ב-JS.

• Spread Operator (...): מאפשר לנו "לפרוש" את איברי המערך כארגומנטים נפרדים לפונקציה.

• שיטה זו יעילה וקצרת קוד (Clean Code).

האתגר: צרו פונקציה הבודקת האם מספר מסוים הוא מספר ראשוני (מתחלק רק בעצמו וב-1).

הפתרון:

function isPrime(num) {
  if (num <= 1) return false;
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) return false;
  }
  return true;
}

// בדיקה
console.log(isPrime(7)); // פלט: true
console.log(isPrime(10)); // פלט: false

דגשים לביצוע:

• ייעול (Optimization): רצנו בלולאה רק עד השורש הריבועי של המספר (Math.sqrt) כדי לחסוך בזמן ריצה.

• תנאי עצירה: אם מצאנו מחלק אחד בדרך, הפונקציה מחזירה false מיד.

אתגר: כתבו פונקציה שמקבלת מחרוזת (String) ומחזירה אותה בסדר הפוך.

הפתרון:

function reverseString(str) {
  return str.split("").reverse().join("");
}

// בדיקה
console.log(reverseString("JavaScript")); // פלט: tpircSavaJ

שלבי העבודה:

1. split(""): הופך את המחרוזת למערך של תווים.

2. reverse(): הופך את סדר האיברים במערך.

3. join(""): מחבר את המערך בחזרה למחרוזת אחת.

האתגר: נתון מערך של אובייקטים המייצגים משתמשים. החזירו רק את המשתמשים שגילם מעל 18.

הפתרון:

const users = [
  { name: "Yossi", age: 15 },
  { name: "Dana", age: 22 },
  { name: "Guy", age: 30 }
];

const adults = users.filter(user => user.age > 18);

console.log(adults); 
// פלט: [{ name: "Dana", age: 22 }, { name: "Guy", age: 30 }]

למה להשתמש ב-Filter?

• פונקציית filter היא חלק משיטות ה-ES6 החדשות.

• היא אינה משנה את המערך המקורי אלא יוצרת מערך חדש (Immutability).

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

הפתרון:

function removeDuplicates(arr) {
  return [...new Set(arr)];
}

// בדיקה
const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(removeDuplicates(numbers)); // פלט: [1, 2, 3, 4, 5]

הסבר קצר:

• השתמשנו באובייקט Set, שהוא מבנה נתונים ב-JavaScript שאינו מאפשר כפילויות.

• המרנו את ה-Set חזרה למערך בעזרת ה-Spread Operator (...).

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

הפתרון:

function countChar(str, char) {
  return str.split(char).length - 1;
}

// בדיקה
console.log(countChar("hello world", "l")); // פלט: 3

דגשים לביצוע:

• שימוש ב-split לפי התו המבוקש מחלק את המחרוזת למערך.

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

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

הפתרון:

const shoppingCart = {
  apple: 10,
  banana: 5,
  orange: 8
};

const totalPrice = Object.values(shoppingCart).reduce((sum, price) => sum + price, 0);

console.log(totalPrice); // פלט: 23

שלבי העבודה:

1. Object.values: הופך את ערכי האובייקט (המחירים) למערך.

2. reduce: פונקציה מצמצמת שרצה על המערך וסוכמת את כל הערכים למשתנה אחד (sum).

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

הפתרון:

function getAcronym(str) {
  return str.split(" ").map(word => word[0].toUpperCase()).join("");
}

// בדיקה
console.log(getAcronym("object oriented programming")); // פלט: OOP

למה הפתרון הזה יעיל?

• split(" "): מפריד את המשפט למערך של מילים.

• map: משנה כל מילה לאות הראשונה שלה בלבד והופכת אותה ל-Uppercase.

• join(""): מחבר את האותיות למילה אחת קצרה.

סיכום והמלצות להמשך

תרגול יומיומי הוא המפתח להצלחה ב-Full Stack. ככל שתתנסו ביותר תרגילי JavaScript, כך יכולת פתרון הבעיות (Problem Solving) שלכם תשתפר.

רוצים לקחת את היכולות שלכם לשלב הבא? הצטרפו לקורס Full Stack Development ב-Real Time College ותלמדו איך לבנות אפליקציות מקצה לקצה עם הטכנולוגיות המתקדמות ביותר.

• קורס סייבר ואבטחת מידע
• קורס Real Time Embedded
• קורס דאטה סיינס
• קורס למידת מכונה AI
• קורס דאטה אנליסט
• קורס DEVOPS
• קורס IT
• קורס אוטומציה
• קורס Full Stack
• קורס בניית אתרים