Magdy Atef Zahran

الفرق بين Function Declaration و Function Expression في JavaScript

في JavaScript عندك طريقتين تقدر تعرف بيهم الفانكشن:

Function Declaration
Function Expression

طيب، إيه الفرق بينهم؟ وامتى تستخدم كل واحدة؟

📌 أولًا: Function Declaration

دي الطريقة التقليدية لتعريف الفانكشن باستخدام الكلمة المفتاحية functionوكودها بيبقى بالشكل ده:

function sayHello() { console.log(“Hello, world!”); } sayHello(); // Hello, world!

المميزات:

ممكن تنادي الفانكشن قبل ما يتم تعريفها في الكود (بسبب الـ Hoisting).

🔴 مثال على الـ Hoisting:

greet(); // ✅ تشتغل عادي function greet() { console.log(“Good Morning”); }

الفانكشن بتتخزن في الـ Memory قبل تنفيذ الكود فبتكون متاحة حتى لو ناديت عليها قبل التعريف

📌 ثانيًا: Function Expression

هنا الفانكشن بتتخزن داخل متغير فـ لازم الأول تتعرف وبعد كده يتم استدعاؤها.. كودها بيكون بالشكل ده:

const sayHi = function() { console.log(“Hi there”); }; sayHi(); // Hi there

المميزات:

مش بتتعرض للـ Hoisting زي الـ Function Declaration.
مفيدة جدًا لو هتستخدم الفانكشن كـ Callback Function.
ممكن تخزنها في متغيرات أو تمررها لفانكشن تانية.

لو حاولت تنادي عليها قبل التعريف، هتظهر لك Error

greet(); // ❌ Uncaught ReferenceError: Cannot access ‘greet’ before initialization const greet = function() { console.log(“Good Evening!”); };

هنا الفانكشن مش متاحة قبل تعريفها لأنها بتتعامل كقيمة عادية مش كتعريف مستقل

جدول مقارنة سريع بين Function Declaration و Function Expression

الجدول	Function Declaration	Function Expression
الصياغة	function myFunc() {}	const myFunc = function() {};
Hoisting	✅ متاحة قبل التعريف	❌ غير متاحة قبل التعريف
الاستخدام	مناسب للتعريفات العامة	مناسب للفانكشن اللي هتتخزن في متغيرات
المكان في الذاكرة	بتخزن في الـ Memory عند تشغيل الكود	بتخزن وقت تنفيذ السطر فقط
المرونة	أقل مرونة (تعريف ثابت)	أكثر مرونة (ممكن تتغير حسب الحاجة)

إمتى تستخدم Function Declaration؟

لو الفانكشن هتكون جزء أساسي من الكود وعايزها تكون متاحة في أي مكان في الملف.
لما تحتاج للفانكشن في أكثر من مكان من غير ما تفكر في ترتيب الأكواد.

إمتى تستخدم Function Expression؟

لما تكون الفانكشن مؤقتة أو داخل متغير زي الـ Callback Functions.
لما تحتاج فانكشن مجهولة (Anonymous Function) مش هتعيد استخدامها كتير.
لو عايز تربط الفانكشن بحدث معين زي setTimeout أو addEventListener.

🎯 تـــاســك عــمــلــي

المطلوب:

اكتب Function Declaration اسمها multiply بتضرب رقمين وترجّع النتيجة.
اكتب Function Expression اسمها divide بتقسم رقمين وترجّع النتيجة.
حاول تنادي عليهم قبل وبعد التعريف وشوف الفرق

📢 شارك الحل بتاعك في الكومنتات وخلينا نشوف مين هيحلها صح

Borma

Magdy Atef Zahran

الفرق بين Function Declaration و Function Expression في JavaScript

في JavaScript عندك طريقتين تقدر تعرف بيهم الفانكشن:

📌 أولًا: Function Declaration

المميزات:

🔴 مثال على الـ Hoisting:

📌 ثانيًا: Function Expression

المميزات:

جدول مقارنة سريع بين Function Declaration و Function Expression

الصياغة

Hoisting

الاستخدام

المكان في الذاكرة

المرونة

إمتى تستخدم Function Declaration؟

إمتى تستخدم Function Expression؟

🎯 تـــاســك عــمــلــي

المطلوب:

قسم التعليقات