أهم أسئلة مقابلات JavaScript مع الأجوبة بالدارجة: من المبتدئ حتى المتقدم

مقدمة

عندك مقابلة ديال Frontend ولا Full-stack هاد الأيام وكتسول راسك شنو غادي يسولوك فـ JavaScript؟ ما تخافش. الحقيقة أن أغلب المقابلات التقنية كتدور على نفس المفاهيم: var/let/const، الـ Hoisting، الـ Closures، this، الـ Event Loop، الـ Promises… والفرق بين اللي كينجح واللي كيطيح ماشي ديما المستوى، ولكن الوضوح فالشرح.

فهاد المقال جمعنا ليك 28 سؤال من أكثر الأسئلة اللي كتطرح فمقابلات JavaScript، مقسمين على 3 مستويات (أساسي، متوسط، متقدم)، مع أجوبة بالدارجة وأمثلة كود قصيرة. وفي الأخير نصائح عملية باش تدوز المقابلة مزيان، سواء كنتي كتقدم لشركة فالمغرب ولا لخدمة Remote.

إلا كنتي مازال جديد فـ JavaScript، ننصحك تبدا بمقالنا على دور JavaScript فتطوير الويب قبل ما تكمل.

نظرة سريعة على الأسئلة

المستوى الأساسي

1. شنو الفرق بين var و let و const؟

• var: الـ Scope ديالها هو الـ Function (ماشي الـ Block)، كتقدر تعاود تعلنها، وكتدار ليها Hoisting مع قيمة undefined.
• let: الـ Scope ديالها هو الـ Block ({ })، ما تقدرش تعاود تعلنها فنفس الـ Scope، ولكن تقدر تبدل القيمة ديالها.
• const: بحال let، ولكن ما تقدرش تعاود تعطيها قيمة جديدة (Reassign).

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

const user = { name: "Amine" };
user.name = "Sara";   // خدام: const كتمنع الـ Reassign ماشي التعديل
user = {};            // TypeError: Assignment to constant variable.

النقطة اللي كيحبها المحاور: const ما كتخليش الـ Object “ثابت”، غير كتمنع تبدل المرجع (Reference). إلا بغيتي تجمد الـ Object استعمل Object.freeze().

2. شنو هو الـ Hoisting؟

الـ Hoisting هو أن JavaScript، قبل ما تنفذ الكود، كتسجل التصريحات (Declarations) ديال المتغيرات والدوال فالذاكرة. النتيجة كتبان بحال إلا التصريحات “طلعو” لفوق:

console.log(x); // undefined
var x = 5;

sayHi(); // "Salam!"
function sayHi() {
  console.log("Salam!");
}

sayBye(); // TypeError: sayBye is not a function
var sayBye = function () {
  console.log("Bslama");
};

• var x كتطلع بقيمة undefined، ولهذا ما كاينش خطأ.
• الـ Function Declaration كتطلع كاملة، ولهذا sayHi() خدامة قبل التعريف.
• الـ Function Expression المخزنة فـ var كتطلع غير المتغير (undefined)، ومنين كتعيط عليه كيطلع TypeError.

3. شنو هي الـ Temporal Dead Zone (TDZ)؟

let وconst (وحتى class) كيتدار ليهم Hoisting تاهوما، ولكن ما كيتعطاوش قيمة أولية. المسافة ما بين بداية الـ Block والسطر فين تعلن المتغير كتسمى TDZ، وأي محاولة باش توصل للمتغير فيها كتعطي خطأ:

console.log(score); // ReferenceError: Cannot access 'score' before initialization
let score = 10;

هاد السلوك مزيان حيت كيكشف ليك الأخطاء بكري بلاصة ما تخدم بـ undefined بلا ما تعرف.

4. شنو الفرق بين == و ===؟

• === (Strict equality): كتقارن القيمة والنوع بلا أي تحويل.
• == (Loose equality): كدير Type coercion (تحويل الأنواع) قبل المقارنة، وهادشي كيعطي نتائج غريبة.

