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

לימודי JavaScript - Java

עודכן לאחרונה: 17 אוגוסט, 2026

rt-projects

תרגילים ופתרונות בשפת Javascript כהכנה לראיונות עבודה

בעולם הפיתוח הדיגיטלי והמבוקש של ימינו, JavaScript (JS) אינה עוד שפת תכנות מן המניין – היא המנוע הבלתי מעורער המניע את חוויית המשתמש ברשת האינטרנט.
החל מתגובות מידיות ללחיצות כפתור, דרך טעינת נתונים בזמן אמת ללא רענון העמוד, ועד ליישום אלגוריתמים מורכבים בצד השרת באמצעות Node.js, JavaScript הפכה ללב הפועם של עולם הפולסטאק (Full Stack).

עם זאת, קיים פער עצום בין הבנה תיאורטית של סינטקס השפה לבין היכולת לכתוב קוד נקי, יעיל, מאובטח ונטול באגים בפרויקטים אמיתיים.
מפתחים רבים בתחילת דרכם – וגם מפתחים מנוסים הרגילים לשפות אחרות – מוצאים את עצמם נאבקים מול התנהגויות ייחודיות של השפה, כגון asynchronous execution (אסינכרוניות), scope (טווח משתנים), closures, וניהול ה-Document Object Model (DOM).

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

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

 

תרגיל 1: שרשור אסינכרוני עם async/await

התרגיל: כתוב פונקציה אסינכרונית בשם fetchUserData המקבלת מזהה משתמש (userId). הפונקציה צריכה לפנות ל-API בכתובת [https://jsonplaceholder.typicode.com/users/](https://jsonplaceholder.typicode.com/users/){userId}, להחזיר אובייקט שמכיל רק את השדות name, email ו-city (מתוך אובייקט ה-address), ולטפל בשגיאות במקרה של כישלון.

פתרון:

JavaScript

 
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`שגיאה בטעינת הנתונים: ${response.status}`);
    }
    
    const data = await response.json();
    
    return {
      name: data.name,
      email: data.email,
      city: data.address.city
    };
  } catch (error) {
    console.error("אירעה שגיאה:", error.message);
    return null;
  }
}

// דוגמת שימוש:
fetchUserData(1).then(user => console.log(user));

תרגיל 2: מימוש Memos / Cache באמצעות Closure

התרגיל: כתוב פונקציה createSquareCalculator המחזירה פונקציה חדשה המחשבת ריבוע של מספר (x * x). הפונקציה המוחזרת צריכה לשמור בזכרון (Cache) תוצאות של חישובים קודמים, כך שאם קוראים לה עם אותו מספר פעם נוספת, היא תחזיר את התוצאה מהזיכרון ללא חישוב מחדש.

פתרון:

JavaScript

 
function createSquareCalculator() {
  const cache = {}; // משתנה שנשמר בזכות ה-Closure

  return function(x) {
    if (x in cache) {
      console.log(`החזרת תוצאה מהזיכרון עבור ${x}`);
      return cache[x];
    }
    
    console.log(`מחשב תוצאה חדשה עבור ${x}...`);
    const result = x * x;
    cache[x] = result;
    return result;
  };
}

// דוגמת שימוש:
const calcSquare = createSquareCalculator();
console.log(calcSquare(4)); // מחשב תוצאה חדשה עבור 4... -> 16
console.log(calcSquare(4)); // החזרת תוצאה מהזיכרון עבור 4 -> 16

תרגיל 3: עיבוד מערכים מורכב (map, filter, reduce)

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

  1. מסנן רק את המוצרים שנמצאים במלאי (inStock: true).

  2. מחשב את המחיר הכולל של כל המוצרים במלאי (מחיר × כמות).

JavaScript

 
const cart = [
  { name: 'Laptop', price: 3000, quantity: 1, inStock: true },
  { name: 'Mouse', price: 100, quantity: 2, inStock: true },
  { name: 'Keyboard', price: 200, quantity: 1, inStock: false },
  { name: 'Monitor', price: 1200, quantity: 2, inStock: true }
];

פתרון:

JavaScript

 
const totalPrice = cart
  .filter(item => item.inStock) // סינון מוצרים במלאי
  .reduce((sum, item) => sum + (item.price * item.quantity), 0); // חישוב הסכום הכולל

console.log(`הסכום הכולל של המוצרים במלאי: ₪${totalPrice}`);
// פלט: הסכום הכולל של המוצרים במלאי: ₪5600

תרגיל 4: סינון כפילויות ממערך (ES6 Sets)

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

פתרון:

JavaScript

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

// דוגמת שימוש:
const numbers = [1, 2, 2, 3, 4, 4, 4, 5];
console.log(removeDuplicates(numbers)); // [1, 2, 3, 4, 5]

שאלות ותשובות (FAQ)

 

מהו Hoisting ב-JavaScript וכיצד הוא משפיע על var לעומת let ו-const?

