📌 JavaScript – Frontend Interview Questions & Answers

اسئله (JavaScript):

• 1️⃣ إيه الفرق بين null و undefined؟

  • null: قيمة انت اللي بتحطها عشان تقول إن المتغير فاضي عمدا
  • undefined: قيمة JavaScript بتحطها لو انت معرّفتش المتغير أو مااديتلوش قيمة.



✅ مثال عملي:





let a; // undefined let b = null; // null console.log(a, b); // undefined null

• 2️⃣ إزاي الـ Event Loop بيشتغل في الـ Browser؟ وليه مهم تفهمه؟

  الموضوع ببساطة إن JavaScript Single-Threaded يعني بتنفذ كود واحد بس في نفس الوقت لكن مع الـ Event Loop تقدر تنفذ حاجات Asynchronous زي setTimeout, fetch, والـ Promises بدون ما توقف باقي الكود.

  
  
  طيب ليه مهم تفهمه؟
  
  
  عشان متكتبش كود يسبب Blocking ويهنج الصفحة



✅ مثال عملي:





console.log("1"); setTimeout(() => console.log("2"), 0); console.log("3"); // النتيجة: 1 -> 3 -> 2 (لأن setTimeout بيتأجل للـ Event Loop)

• 3️⃣ إيه الفرق بين let, const, و var من ناحية الـ Scope والـ Hoisting؟

  • var: ال Scope بتاعها Function بس وبتطلع فوق في الـ Hoisting بس بدون قيمة.
  • let: ال Scope بتاعها Block وبتطلع فوق بس من غير ما تشتغل (Temporal Dead Zone).
  • const: ال زي let بس مينفعش تغير قيمتها بعد تعريفها.



✅ مثال عملي:





console.log(a); // undefined (Hoisted) var a = 5; console.log(b); // Error! (TDZ) let b = 10;

• 4️⃣ إيه الفرق بين == و === في JavaScript؟

  • == (Loose Equality): بيعمل Type Coercion (يعني بيحاول يحوّل القيم علشان يقارنها).
  • === (Strict Equality): بيقارن القيم والنوع بدون تحويل.



✅ مثال عملي:





console.log(5 == "5"); // true (لأن "5" بيتحول لـ Number) console.log(5 === "5"); // false (لأن الأنواع مختلفة)

• 5️⃣ إيه الفرق بين call, apply, و bind؟

  
  التلاتة بيستخدموا لتغيير Context (this)، بس الفرق في الطريقة:
  

  • call: بتاخد الـ this ثم Arguments عاديين.
  • apply: بتاخد الـ this ثم Arguments في Array.
  • bind: بيرجع Function جديدة فيها نفس الـ this اللي حددته.



✅ مثال عملي:





function sayHello(greeting) { console.log(`${greeting}, أنا ${this.name}`); } const person = { name: "مجدي" }; sayHello.call(person, "أهلا"); // أهلا، أنا مجدي sayHello.apply(person, ["مرحبًا"]); // مرحبًا، أنا مجدي const newFunc = sayHello.bind(person, "هاي"); newFunc(); // هاي، أنا مجدي

• 7️⃣ إيه الفرق بين Deep Copy و Shallow Copy؟ وإزاي تعمل كل واحدة في JavaScript؟

  • Shallow Copy: بينسخ العنصر بس مش القيم الداخلية لو كانت Objects.
  • Deep Copy: بينسخ كل حاجة حتى القيم الداخلية.



✅ مثال عملي: Shallow Copy





let obj = { name: "مجدي", details: { age: 25 } }; let copy = { ...obj }; copy.details.age = 30; console.log(obj.details.age); // 30 (لأن النسخ كان سطحي)



✅ مثال عملي: Deep Copy





let deepCopy = JSON.parse(JSON.stringify(obj)); deepCopy.details.age = 40; console.log(obj.details.age); // 30 (المتغير الأصلي متأثرش)

• 8️⃣ إيه الفرق بين Synchronous و Asynchronous؟ وإزاي JavaScript بتتعامل مع الـ Async Code؟

  • Synchronous: كل سطر بيتنفذ قبل اللي بعده.
  • Asynchronous: حاجات بتتنفذ في الخلفية زي setTimeout و fetch.



✅ مثال عملي:





console.log("Start"); setTimeout(() => console.log("Async Code"), 1000); console.log("End"); // النتيجة: Start -> End -> Async Code

• 9️⃣ إيه الفرق بين Promise و async/await؟ وإمتى تستخدم كل واحد؟

  • Promise: طريقة Asynchronous بتشتغل بـ .then() و .catch().
  • async/await: Syntax أسهل بيخلي الكود شكله Synchronous لكن هو Asynchronous.


// باستخدام Promise fetch("https://api.example.com") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); // باستخدام async/await async function getData() { try { let res = await fetch("https://api.example.com"); let data = await res.json(); console.log(data); } catch (err) { console.error(err); } } getData();

• 🔟 إزاي تكتب كود JavaScript Performant وما يسببش مشاكل في الـ Performance؟

  • استخدم const و let بدل var عشان تتجنب المشاكل.
  • استخدم Debounce و Throttle في الأحداث اللي بتحصل كتير زي scroll.
  • استخدم Lazy Loading في الصور والـ Components التقيلة.
  • قلل استخدام document.querySelectorAll واعتمد على Caching للـ DOM Elements.

• 1️⃣ 1️⃣ إيه هي الـ Event Delegation وليه بنستخدمها؟

  Event Delegation هي واحدة من الطرق القوية في JavaScript اللي بتخلينا نكتب كود أنظف وأكفأ لما بنتعامل مع الأحداث (Events) الفكرةببساطة إنك بدل ما تضيف Event Listener لكل عنصر في الصفحة بتضيفه لعنصر أب (Parent) ولما يحصل الحدث بتشوف هو جاي منين وتتصرف بناء عليه.



طب ليه نستخدمها؟



• لو عندك قائمة فيها 1000 عنصر وهتحط Event Listener لكل عنصر فده هيستهلك مزيد من الذاكرة وهيبطّأ الأداء.

  
  
  والحل؟
  
  
  بدل ما تحط 1000 Event Listener تحط واحد بس على عنصر الأب ولما يحصل الحدث تتأكد من العنصر المستهدف (target).

• في بعض الحالات العناصر بتتولد بعد تحميل الصفحة زي لو عندك قائمة مهام Todo والمستخدم بيضيف مهام جديدة بعد تشغيل الموقع. لو كنت بتضيف Event Listeners مباشرة لكل عنصر، فالعناصر الجديدة مش هتكون عندها أحداث مفعلة. لكن لو استخدمت Event Delegation الحدث هيوصل لأي عنصر جديد تلقائيا.
• كل Event Listener بياخد جزء من الذاكرة فلو عندك مئات أو آلاف العناصر الموضوع هيستهلك رامات أكتر وهيعمل Memory Leaks. لما تستخدم Event Delegation، بتوفر في استهلاك الذاكرة والـ DOM بيبقى أنضف وأكفأ.