0 == "0";            // true
0 == "";             // true
"0" == "";           // false
null == undefined;   // true
null === undefined;  // false
[] == false;         // true
NaN == NaN;          // false
Object.is(NaN, NaN); // true

الجواب المثالي: “ديما كنستعمل ===، إلا فحالة خاصة بحال value == null اللي كتشد null وundefined بجوج”.

5. شنو هوما أنواع البيانات فـ JavaScript؟

كاينين 7 أنواع Primitive: string، number، bigint، boolean، undefined، symbol، null. وكاين النوع الثامن: object (فيه الـ Arrays والـ Functions والـ Dates…).

typeof "Salam";      // "string"
typeof 42;           // "number"
typeof 10n;          // "bigint"
typeof Symbol("id"); // "symbol"
typeof undefined;    // "undefined"
typeof null;         // "object"  ← خطأ تاريخي فاللغة
typeof [];           // "object"
typeof function(){}; // "function"
Array.isArray([]);   // true

السؤال الفخ: “علاش typeof null كترجع "object"؟” الجواب: هادا Bug قديم من النسخ الأولى ديال اللغة، وبقا باش ما يتهرسوش المواقع القديمة.

6. شنو هي القيم Truthy و Falsy؟

ملي كتحط قيمة فشرط، JavaScript كتحولها لـ boolean. القيم Falsy هوما:

false, 0, -0, 0n, "", null, undefined, NaN

وأي قيمة أخرى كتعتبر Truthy، حتى "0" و"false" و[] و{}:

if ([]) console.log("Array خاوي ولكن Truthy"); // كيتطبع
if ("0") console.log("String فيه 0 ولكن Truthy"); // كيتطبع

7. شنو الفرق بين null و undefined؟

• undefined: المتغير تعلن ولكن ما تعطاتو حتى قيمة، ولا خاصية ماكايناش فـ Object، ولا دالة ما رجعات والو.
• null: قيمة كتحطها انت بالقصد باش تقول “ماكاين والو هنا”.

let a;
console.log(a);            // undefined
const user = { phone: null };
console.log(user.phone);   // null
console.log(user.email);   // undefined

8. اشرح map و filter و reduce

هادو تلاتة ديال الـ Methods كيخدمو على الـ Arrays وما كيبدلوش الـ Array الأصلي:

const cart = [
  { name: "Tshirt", price: 120, qty: 2 },
  { name: "Casquette", price: 80, qty: 1 },
  { name: "Sac", price: 350, qty: 1 },
];

const names = cart.map((item) => item.name);
// ["Tshirt", "Casquette", "Sac"]

const expensive = cart.filter((item) => item.price > 100);
// Tshirt و Sac

const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
// 670

• map: كترجع Array جديد بنفس الطول، كل عنصر تحول.
• filter: كترجع غير العناصر اللي كيحققو الشرط.
• reduce: كتجمع الـ Array كامل فقيمة وحدة (مجموع، Object، …). ديما عطيها قيمة أولية (هنا 0).

9. شنو هو الـ Destructuring والـ Spread والـ Rest؟

// Destructuring
const user = { name: "Hind", city: "Rabat", age: 27 };
const { name, city } = user;
const [first, second] = [10, 20, 30];

// Spread: كيفرق العناصر
const a = [1, 2];
const b = [...a, 3, 4];               // [1, 2, 3, 4]
const updated = { ...user, age: 28 }; // نسخة جديدة مع تعديل

// Rest: كيجمع الباقي
const { age, ...rest } = user;        // rest = { name: "Hind", city: "Rabat" }
function sum(...numbers) {
  return numbers.reduce((s, n) => s + n, 0);
}
sum(1, 2, 3); // 6

نفس الكتابة ...، ولكن: إلا كانت كتفرق القيم سميتها Spread، وإلا كانت كتجمعهم سميتها Rest.

10. شنو هوما ?. و ?? (Optional chaining و Nullish coalescing)؟

const user = { profile: null, visits: 0 };

