17 KiB

Raw Blame History Unescape Escape

أساسيات JavaScript: الطرق والدوال

رسم توضيحي بواسطة Tomomi Imura

اختبار ما قبل المحاضرة

كتابة نفس الكود مرارًا وتكرارًا هي واحدة من أكثر الإحباطات شيوعًا في البرمجة. تحل الدوال هذه المشكلة من خلال السماح لك بتجميع الكود في وحدات قابلة لإعادة الاستخدام. فكر في الدوال مثل الأجزاء القياسية التي جعلت خط التجميع الخاص بهنري فورد ثوريًا – بمجرد إنشاء مكون موثوق، يمكنك استخدامه أينما احتجت دون الحاجة إلى إعادة بنائه من البداية.

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

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

🎥 انقر على الصورة أعلاه لمشاهدة فيديو عن الطرق والدوال.

يمكنك أخذ هذا الدرس على Microsoft Learn!

الدوال

الدالة هي كتلة مستقلة من الكود تؤدي مهمة محددة. إنها تحتوي على منطق يمكنك تنفيذه عند الحاجة.

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

تسمية الدوال بشكل وصفي أمر ضروري. الدالة ذات الاسم الجيد توضح غرضها بوضوح – عندما ترى cancelTimer()، تفهم فورًا ما تقوم به، تمامًا مثل الزر الذي يحمل تسمية واضحة يخبرك بما سيحدث عند النقر عليه.

إنشاء واستدعاء دالة

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

function nameOfFunction() { // function definition
 // function definition/body
}

لنقم بتفصيل هذا:

الكلمة المفتاحية function تخبر JavaScript "مرحبًا، أنا أقوم بإنشاء دالة!"
nameOfFunction هو المكان الذي تعطي فيه دالتك اسمًا وصفيًا
الأقواس () هي المكان الذي يمكنك إضافة المعلمات فيه (سنتحدث عنها قريبًا)
الأقواس المعقوفة {} تحتوي على الكود الفعلي الذي يتم تشغيله عند استدعاء الدالة

لنقم بإنشاء دالة ترحيب بسيطة لنرى هذا عمليًا:

function displayGreeting() {
  console.log('Hello, world!');
}

تقوم هذه الدالة بطباعة "Hello, world!" إلى وحدة التحكم. بمجرد تعريفها، يمكنك استخدامها عدة مرات حسب الحاجة.

لتنفيذ (أو "استدعاء") دالتك، اكتب اسمها متبوعًا بالأقواس. يسمح JavaScript بتعريف دالتك قبل أو بعد استدعائها – محرك JavaScript سيتولى ترتيب التنفيذ.

// calling our function
displayGreeting();

عند تشغيل هذا السطر، يتم تنفيذ كل الكود داخل دالة displayGreeting، مما يعرض "Hello, world!" في وحدة التحكم الخاصة بالمتصفح. يمكنك استدعاء هذه الدالة مرارًا وتكرارًا.

ملاحظة: لقد كنت تستخدم الطرق طوال هذه الدروس. console.log() هي طريقة – وهي في الأساس دالة تنتمي إلى الكائن console. الفرق الرئيسي هو أن الطرق مرتبطة بالكائنات، بينما الدوال مستقلة. يستخدم العديد من المطورين هذه المصطلحات بالتبادل في المحادثات غير الرسمية.

أفضل الممارسات للدوال

إليك بعض النصائح لمساعدتك في كتابة دوال رائعة:

امنح دوالك أسماء واضحة ووصفيّة – ستشكر نفسك في المستقبل!
استخدم camelCasing لأسماء متعددة الكلمات (مثل calculateTotal بدلاً من calculate_total)
اجعل كل دالة تركز على القيام بشيء واحد بشكل جيد

تمرير المعلومات إلى دالة

دالتنا displayGreeting محدودة – يمكنها فقط عرض "Hello, world!" للجميع. تسمح لنا المعلمات بجعل الدوال أكثر مرونة وفائدة.

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

