دليل المبرمج: 5 مشاكل شائعة في JavaScript وكيفية حلها باحترافية

JavaScript ليست لغة “صعبة” بالمعنى الأكاديمي، لكنها لغة مليئة بالحالات الحدية التي تُنتج أخطاءً لا تظهر عند الكتابة، بل عند التشغيل، وأحيانًا بعد أشهر. الفرق بين مطور مبتدئ ومطور محترف ليس في معرفة الصياغة، بل في معرفة هذه الحالات مسبقًا وتجنبها بنيويًا.

هذا الدليل يفكك خمس مشاكل تظهر في معظم قواعد الأكواد: فخ this، وإدارة الأخطاء في async/await، والمقارنة والتحقق من الأنواع، والنسخ والتغيير (mutation)، وتسريب الذاكرة. لكل مشكلة نشرح لماذا تحدث، ثم نقدم الحل الاحترافي لا الحل “الذي يعمل”، ونوضح كيف تكتشفها آليًا قبل الإنتاج.

نظرة سريعة: خريطة المشاكل الخمس وحلولها

الجدول التالي يلخص المشاكل الخمس، وأعراضها، والحل الاحترافي لكل منها:

المشكلة 1: فخ this وسياق التنفيذ

العرض

this في JavaScript لا يُحدد عند تعريف الدالة، بل عند استدعائها. هذا يعني أن الدالة نفسها قد تحصل على قيم مختلفة لـ this حسب طريقة الاستدعاء. النتيجة أخطاء يصعب تتبعها، لأن الكود “يبدو” صحيحًا.