console.log(user.profile?.city);  // undefined بلا خطأ
console.log(user.getName?.());    // undefined، الدالة ماكايناش

console.log(user.visits || 10);   // 10  ← || كتعتبر 0 Falsy
console.log(user.visits ?? 10);   // 0   ← ?? كتشوف غير null و undefined

الفرق المهم: || كترجع القيمة الثانية مع أي قيمة Falsy (بحال 0 و"")، أما ?? غير مع null وundefined.

المستوى المتوسط

11. شنو هي الـ Closure؟

الـ Closure هي ملي دالة كتبقى “عاقلة” على المتغيرات ديال الـ Scope اللي تخلقات فيه، حتى من بعد ما تسالا التنفيذ ديال داك الـ Scope:

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

count ما يمكنش توصل ليه من برا، غير عن طريق الدالة. هكا كنديرو Data privacy.

السؤال الكلاسيكي اللي كيجي مع الـ Closures:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}
// 0, 1, 2

مع var كاين متغير i واحد مشترك، وملي كيتنفذو الـ Callbacks الحلقة كتكون سالات وi ولات 3. مع let كل دورة كيكون عندها j جديد خاص بيها.

12. كيفاش كتخدم الكلمة this؟

القيمة ديال this ما كتحددش فين كتبت الدالة، ولكن كيفاش تعيطتي عليها (من غير الـ Arrow functions). القواعد الأساسية:

"use strict";

const user = {
  name: "Sara",
  greet() {
    return `Salam ${this.name}`;
  },
};

console.log(user.greet()); // "Salam Sara"

const greet = user.greet;
greet(); // TypeError: this هنا undefined، ما يمكنش نقراو منه name

ملي خرجنا الدالة من الـ Object وعيطنا عليها بوحدها، this ما بقاتش user. هادا خطأ شائع بزاف ملي كنمررو Methods كـ Callbacks.

13. شنو الفرق بين Arrow functions والدوال العادية؟

• الـ Arrow function ما عندهاش this ديالها، كتاخدو من البرا (Lexical this).
• ما عندهاش arguments.
• ما يمكنش تستعملها مع new (ماشي Constructor).
• الكتابة ديالها قصيرة، ومزيانة للـ Callbacks.

const timer = {
  seconds: 0,
  start() {
    setTimeout(() => {
      this.seconds++;            // this = timer
      console.log(this.seconds); // 1
    }, 1000);
  },
};
timer.start();

لو استعملنا function () {} عادية داخل setTimeout، كانت this غادي تكون ماشي timer، والكود غادي يخسر. ولكن ما تستعملش Arrow function كـ Method فـ Object إلا كنتي محتاج this ديال داك الـ Object.

14. شنو الفرق بين call و apply و bind؟

التلاتة كيخليوك تحدد this بيدك:

function introduce(city, country) {
  return `${this.name} men ${city}, ${country}`;
}
const person = { name: "Karim" };

introduce.call(person, "Fes", "Maroc");    // "Karim men Fes, Maroc"
introduce.apply(person, ["Fes", "Maroc"]); // "Karim men Fes, Maroc"

const bound = introduce.bind(person, "Fes");
bound("Maroc");                            // "Karim men Fes, Maroc"

• call: كتنفذ الدالة دابا، والـ Arguments وحدة بوحدة.
• apply: كتنفذ دابا، والـ Arguments فـ Array.
• bind: ما كتنفذش، كترجع دالة جديدة this ديالها مربوطة.

15. شنو هي الـ Prototypes؟ وواش الـ Classes حاجة جديدة؟

كل Object فـ JavaScript عندو رابط خفي لـ Object آخر سميتو Prototype. ملي كتقلب على خاصية وما كتلقاهاش فالـ Object، JavaScript كتطلع فالسلسلة (Prototype chain) حتى تلقاها ولا توصل لـ null.

الـ class اللي جات فـ ES6 هي Syntactic sugar فوق نفس نظام الـ Prototypes:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} kaydir sout`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} kaynbe7`;
  }
}