تقوم بإدراج المعلمات داخل الأقواس عند تعريف دالتك، مع فصل المعلمات المتعددة بفواصل:

function name(param, param2, param3) {

}

كل معلمة تعمل كمكان فارغ – عندما يستدعي شخص ما دالتك، سيقدم قيمًا فعلية يتم إدخالها في هذه الأماكن.

لنقم بتحديث دالة الترحيب لتقبل اسم شخص ما:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

لاحظ كيف نستخدم العلامات الخلفية (`) و${} لإدخال الاسم مباشرة في رسالتنا – هذا يسمى القالب النصي، وهو طريقة مفيدة جدًا لبناء النصوص مع المتغيرات المدمجة.

الآن عندما نستدعي دالتنا، يمكننا تمرير أي اسم:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript يأخذ النص 'Christopher'، ويعينه إلى المعلمة name، ويُنشئ الرسالة الشخصية "Hello, Christopher!"

القيم الافتراضية

ماذا لو أردنا جعل بعض المعلمات اختيارية؟ هنا تأتي القيم الافتراضية في متناول اليد!

لنفترض أننا نريد أن يتمكن الأشخاص من تخصيص كلمة الترحيب، ولكن إذا لم يحددوا واحدة، سنستخدم "Hello" كخيار احتياطي. يمكنك إعداد القيم الافتراضية باستخدام علامة المساواة، تمامًا مثل إعداد متغير:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

هنا، name لا يزال مطلوبًا، ولكن salutation لديه قيمة احتياطية 'Hello' إذا لم يقدم أحد تحية مختلفة.

الآن يمكننا استدعاء هذه الدالة بطريقتين مختلفتين:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

في الاستدعاء الأول، يستخدم JavaScript القيمة الافتراضية "Hello" لأننا لم نحدد تحية. في الاستدعاء الثاني، يستخدم "Hi" المخصصة بدلاً منها. هذه المرونة تجعل الدوال قابلة للتكيف مع سيناريوهات مختلفة.

القيم المرجعة

دوالنا حتى الآن كانت فقط تعرض رسائل في وحدة التحكم، ولكن ماذا لو أردت أن تقوم دالة بحساب شيء ما وتعطيك النتيجة؟

هنا تأتي القيم المرجعة. بدلاً من مجرد عرض شيء ما، يمكن للدالة أن تعيد لك قيمة يمكنك تخزينها في متغير أو استخدامها في أجزاء أخرى من الكود الخاص بك.

لإرسال قيمة مرة أخرى، تستخدم الكلمة المفتاحية return متبوعة بما تريد إرجاعه:

return myVariable;

هناك شيء مهم: عندما تصل الدالة إلى عبارة return، تتوقف فورًا عن التشغيل وترسل تلك القيمة إلى من استدعاها.

لنقم بتعديل دالة الترحيب الخاصة بنا لإرجاع الرسالة بدلاً من طباعتها:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

الآن بدلاً من طباعة الترحيب، تقوم هذه الدالة بإنشاء الرسالة وتعيدها لنا.

لاستخدام القيمة المرجعة، يمكننا تخزينها في متغير تمامًا مثل أي قيمة أخرى:

const greetingMessage = createGreetingMessage('Christopher');

الآن يحتوي greetingMessage على "Hello, Christopher" ويمكننا استخدامه في أي مكان في الكود الخاص بنا – لعرضه على صفحة ويب، تضمينه في بريد إلكتروني، أو تمريره إلى دالة أخرى.

الدوال كمعلمات لدوال أخرى

يمكن تمرير الدوال كمعلمات لدوال أخرى. على الرغم من أن هذا المفهوم قد يبدو معقدًا في البداية، إلا أنه ميزة قوية تتيح أنماط برمجة مرنة.

هذا النمط شائع جدًا عندما تريد أن تقول "عندما يحدث شيء ما، قم بتنفيذ هذا الشيء الآخر." على سبيل المثال، "عندما ينتهي المؤقت، قم بتشغيل هذا الكود" أو "عندما ينقر المستخدم على الزر، قم باستدعاء هذه الدالة."

لنلقِ نظرة على setTimeout، وهي دالة مدمجة تنتظر فترة زمنية معينة ثم تقوم بتشغيل بعض الكود. نحتاج إلى إخبارها بالكود الذي يجب تشغيله – حالة استخدام مثالية لتمرير دالة!

جرب هذا الكود – بعد 3 ثوانٍ، سترى رسالة:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

لاحظ كيف نمرر displayDone (بدون أقواس) إلى setTimeout. نحن لا نستدعي الدالة بأنفسنا – نحن نسلمها إلى setTimeout ونقول "استدعِ هذه الدالة بعد 3 ثوانٍ."

الدوال المجهولة

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

JavaScript يسمح لك بإنشاء دوال مجهولة – دوال بدون أسماء يمكنك تعريفها في المكان الذي تحتاجها فيه.

إليك كيف يمكننا إعادة كتابة مثال المؤقت باستخدام دالة مجهولة:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

هذا يحقق نفس النتيجة، ولكن يتم تعريف الدالة مباشرة داخل استدعاء setTimeout، مما يلغي الحاجة إلى إعلان دالة منفصلة.

دوال السهم

JavaScript الحديث لديه طريقة أقصر لكتابة الدوال تسمى دوال السهم. تستخدم => (التي تبدو كالسهم – فهمت؟) وهي شائعة جدًا بين المطورين.

دوال السهم تتيح لك تخطي الكلمة المفتاحية function وكتابة كود أكثر اختصارًا.

إليك مثال المؤقت الخاص بنا باستخدام دالة السهم:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

الأقواس () هي المكان الذي توضع فيه المعلمات (فارغة في هذه الحالة)، ثم يأتي السهم =>، وأخيرًا جسم الدالة داخل الأقواس المعقوفة. هذا يوفر نفس الوظيفة مع صياغة أكثر اختصارًا.

متى تستخدم كل استراتيجية

متى يجب أن تستخدم كل نهج؟ دليل عملي: إذا كنت ستستخدم الدالة عدة مرات، أعطها اسمًا وقم بتعريفها بشكل منفصل. إذا كانت للاستخدام مرة واحدة، فكر في دالة مجهولة. كلا دوال السهم والصياغة التقليدية خيارات صالحة، على الرغم من أن دوال السهم منتشرة في قواعد الكود الحديثة.

🚀 التحدي

هل يمكنك التعبير في جملة واحدة عن الفرق بين الدوال والطرق؟ جرب ذلك!

تحدي GitHub Copilot Agent 🚀

استخدم وضع الوكيل لإكمال التحدي التالي:

الوصف: قم بإنشاء مكتبة أدوات رياضية تحتوي على دوال رياضية توضح مفاهيم الدوال المختلفة التي تم تغطيتها في هذا الدرس، بما في ذلك المعلمات، القيم الافتراضية، القيم المرجعة، ودوال السهم.

المهمة: قم بإنشاء ملف JavaScript يسمى mathUtils.js يحتوي على الدوال التالية:

دالة add تأخذ معلمين وتعيد مجموعهما
دالة multiply مع قيم افتراضية للمعلمات (المعلم الثاني افتراضيًا 1)
دالة سهم square تأخذ رقمًا وتعيد مربعه
دالة calculate تقبل دالة أخرى كمعلمة ورقمين، ثم تطبق الدالة على هذه الأرقام
قم بتوضيح استدعاء كل دالة بحالات اختبار مناسبة

تعرف على المزيد حول وضع الوكيل هنا.

اختبار ما بعد المحاضرة

المراجعة والدراسة الذاتية

من المفيد قراءة المزيد عن دوال السهم، حيث يتم استخدامها بشكل متزايد في قواعد الكود. قم بممارسة كتابة دالة، ثم إعادة كتابتها باستخدام هذه الصياغة.

الواجب

مرح مع الدوال

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

17 KiB Raw Blame History Unescape Escape