Hoisting (הנפה) הוא מנגנון ב-JavaScript שבו הצהרות על משתנים ופונקציות מועלות לראש ההיקף (Scope) שלהן בזמן הקימפול/הפרשנות.

  • var: מונף ומאותחל בערך undefined. לכן, אם נשתמש במשתנה לפני ההצהרה עליו, לא תקפץ שגיאה אלא נתרצה לקבל undefined.

  • let ו-const: מונפים גם הם, אך אינם מאותחלים. שימוש בהם לפני שורת ההצהרה יגרום לשגיאת ייחוס (ReferenceError). התקופה שבין תחילת ה-Scope ועד ההצהרה נקראת Temporal Dead Zone (TDZ).

מהו Event Loop ואיך JavaScript מטפלת בפעולות אסינכרוניות?

JavaScript היא שפה בעלת שרשור ריצה יחיד (Single-threaded). כדי לטפל בפעולות אסינכרוניות (כמו בקשות רשת עם fetch או טיימרים כמו setTimeout), השפה משתמשת ב-Event Loop:

  1. הקוד המסונכרן מבוצע ב-Call Stack.

  2. פעולות אסינכרוניות מועברות לסביבה (כגון Web APIs בדפדפן).

  3. כשהפעולה האסינכרונית מסתיימת, ה-Callback שלה נכנס ל-Callback Queue (לפעולות רגילות) או ל-Microtask Queue (ל-Promises ו-async/await).

  4. ה-Event Loop בודק ברציפות: ברגע שה-Call Stack ריק, הוא מעביר אליו לביצוע תהליכים מתוך ה-Microtask Queue ראשית, ולאחר מכן מתוך ה-Callback Queue.

מה ההבדל בין השוואה רגילה (==) להשוואה מחמירה (===)?

  • == (Loose Equality): מבצע המרת טיפוסים אוטומטית (Type Coercion) לפני ההשוואה. לדוגמה: '5' == 5 יחזיר true.

  • === (Strict Equality): בודק גם שוויון בערך וגם שוויון בטיפוס הנתונים ללא המרה. לדוגמה: '5' === 5 יחזיר false.

  • המלצה: מומלץ להשתמש תמיד ב-=== כדי למנוע באגים הנגרמים מהמרת טיפוסים לא צפויה.

מהם Promises וכיצד async/await משפר את עבודתן?

  • Promise: אובייקט המייצג תוצאה עתידית של פעולה אסינכרונית (יכול להיות במצב Pending, Fulfilled או Rejected).

  • async/await: תחביר מודרני (Syntactic Sugar) שנכנס ב-ES8 מעל Promises. הוא מאפשר לכתוב קוד אסינכרוני במראה סינכרוני, קריא ונקי יותר, ללא צורך בשרשור של .then() ו-.catch(), תוך שימוש במבנה try...catch לטיפול בשגיאות.

מהו Closure ב-JavaScript ומתי משתמשים בו?

Closure (סגור) זו פונקציה ששומרת גישה למשתנים מההיקף החיצוני (Outer Scope) שבו היא נוצרה, גם לאחר שפונקציית המעטפת החיצונית סיימה את ריצתה.

  • שימושים נפוצים:

    • יצירת משתנים פרטיים (Data Privacy / Encapsulation).

    • פונקציות המייצרות פונקציות אחרות (Function Factories / Currying).

    • שמירת מצב (State) בתוך Callback functions.

מה ההבדל בין Arrow Functions לפונקציות רגילות (function)?

  1. הקשר המשתנה this: בפונקציה רגילה הערך של this נקבע לפי אופן הקריאה לפונקציה. ב-Arrow Function אין this משלה – היא יורשת את ה-this מההיקף הלקסיקלי (Lexical Scope) שבו היא הוגדרה.

  2. אובייקט arguments: ל-Arrow Functions אין גישה לאובייקט ה-arguments המובנה.

  3. בנאי (Constructor): לא ניתן להשתמש ב-Arrow Functions כפונקציה בונה באמצעות המילה השמורה new.

 

מקורות לימוד מומלצים

  • קורסים: קורס JavaScript מבית Real Time College המעניק הבנה מעמיקה ביסודות השפה, ES5/ES6+, פיתוח אסינכרוני ועבודה מול DOM, לצד קורסים משלימים במסלול Full Stack כגון HTML5, CSS3, Node.JS, React ו-Angular.

  • בלוגים / מגזינים מקצועיים: מגזין Real Tech (Real Time College), MDN Web Docs, JavaScript Weekly, Dev.to (JavaScript section).

  • ספרים מומלצים: You Don't Know JS (של Kyle Simpson), Eloquent JavaScript (של Marijn Haverbeke).

תחומי לימוד הכי מבוקשים בהייטק בשנת 2026
הבא
תרגילים ופתרונות CSS
קרא עוד
הקודם
דוגמאות מתרגילים ב-Full Stack מתוך ראיונות עבודה
קרא עוד
© כל הזכויות שמורות Real Time Group