const rex = new Dog("Rex");
console.log(rex.speak());                                           // "Rex kaynbe7"
console.log(Object.getPrototypeOf(rex) === Dog.prototype);           // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true

16. شنو الفرق بين Shallow copy و Deep copy؟

• Shallow copy ({...obj}، Object.assign، [...arr]): كتنسخ المستوى الأول فقط. الـ Objects اللي داخل كيبقاو مشتركين.
• Deep copy: كتنسخ كلشي فجميع المستويات.

const original = {
  name: "Amine",
  skills: ["JS"],
  joined: new Date("2024-01-15"),
};

const shallow = { ...original };
shallow.skills.push("React");
console.log(original.skills); // ["JS", "React"]  ← تبدل حتى الأصلي!

const deep = structuredClone(original);
deep.skills.push("Node");
console.log(original.skills);            // ["JS", "React"]
console.log(deep.joined instanceof Date); // true

structuredClone() موجودة فالمتصفحات الحديثة وفـ Node.js، وكتحافظ على Date وMap وSet. ولكن ما كتنسخش الدوال (كتعطي خطأ). أما الطريقة القديمة JSON.parse(JSON.stringify(obj)) فكتخسر الـ Dates (كتولي Strings) وكتحيد undefined والدوال.

17. شنو هو الـ Event bubbling والـ Event delegation؟

ملي كتكليكي على عنصر، الـ Event كيدوز بـ 3 مراحل: Capturing (من الفوق للتحت)، Target، ومن بعد Bubbling (كيطلع من العنصر لـ Parents ديالو). أغلب الـ Listeners كيخدمو فمرحلة الـ Bubbling.

Event delegation هي أنك بلاصة ما تحط Listener على كل عنصر، كتحط واحد على الـ Parent وكتستافد من الـ Bubbling:

document.querySelector("#todo-list").addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item) return;
  console.log("Clicked:", item.dataset.id);
});

الفوائد: Listener واحد بلاصة المئات، وكيخدم حتى مع العناصر اللي غادي تزاد من بعد. وإلا بغيتي توقف الـ Bubbling استعمل event.stopPropagation(). ملاحظة: ماشي كاع الـ Events كيديرو Bubbling، مثلا focus وblur لا (ولكن focusin وfocusout كيديرو).

18. شنو الفرق بين Debounce و Throttle؟ وكيفاش تكتبهم؟

• Debounce: كيتسنى حتى يحبس المستخدم (مثلا 300ms بلا كتابة) عاد كينفذ. مثالي لـ Search input.
• Throttle: كينفذ مرة وحدة على الأكثر فكل مدة معينة، كيفما كان عدد الأحداث. مثالي لـ Scroll ولا Resize.

function debounce(fn, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
}

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// الاستعمال
const search = debounce((text) => console.log("Search:", text), 300);
window.addEventListener("scroll", throttle(() => console.log("scroll"), 200));

لاحظ أن جوج الدوال كيعتمدو على Closure (timeoutId وlastTime)، والمحاور غالباً غادي يسولك على هادشي.

19. شنو الفرق بين Promises و async/await؟

الـ Promise هو Object كيمثل نتيجة عملية غير متزامنة: كيكون pending، ومن بعد ولا fulfilled ولا rejected. وasync/await ماشي حاجة مختلفة، هي غير كتابة أنقى فوق الـ Promises:

// بالـ Promises
function getUserThen(id) {
  return fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .then((user) => user.name);
}

// بـ async/await
async function getUserAwait(id) {
  const res = await fetch(`/api/users/${id}`);
  const user = await res.json();
  return user.name;
}

جوج الدوال كيرجعو Promise. أي دالة async كترجع Promise ديما.

20. كيفاش كتعالج الأخطاء فالكود غير المتزامن؟

async function loadUser(id) {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Mochkil:", err.message);
    return null;
  }
}

نقط كيحب يسمعها المحاور:

• fetch ما كترفضش (Reject) ملي السيرفر يرجع 404 ولا 500، كترفض غير فمشاكل الشبكة. ولهذا خاصك تشيك res.ok.
• داخل try، return await promise كتشد الخطأ فـ catch، أما return promise بلا await فالخطأ كيفلت من catch ديال هاد الدالة.
• forEach ما كتسناش الـ async callbacks. استعمل for...of مع await، ولا Promise.all باش تخدم بالتوازي.
• أي Promise ترفض بلا catch كيعطي Unhandled rejection، وفـ Node.js الحديثة هادشي كيطيح الـ Process افتراضياً.

المستوى المتقدم

21. اشرح الـ Event Loop

JavaScript كتخدم بـ Thread واحد، ولكن كتقدر تدير عمليات غير متزامنة بفضل الـ Event Loop. المكونات:

• Call Stack: فين كيتنفذ الكود المتزامن.
• Web APIs (فالمتصفح) ولا libuv (فـ Node.js): فين كيتسناو setTimeout، الـ Network…
• Microtask queue: الـ Callbacks ديال Promises (then/catch/finally)، await، queueMicrotask.
• Macrotask (Task) queue: setTimeout، setInterval، الـ I/O، الـ Events ديال المستخدم.

القاعدة الذهبية: من بعد ما يخوى الـ Call Stack، الـ Event Loop كينفذ جميع الـ Microtasks، وعاد كياخد Macrotask واحد، ومن بعد كيرجع للـ Microtasks وهكا.

المثال الكلاسيكي:

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
queueMicrotask(() => console.log("4"));
console.log("5");

1
5
3
4
2

1 و5 متزامنين. 3 و4 Microtasks (بالترتيب ديال التسجيل). و2 Macrotask، حتى ولو الـ Delay هو 0، كيتنفذ فالأخير.

22. سؤال Event Loop أصعب: async/await مع then

console.log("A");

setTimeout(() => console.log("B"), 0);

Promise.resolve()
  .then(() => console.log("C"))
  .then(() => console.log("D"));

(async () => {
  console.log("E");
  await null;
  console.log("F");
})();

console.log("G");

A
E
G
C
F
D
B

الشرح خطوة بخطوة:

1. الكود المتزامن: A، ومن بعد الدالة async كتبدا تتنفذ مباشرة وكتطبع E، ومن بعد G.
2. await null كتوقف الدالة وكتحط الباقي ديالها (F) كـ Microtask، من بعد C اللي تسجل قبل.
3. Microtasks: C كتتنفذ وكتسجل D فالأخير ديال الـ Queue، ومن بعد F، ومن بعد D.
4. فالأخير الـ Macrotask: B.

النقطة المهمة: الكود اللي قبل أول await فدالة async كيتنفذ بشكل متزامن.

23. شنو الفرق بين Promise.all و allSettled و race و any؟

const results = await Promise.allSettled([
  fetch("/api/products"),
  fetch("/api/categories"),
]);
results.forEach((r) => console.log(r.status)); // "fulfilled" ولا "rejected"

24. كتب Promise.all بيدك

سؤال كيجي بزاف فمقابلات Senior:

function promiseAll(items) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completed = 0;

    if (items.length === 0) {
      resolve(results);
      return;
    }

    items.forEach((item, index) => {
      Promise.resolve(item).then((value) => {
        results[index] = value;   // نحافظو على الترتيب
        completed++;
        if (completed === items.length) resolve(results);
      }, reject);                 // أول خطأ كيرفض الكل
    });
  });
}

promiseAll([1, Promise.resolve(2), new Promise((r) => setTimeout(() => r(3), 100))])
  .then(console.log); // [1, 2, 3]

النقط المهمة: الترتيب ديال النتائج كيبقى بحال الترتيب ديال المدخلات (ماشي ترتيب الانتهاء)، والقيم العادية كتتحول لـ Promise بـ Promise.resolve، والـ Array الخاوي كيرجع [] مباشرة.

25. شنو الفرق بين ES Modules و CommonJS؟

// ESM
import { sum } from "./math.js";
export const PI = 3.14;

