تعبير الدالة مقابل الإعلان: أيهما تختار في JavaScript؟

لماذا هذا السؤال يحير حتى المطورين ذوي الخبرة؟

إذا كنت قد كتبت في JavaScript ولو مرة واحدة، فمن المحتمل أنك صادفت كلا الطريقتين لتعريف الدوال. تبدو متشابهة، لكنها تتصرف بشكل مختلف تمامًا. على Stack Overflow، جمع هذا السؤال آلاف المشاهدات وعشرات الصفحات من النقاشات. لماذا؟ لأن عدم فهم الفرق بين var functionName = function() {} و function functionName() {} يؤدي إلى أخطاء يصعب تتبعها.

اليوم سنحسم هذا الموضوع مرة وإلى الأبد. ستتعرف على ما هو إعلان الدالة و تعبير الدالة، وكيف يعمل الرفع (hoisting)، ومتى تستخدم أي طريقة. هيا بنا!

ما الذي يخفيه التركيب النحوي؟

لنبدأ بالأساسيات. الخيار الأول هو إعلان الدالة:

function greet() {\n    console.log('مرحبًا!');\n}

الخيار الثاني هو تعبير الدالة:

const greet = function() {\n    console.log('مرحبًا!');\n};

لاحظ: في الحالة الأولى، للدالة اسم وتكون في بداية السطر. في الحالة الثانية، نُسند دالة مجهولة إلى المتغير greet. لكن الأمر الأكثر إثارة يبدأ عندما ننظر إلى كيفية معالجة JavaScript لهذه التعريفات.

الفرق الرئيسي: الرفع (Hoisting)

الرفع هو آلية في JavaScript، حيث يتم نقل تعريفات المتغيرات والدوال إلى أعلى نطاق الرؤية الخاص بها قبل تنفيذ الكود. لكنه يعمل بشكل مختلف مع الإعلان والتعبير.

إعلان الدالة يُرفع بالكامل

عند استخدام function functionName() {}، تقوم JavaScript برفع تعريف الدالة بالكامل إلى الأعلى. هذا يعني أنه يمكنك استدعاء الدالة قبل تعريفها في الكود:

sayHello(); // "مرحبًا!"\n\nfunction sayHello() {\n    console.log('مرحبًا!');\n}

سيتم تنفيذ الكود دون أخطاء. هذا مريح، لكنه قد يربك المبتدئين.

تعبير الدالة لا يُرفع

مع var functionName = function() {} القصة مختلفة. يتم رفع تعريف المتغير فقط، وليس قيمته. تبقى الدالة في مكانها:

sayHello(); // TypeError: sayHello is not a function\n\nvar sayHello = function() {\n    console.log('مرحبًا!');\n};

لماذا يحدث ذلك؟ لأن var يرفع تعريف المتغير sayHello (بقيمة undefined)، ويتم تعيين الدالة فقط في السطر الذي يحتوي على التعبير. لذلك، قبل هذا السطر، sayHello هو undefined، ومحاولة استدعائه كدالة تؤدي إلى خطأ.

بالمناسبة، إذا استبدلت var بـ let أو const، سيكون الخطأ مختلفًا — ReferenceError: Cannot access 'sayHello' before initialization. هذا مرتبط بأن let و const لا يتم تهيئتهما حتى لحظة التعريف (ما يسمى بـ "المنطقة الميتة المؤقتة").

نطاق الرؤية: حجر عثرة آخر

كل من إعلان الدالة و تعبير الدالة يخضعان لقواعد نطاق الرؤية. لكن هناك فارق دقيق.

إعلان الدالة مرئي داخل الكتلة

على الرغم من أن إعلان الدالة يُرفع، إلا أن نطاق رؤيته محدود بالكتلة (في الوضع الصارم):

'use strict';\nif (true) {\n    function greet() {\n        console.log('داخل الكتلة');\n    }\n    greet(); // "داخل الكتلة"\n}\ngreet(); // ReferenceError: greet is not defined (في الوضع الصارم)

في الوضع غير الصارم، قد "يتسرب" هذا التعريف إلى الخارج، لكن لا ينبغي الاعتماد على ذلك.

تعبير الدالة يعيش في متغيره

مع تعبير الدالة، كل شيء قابل للتوقع: الدالة متاحة فقط حيث يكون المتغير متاحًا. إذا تم نق