History

leestott 53ebf5aeb8 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

أساسيات 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"

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

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

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

إذا كانت الدالة تُرجع شيئًا، يتم استخدام الكلمة المفتاحية 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 التقليدية، فهذا يعود إليك، ولكنك ستلاحظ أن معظم المطورين الحديثين يفضلون =>.

🚀 التحدي

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

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

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

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

الواجب

مرح مع الدوال

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