// CommonJS
const { sum } = require("./math");
module.exports = { PI: 3.14 };

فـ Node.js، كتختار ESM بالامتداد .mjs ولا بـ "type": "module" فـ package.json. اليوم ESM هو المعيار الرسمي، وأغلب المشاريع الجديدة كتستعملو.

26. شنو هوما الأسباب الشائعة ديال Memory leaks؟

الـ Garbage Collector كيمسح من الذاكرة أي حاجة ما بقاش ليها مرجع. الـ Leak كيوقع ملي كنخليو مراجع بلا ما نقصدو:

• Timers (setInterval) اللي ما كيتحبسوش.
• Event listeners اللي ما كيتحيدوش، خصوصاً فالـ SPA ملي كيتبدل الـ Component.
• Closures شادة فـ Objects كبار.
• Detached DOM nodes: عناصر تحيدو من الصفحة ولكن مازال عندك مرجع ليهم فشي متغير.
• Caches كيكبرو بلا حدود، ولا متغيرات Global.

const controller = new AbortController();

window.addEventListener("resize", () => console.log("resize"), {
  signal: controller.signal,
});

const intervalId = setInterval(() => console.log("tick"), 1000);

// ملي ما بقيناش محتاجينهم (مثلا ملي يتحيد الـ Component):
controller.abort();        // كيحيد الـ Listener
clearInterval(intervalId); // كيحبس الـ Timer

هادشي هو بالضبط علاش فـ React كنرجعو Cleanup function من useEffect. إلا بغيتي تعرف أكثر على React، شوف كلشي على React.

27. شنو الفرق بين Map و Object؟ وشنو هو WeakMap؟

• Object: المفاتيح ديالو Strings ولا Symbols فقط.
• Map: المفتاح يقدر يكون أي حاجة (حتى Object ولا Function)، عندو size، وكيحافظ على ترتيب الإضافة، ومزيان فالإضافة والحذف المتكرر.
• WeakMap: المفاتيح خاصهم يكونو Objects، والمرجع ليهم “ضعيف”: إلا ما بقا حتى مرجع آخر للمفتاح، الـ Garbage Collector يقدر يمسحو. مزيان باش تربط بيانات بعناصر DOM بلا ما تسبب Memory leak.

const visits = new Map();
const btn = { id: "buy" };
visits.set(btn, 3);
console.log(visits.get(btn)); // 3
console.log(visits.size);     // 1

28. شنو هو الـ Currying؟

هو أنك تحول دالة كتاخد بزاف ديال الـ Arguments لسلسلة ديال دوال، كل وحدة كتاخد Argument واحد:

const multiply = (a) => (b) => a * b;

const double = multiply(2);
console.log(double(5));      // 10
console.log(multiply(3)(4)); // 12

كيعاونك تصاوب دوال متخصصة من دوال عامة، وهو مثال آخر على الـ Closures.

نصائح باش تنجح فمقابلة JavaScript

فكر بصوت عالي

المحاور ما كيقلبش غير على الجواب الصحيح، كيبغي يشوف كيفاش كتفكر. ملي يعطيك مشكل:

1. عاود صياغة السؤال بكلامك باش تتأكد بلي فهمتي.
2. سول على الحالات الخاصة: Array خاوي؟ قيم سالبة؟ null؟
3. قول الحل البسيط (حتى ولو ماشي الأسرع)، ومن بعد حسنو.
4. هضر على الـ Complexity (Big O) ديال الحل. إلا بغيتي تراجع هاد الجزء، عندنا مقال على هياكل البيانات والخوارزميات للمبتدئين.

الـ Live coding

• تمرن تكتب الكود بلا Autocomplete، فـ Editor بسيط.
• كتب أسماء متغيرات واضحة، حتى تحت الضغط.
• إلا تبلوكيتي، قول شنو كتحاول دير. السكات الطويل هو أسوأ حاجة.
• جرب الكود ديالك بمثال صغير قبل ما تقول “ساليت”.