const user = {
    name: "Ali",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

const fn = user.greet;
fn(); // "Hello, undefined"

لماذا يحدث؟

في المثال السابق، user.greet() تستدعي الدالة كطريقة على الكائن، فيكون this هو user. لكن عندما ننسخ الدالة إلى متغير ثم نستدعيها، لم يعد هناك “كائن” يحملها، this يصبح undefined في الوضع الصارم أو window في الوضع غير الصارم.

المشكلة تتكرر مع:

• مستمعو الأحداث: addEventListener يستدعي الدالة، فيكون this هو العنصر، لا الكائن الذي يهمك.
• setTimeout وsetInterval: الدالة تُستدعى في سياق آخر، وthis ليس ما تتوقع.
• الدوال التي تُمرر إلى دوال أخرى (callbacks)، ثم تستدعيها الدالة المستلمة دون ربط.

الحل الاحترافي

الحل الأول: Arrow functions عندما تريد وراثة this من النطاق الخارجي.

const user = {
    name: "Ali",
    greetLater() {
        setTimeout(() => {
            console.log(`Hello, ${this.name}`); // "Hello, Ali"
        }, 100);
    }
};

الحل الثاني: bind عندما تحتاج الدالة نفسها لكن مع سياق ثابت:

const user = {
    name: "Ali",
    greet() {
        console.log(this.name);
    }
};

const boundGreet = user.greet.bind(user);
boundGreet(); // "Ali"

الحل الثالث، وهو الأفضل من ناحية التصميم: لا تعتمد على this أصلًا. مرر البيانات كوسائط صريحة، فتصبح الدالة نقية، وقابلة للاختبار، ومستقلة عن السياق.

function greet(name) {
    console.log(`Hello, ${name}`);
}

greet(user.name); // "Hello, Ali"

القاعدة العملية: إذا لم تكن بحاجة إلى this، فلا تستخدمه. ومعظم الدوال في التطبيقات الحديثة لا تحتاجه. استخدمه فقط في سياقات الكائنات والفئات، وفكر جيدًا في طريقة الاستدعاء قبل أن تفترض قيمته.

المشكلة 2: إدارة الأخطاء في async/await

العرض

async/await جعل الكود غير المتزامن يبدو متزامنًا، لكنه لم يجعل الأخطاء متزامنة. النتيجة أن كثيرًا من المطورين يكتبون await دون try/catch، أو يستخدمون await داخل حلقات فيتحول الكود إلى تنفيذ تسلسلي بطيء.

// خطأ 1: خطأ غير ملتقط
async function load() {
    const data = await fetch("/api/users").then(r => r.json());
    return data; // إذا فشل fetch، الخطأ يطير دون معالجة
}

// خطأ 2: تنفيذ تسلسلي بطيء
async function loadAll() {
    const a = await fetchOne();
    const b = await fetchTwo();
    const c = await fetchThree(); // ثلاثة طلبات متتالية، لا داعي
}

لماذا يحدث؟

await يوقف تنفيذ الدالة الحالية، لكنه لا يوقف تطبيقك. إذا فشل الطلب الذي تنتظره، فإن الخطأ يظهر كـ unhandled promise rejection، وهو غير قابل للاكتشاف إلا في window.onunhandledrejection أو أدوات المراقبة. وهذا يعني أن المستخدم قد يرى شاشة فارغة دون أي رسالة خطأ.

المشكلة الثانية أكثر شيوعًا في الكود الحقيقي: await في حلقة ينتج تنفيذًا تسلسليًا، حيث ينتظر كل طلب انتهاء السابق. إذا كان الطلب يستغرق ثانية، فثلاثة طلبات تستغرق ثلاث ثوانٍ، بدلًا من ثانية واحدة لو نُفِّذت بالتوازي.

الحل الاحترافي

أولًا: معالجة الأخطاء صراحةً. استخدم try/catch، ولا تفترض أن الخطأ لن يحدث:

async function load() {
    try {
        const response = await fetch("/api/users");
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("Failed to load users:", error);
        throw error;
    }
}

ثانيًا: التزامن عند الاستقلال. إذا كانت الطلبات مستقلة، نفّذها معًا:

async function loadAll() {
    const [a, b, c] = await Promise.all([
        fetchOne(),
        fetchTwo(),
        fetchThree()
    ]);
    return { a, b, c };
}

لكن Promise.all يفشل بأول خطأ. إذا كنت تريد أن تكمل الطلبات حتى لو فشل بعضها، استخدم Promise.allSettled:

const results = await Promise.allSettled([
    fetchOne(),
    fetchTwo(),
    fetchThree()
]);

results.forEach((result, i) => {
    if (result.status === "rejected") {
        console.error(`Task ${i} failed:`, result.reason);
    }
});

ثالثًا: الإلغاء. الطلب غير المتزامن قد يبقى معلقًا إذا غادر المستخدم الصفحة. استخدم AbortController لإلغاء الطلبات غير الضرورية:

const controller = new AbortController();

fetch("/api/users", { signal: controller.signal })
    .catch(error => {
        if (error.name === "AbortError") return; // متوقع
        throw error;
    });

// عند مغادرة المكون أو الصفحة
controller.abort();

المشكلة 3: المقارنة والتحقق من الأنواع

العرض

JavaScript لغة ضعيفة الأنواع، وهذا يعني أن == وtypeof قد يعطيان نتائج غير متوقعة. المثال الكلاسيكي:

console.log(0 == "");        // true
console.log(null == undefined); // true
console.log(typeof null);    // "object"
console.log(NaN === NaN);    // false

هذه ليست “حالات غريبة” يمكن تجاهلها. إنها تسبب أخطاءً فعلية في التحقق من الإدخال، وفي المقارنة بين قيم مختلفة، وفي التعامل مع القيم الفارغة القادمة من API.

لماذا يحدث؟

== يقوم بتحويل ضمني للأنواع قبل المقارنة، فيساوي بين 0 و"" لأن الاثنين “فارغان” بعد التحويل. و typeof null يعيد "object" بسبب خطأ تاريخي في اللغة، لا لأن null كائن. و NaN لا يساوي نفسه، لأنها القيمة الوحيدة في اللغة التي تتصرف بهذه الطريقة.

الحل الاحترافي

• استخدم === دائمًا. إنه يمنع التحويل الضمني، ويجعل المقارنة متوقعة.
• للأرقام، استخدم Number.isNaN بدل isNaN العامة، التي تُحوّل القيمة إلى رقم أولًا وتنتج نتائج مضللة.
• للكائنات، استخدم Object.is إذا كنت تحتاج مقارنة دقيقة، فهو يميز بين -0 و+0، ويعتبر NaN تساوي نفسها.
• للتحقق من النوع، استخدم Array.isArray وObject.prototype.toString بدل typeof وحده.
• في المشاريع الكبيرة، استخدم TypeScript. هو لا يمنع هذه المشاكل تمامًا، لكنه يمنع معظم الحالات قبل التشغيل.

// بدلًا من typeof
function isArray(value) {
    return Array.isArray(value);
}

// بدلًا من isNaN
if (Number.isNaN(value)) {
    // قيمة غير صالحة
}

// بدلًا من === على الكائنات
if (Object.is(a, b)) {
    // مقارنة دقيقة
}

المشكلة 4: النسخ والتغيير (Mutation)

العرض

في JavaScript، الكائنات والمصفوفات تُمرَّر بالمرجع، لا بالقيمة. عندما تنسخ كائنًا، فأنت تنسخ “العنوان”، لا المحتوى. النتيجة أن التعديل على “النسخة” يغيّر الأصل، وهذا يفسد الحالة في مكان آخر من الكود.

const original = { user: { name: "Ali" } };
const copy = { ...original };

copy.user.name = "Omar";
console.log(original.user.name); // "Omar" — تغيّر الأصل

لماذا يحدث؟

spread operator (...) يقوم بنسخ سطحي. أي أنه ينسخ المفاتيح، لكن القيم التي هي كائنات تبقى مراجع لنفس الكائن الأصلي. وبالتالي، تعديل copy.user يؤثر على original.user، لأنهما نفس الكائن.

هذه المشكلة تظهر في:

• إدارة الحالة في React أو Vue، حيث تعديل الحالة مباشرة قد لا يُحدث إعادة رسم، أو يُحدث تغييرات غير متوقعة في مكونات أخرى.
• الدوال التي تستقبل كائنًا وتعدّله “للراحة”، دون أن يتوقع المستدعي ذلك.
• الإعدادات (config) المشتركة بين مكونات، حيث تعديل مكوّن واحد يؤثر على الجميع.

الحل الاحترافي

أولًا: النسخ العميق. structuredClone متاحة في المتصفحات الحديثة وNode.js، وتقوم بنسخ عميق حقيقي دون مشاكل JSON.parse(JSON.stringify(...)) القديمة (التي تفقد التواريخ والدوال و Map وSet):

const original = { user: { name: "Ali" }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.user.name = "Omar";
console.log(original.user.name); // "Ali"

ثانيًا: التجميد. إذا كنت تريد منع التغيير تمامًا، استخدم Object.freeze. لكن تذكر أنه سطحي أيضًا، وتحتاج تجميد كل كائن داخلي لتجميد عميق:

function deepFreeze(obj) {
    Object.getOwnPropertyNames(obj).forEach(name => {
        const value = obj[name];
        if (value && typeof value === "object") {
            deepFreeze(value);
        }
    });
    return Object.freeze(obj);
}

ثالثًا: الأنماط غير المتغيرة (immutable). في React وRedux، القاعدة أن تعديل الحالة يجب أن يُنتج كائنًا جديدًا لا تعديلًا على القديم:

// بدلًا من
state.user.name = "Omar";

// استخدم
const newState = {
    ...state,
    user: { ...state.user, name: "Omar" }
};

function attach(element, data) {
    element.addEventListener("click", () => {
        console.log(data);
    });
    // لا يوجد removeEventListener
}

function attach(element, data) {
    const handler = () => console.log(data);
    element.addEventListener("click", handler);
    return () => element.removeEventListener("click", handler);
}

const detach = attach(el, data);
// عند الحاجة
detach();

const controller = new AbortController();

element.addEventListener("click", handler, {
    signal: controller.signal
});

// إزالة كل المستمعين المرتبطين
controller.abort();

useEffect(() => {
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
}, []);

const cache = new WeakMap();

function memoize(obj, compute) {
    if (cache.has(obj)) return cache.get(obj);
    const result = compute(obj);
    cache.set(obj, result);
    return result;
}