14 KiB

Raw Blame History

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

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

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

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

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

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

الدوال

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

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

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

صيغة كتابة الدالة تبدو كالتالي:

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

إذا أردت إنشاء دالة لعرض تحية، فقد تبدو كالتالي:

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

كلما أردنا استدعاء (أو تنفيذ) دالتنا، نستخدم اسم الدالة متبوعًا بـ (). من الجدير بالذكر أن دالتنا يمكن تعريفها قبل أو بعد أن نقرر استدعاءها؛ سيجدها مترجم JavaScript لك.

// calling our function
displayGreeting();

NOTE: هناك نوع خاص من الدوال يُعرف بـ الطريقة، والذي كنت تستخدمه بالفعل! في الواقع، رأينا هذا في العرض التوضيحي أعلاه عندما استخدمنا console.log. ما يميز الطريقة عن الدالة هو أن الطريقة مرتبطة بكائن (console في مثالنا)، بينما الدالة تكون مستقلة. ستسمع العديد من المطورين يستخدمون هذه المصطلحات بالتبادل.

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

هناك مجموعة من أفضل الممارسات التي يجب مراعاتها عند إنشاء الدوال:

كما هو الحال دائمًا، استخدم أسماء وصفية لتعرف ما ستفعله الدالة.
استخدم camelCasing لدمج الكلمات.
اجعل دوالك مركزة على مهمة محددة.

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

لجعل الدالة أكثر قابلية للاستخدام، غالبًا ما ترغب في تمرير معلومات إليها. إذا أخذنا مثال displayGreeting أعلاه، فسيعرض فقط Hello, world!. ليس أكثر الدوال فائدة التي يمكن إنشاؤها. إذا أردنا جعله أكثر مرونة، مثل السماح لشخص ما بتحديد اسم الشخص الذي سيتم الترحيب به، يمكننا إضافة معامل. المعامل (يُطلق عليه أحيانًا الحجة) هو معلومات إضافية تُرسل إلى الدالة.

يتم سرد المعاملات في جزء التعريف داخل الأقواس وتُفصل بفواصل كما يلي:

function name(param, param2, param3) {

}

يمكننا تحديث displayGreeting لقبول اسم وعرضه.

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

عندما نريد استدعاء دالتنا وتمرير المعامل، نحدده في الأقواس.

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

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

يمكننا جعل دالتنا أكثر مرونة عن طريق إضافة المزيد من المعاملات. ولكن ماذا لو لم نرغب في طلب تحديد كل قيمة؟ بالعودة إلى مثال التحية، يمكننا ترك الاسم كمعامل مطلوب (نحتاج إلى معرفة من نحييه)، ولكننا نريد السماح بتخصيص التحية نفسها حسب الرغبة. إذا لم يرغب أحد في تخصيصها، فإننا نقدم قيمة افتراضية بدلاً من ذلك. لتوفير قيمة افتراضية للمعامل، نحددها بنفس الطريقة التي نحدد بها قيمة للمتغير - parameterName = 'defaultValue'. لرؤية مثال كامل:

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

عندما نستدعي الدالة، يمكننا بعد ذلك أن نقرر ما إذا كنا نريد تحديد قيمة لـ salutation.

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

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

قيم الإرجاع

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

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

إذا كانت الدالة تُرجع شيئًا ما، يتم استخدام الكلمة المفتاحية return. تتوقع الكلمة المفتاحية return قيمة أو مرجع لما يتم إرجاعه كما يلي:

return myVariable;

يمكننا إنشاء دالة لإنشاء رسالة تحية وإرجاع القيمة إلى المستدعي.

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

عند استدعاء هذه الدالة، سنخزن القيمة في متغير. هذا يشبه تمامًا الطريقة التي نحدد بها متغيرًا لقيمة ثابتة (مثل const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

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

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

كمثال، فكر في setTimeout، الذي يبدأ مؤقتًا وسيقوم بتنفيذ الكود عند اكتماله. نحتاج إلى إخباره بالكود الذي نريد تنفيذه. يبدو هذا كوظيفة مثالية لدالة!

إذا قمت بتشغيل الكود أدناه، بعد 3 ثوانٍ سترى الرسالة 3 seconds has elapsed.

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

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

لنلقِ نظرة أخرى على ما أنشأناه. نحن ننشئ دالة باسم سيتم استخدامها مرة واحدة. مع تعقيد تطبيقنا، يمكننا أن نرى أنفسنا ننشئ الكثير من الدوال التي سيتم استدعاؤها مرة واحدة فقط. هذا ليس مثاليًا. كما اتضح، ليس دائمًا علينا توفير اسم!

عندما نمرر دالة كمعامل، يمكننا تجاوز إنشائها مسبقًا وبدلاً من ذلك بناؤها كجزء من المعامل. نستخدم نفس الكلمة المفتاحية function، ولكن بدلاً من ذلك نبنيها كمعامل.

لنعد كتابة الكود أعلاه لاستخدام دالة مجهولة:

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

إذا قمت بتشغيل الكود الجديد، ستلاحظ أننا نحصل على نفس النتائج. لقد أنشأنا دالة، ولكن لم يكن علينا إعطاؤها اسمًا!

دوال السهم (Fat Arrow Functions)

واحدة من الاختصارات الشائعة في العديد من لغات البرمجة (بما في ذلك JavaScript) هي القدرة على استخدام ما يُعرف بـ دالة السهم أو دالة السهم السمين. تستخدم مؤشرًا خاصًا =>، الذي يبدو كالسهم - ومن هنا جاء الاسم! باستخدام =>، يمكننا تخطي الكلمة المفتاحية function.

لنعد كتابة الكود مرة أخرى لاستخدام دالة السهم السمين:

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

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

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

🚀 التحدي

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

تحدي GitHub Copilot Agent 🚀

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

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

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

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

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

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

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

الواجب

المرح مع الدوال

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

14 KiB Raw Blame History