أسئلة تطرحها انت على الشركة

فالأخير ديال المقابلة ديما كيسولوك “عندك شي سؤال؟”. ما تقولش “لا”. هادي أمثلة:

• شنو هو الـ Stack اللي كتخدمو بيه، وكيفاش كتديرو الـ Code review؟
• كيفاش داير الفريق، وشكون اللي غادي نخدم معاه مباشرة؟
• كيفاش كيكون الـ Onboarding فالشهور الأولى؟
• واش الخدمة Remote، Hybrid ولا فالمكتب؟ وشنو هي المراحل الجاية فالتوظيف؟

إلا كنتي كتقدم من المغرب

• الشركات المحلية (الـ ESN وشركات الـ Offshoring فكازا والرباط وطنجة وغيرهم) كثير منهم كيديرو المقابلات بالفرنسية، وأحياناً كيعطيوك Test تقني تديرو فالدار. وجد راسك تشرح المفاهيم بالفرنسية حتى هي.
• الخدمة عن بعد مع شركات أجنبية كتطلب غالباً الإنجليزية، ومراحل أكثر (Screening، Technical، System design أحياناً، Culture fit). تمرن تشرح Closures والـ Event Loop بالإنجليزية بصوت عالي.
• خلي الـ GitHub ديالك نقي، وحط فيه 2 ولا 3 مشاريع كاملين بـ README واضح.

وإلا كان الهدف ديالك هو الخدمة Remote، راه كتبنا دليل مفصل على كيفاش تلقى خدمة كمطور عن بعد من المغرب.

أسئلة شائعة

شحال من وقت خاصني باش نوجد لمقابلة JavaScript؟

إلا كانت عندك الأساسيات، أسبوعين حتى شهر ديال المراجعة اليومية كافيين غالباً: راجع المفاهيم اللي فهاد المقال، وحل تمارين فـ LeetCode ولا Codewars، وكتب بيدك دوال بحال debounce وpromiseAll.

واش خاصني نعرف React ولا Framework باش ندوز مقابلة Frontend؟

أغلب مقابلات Frontend اليوم كتسول على Framework (غالباً React)، ولكن الأسئلة ديال JavaScript الخالصة هي الأساس. إلا كنتي قوي فـ Closures وthis والـ Event Loop، غادي تفهم React بسهولة.

شنو هوما أكثر المواضيع اللي كيطيحو فيها المترشحين؟

الـ Event Loop (ترتيب setTimeout والـ Promises)، this ملي كتمرر Method كـ Callback، والفرق بين Shallow copy وDeep copy. ركز عليهم مزيان.

واش نحفظ الأجوبة حرفياً؟

لا. المحاورين كيعاودو صياغة الأسئلة ولا كيبدلو المثال شوية باش يشوفو واش فاهم. الأحسن تفهم الفكرة وتكتب الأمثلة بيدك فـ Console وتجرب تبدل فيها.

واش الأسئلة كتختلف بين Junior و Senior؟

نعم. الـ Junior غالباً كيتسول على الأساسيات (الأسئلة 1 حتى 14). الـ Mid وSenior كيتسولو أكثر على الـ Event Loop، الأداء، Memory leaks، وكتابة دوال بحال Promise.all، وزيد عليهم System design.

خلاصة

مقابلات JavaScript ماشي امتحان ديال الحفظ، هي فرصة باش تبين بلي فاهم كيفاش اللغة كتخدم من الداخل: الـ Scope والـ Hoisting، الـ Closures وthis، والـ Event Loop والـ Promises. ركز على الفهم، كتب الأمثلة بيدك، وتمرن تشرحها بصوت عالي بالفرنسية والإنجليزية.

حط هاد الصفحة فالـ Bookmarks، وراجعها نهار قبل المقابلة.

وانت، شنو هو أصعب سؤال JavaScript تطرح عليك فشي مقابلة؟ صيفطو لينا على [email protected]، وشارك هاد المقال مع صحابك اللي عندهم مقابلات قريبة!