❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتالدوال السهمية

  • مفهوم الدوال السهمية
  • طريقة تعريف دالة سهمية
  • تعريف دالة سهمية ترجع قيمة
  • وضع قيم إفتراضية للباراميترات في الدالة السهمية
  • تعريف دالة سهمية تقبل عدد غير محدد من القيم

مفهوم الدوال السهمية

الدالة السهمية ( Arrow Function ) عبارة دالة تم تعريفها بشكل مختصر.
إذاً هي مجرد أسلوب جديد يمكنك اتباعه لتعريف الدوال بكود أقل.

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

أسلوب الدالة السهمية أضيف في جافاسكربت ابتداءاً من الإصدار ES6.

طريقة تعريف دالة سهمية

هناك العديد من الطرق التي يمكنك اتباعها عند تعريف دالة سهمية و لكن الشكل العام لبنائها هو التالي.

name = (parameters) => {
    statements
}
  • name: مكانها نضع الإسم الذي نريد إعطاؤه للدالة، و الذي من خلاله يمكننا استدعاءها.
  • parameters: هنا يمكنك وضع متغيرات، هذه المتغيرات تمرر لها قيم عند استدعاء الدالة.
  • statements: تعني الأوامر التي سنضعها في الدالة و التي ستتنفذ عند إستدعائها.

في حال كانت الدالة تحتوي أمر واحد فقط فإنه لا داعي لوضع أقواس البداية و النهاية { }.
بالنسبة لأقواس الباراميترات ( ) فإنه يمكن عدم وضعها في حال كانت تحتوي على باراميتر واحد فقط.


في المثال التالي قمنا بتعريف دالة سهمية إسمها demo وضعنا فيها أمر طباعة واحد فقط. بعدها قمنا باستدعائها.

المثال الأول

// demo هنا قمنا بتعريف دالة إسمها
demo = () => {
document.write('My arrow function is called');
}
// حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة
demo();
// demo هنا قمنا بتعريف دالة إسمها demo = () => { document.write('My arrow function is called'); } // حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة demo();
جرب الكود

في المثال التالي لم نضع أقواس البداية و النهاية للدالة demo لأنها تحتوي على أمر واحد فقط.

المثال الثاني

// demo هنا قمنا بتعريف دالة إسمها
demo = () => document.write('My arrow function is called');
// حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة
demo();
// demo هنا قمنا بتعريف دالة إسمها demo = () => document.write('My arrow function is called'); // حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة demo();
جرب الكود

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

المثال الثالث

// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = (name) => {
document.write('Hello ' + name + ', welcome to our company.');
}
// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Mhamad');
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها greeting = (name) => { document.write('Hello ' + name + ', welcome to our company.'); } // name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة greeting('Mhamad');
جرب الكود

في المثال التالي لم نضع أقواس الباراميترات للدالة greeting لأنها تحتوي على أمر باراميتر واحد فقط.

المثال الرابع

// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = name => {
document.write('Hello ' + name + ', welcome to our company.');
}
// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Mhamad');
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها greeting = name => { document.write('Hello ' + name + ', welcome to our company.'); } // name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة greeting('Mhamad');
جرب الكود

في المثال التالي لم نضع أقواس الباراميترات و لا حتى أقواس البداية و النهاية للدالة greeting لأنها تحتوي على باراميتر واحد و أمر باراميتر واحد فقط.

المثال الخامس

// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = name => document.write('Hello ' + name + ', welcome to our company.');
// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Mhamad');
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها greeting = name => document.write('Hello ' + name + ', welcome to our company.'); // name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة greeting('Mhamad');
جرب الكود

تعريف دالة سهمية ترجع قيمة

في الدوال العادية و الدوال السهمية يمكنك استخدام الكلمة return لإرجاع قيمة إلى المكان الذي تم منه استدعاء الدالة.

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


في المثال التالي قمنا بتعريف دالة سهمية إسمها getMessage تحتوي على باراميتر واحد إسمه name يمثل إسم المستخدم. عند استدعائها نمرر لها إسم المستخدم فتقوم بإرجاع نص ترحيبي بإسمه. بعدها قمنا باستدعائها.

المثال الأول

// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها
// name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص
getMessage = name => {
return 'Hello ' + name;
}
// name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة
// 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون
document.write(getMessage('Mhamad'));
// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها // name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص getMessage = name => { return 'Hello ' + name; } // name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة // 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون document.write(getMessage('Mhamad'));
جرب الكود

في المثال السابق استخدمنا الكلمة return عند إرجاع قيمة من الدالة لأنها تملك أقواس بداية و نهاية.


في المثال التالي قمنا بتعريف دالة سهمية إسمها getMessage من جديد و لكننا لم نضع هذه المرة أقواس البداية و النهاية و لذلك لم نضع الكلمة return لأنها سترجع القيمة بشكل تلقائي. بعدها قمنا باستدعائها.

المثال الثاني

// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها
// name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص
getMessage = name => 'Hello ' + name;
// name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة
// 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون
document.write(getMessage('Mhamad'));
// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها // name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص getMessage = name => 'Hello ' + name; // name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة // 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون document.write(getMessage('Mhamad'));
جرب الكود

في المثال التالي قمنا بتعريف دالة سهمية إسمها getSum تحتوي على باراميترين و ترجع قيمة واحدة عندما يتم استدعاءها عبارة عن ناتج جمعهما. بعدها قمنا باستدعائها.

المثال الثالث

// تحتوي على باراميتر واحد getSum هنا قمنا بتعريف دالة إسمها
getSum = (a, b) => a + b;
// b و a مع تمرير قيمتين لها للباراميترين getSum هنا قمنا باستدعاء الدالة
// مع طباعة القيمة التي سترجعها و التي ستكون ناتج جمع 3 و 5، أي 8
document.write(getSum(3, 5));
// تحتوي على باراميتر واحد getSum هنا قمنا بتعريف دالة إسمها getSum = (a, b) => a + b; // b و a مع تمرير قيمتين لها للباراميترين getSum هنا قمنا باستدعاء الدالة // مع طباعة القيمة التي سترجعها و التي ستكون ناتج جمع 3 و 5، أي 8 document.write(getSum(3, 5));
جرب الكود

وضع قيم إفتراضية للباراميترات في الدالة السهمية

جافاسكربت تتيح لك وضع قيم إفتراضية للباراميترات ليتم استخدامها بشكل تلقائي في حال تم استدعاء الدالة و لم يتم تمرير قيم للباراميترات الموضوعة فيها.

القيمة الإفتراضية التي يتم وضعها للباراميتر يقال لها Default Value أو Default Argument.


في المثال التالي قمنا بتعريف دالة سهمية إسمها greeting و فيها باراميترين:

  • الباراميتر الأول إسمه name و لا يملك قيمة إفتراضية.
  • الباراميتر الثاني إسمه language و يملك النص 'English' كقيمة إفتراضية.

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

مثال

// حتى تطبع رسالة ترحيب له name عند إستدعائها يجب أن نمرر لها إسم المستخدم مكان الباراميتر ،greeting هنا قمنا بتعريف دالة إسمها
// هو باراميتر إختياري تحدد من خلاله اللغة التي سيتم طباعة رسالة الترحيب بها، إفتراضياً رسالة الترحيب ستكون بالإنجليزية language
greeting = (name, language='English') => {
switch(language) {
case 'English':
document.write(`Hello ${name}, welcome to harmash.com <br>`);
break;
case 'French':
document.write(`Bonjour ${name}, bienvenue sur harmash.com <br>`);
break;
default:
document.write('Selected language not available! <br>');
}
}
// 'English' و بالتالي ستظل قيمته language بدون تمرير قيمة مكان الباراميتر greeting() هنا قمنا باستدعاء الدالة
greeting('Mhamad');
// 'French' و بالتالي ستصبح قيمته language للباراميتر 'French' مع تمرير القيمة greeting() هنا قمنا باستدعاء الدالة
greeting('Mhamad', 'French');
// حتى تطبع رسالة ترحيب له name عند إستدعائها يجب أن نمرر لها إسم المستخدم مكان الباراميتر ،greeting هنا قمنا بتعريف دالة إسمها // هو باراميتر إختياري تحدد من خلاله اللغة التي سيتم طباعة رسالة الترحيب بها، إفتراضياً رسالة الترحيب ستكون بالإنجليزية language greeting = (name, language='English') => { switch(language) { case 'English': document.write(`Hello ${name}, welcome to harmash.com <br>`); break; case 'French': document.write(`Bonjour ${name}, bienvenue sur harmash.com <br>`); break; default: document.write('Selected language not available! <br>'); } } // 'English' و بالتالي ستظل قيمته language بدون تمرير قيمة مكان الباراميتر greeting() هنا قمنا باستدعاء الدالة greeting('Mhamad'); // 'French' و بالتالي ستصبح قيمته language للباراميتر 'French' مع تمرير القيمة greeting() هنا قمنا باستدعاء الدالة greeting('Mhamad', 'French');
جرب الكود

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

في بعض الأحيان قد تحتاج إلى بناء دالة يمكنها استقبال عدد غير محدد من القيم عند استدعائها. أي مهما كان عدد القيم التي ستمررها لها فإنها يجب أن تعالجهم كلهم.

في جافاسكربت يجب وضع الرمز ... قبل إسم الباراميتر مباشرةً حتى يفهم المفسّر أنه يمكن تمرير عدد غير محدد من القيم مكانه.

الباراميتر الذي يوجد قبله الرمز ... يقال له Rest Parameter.
و عندما يكون عدد القيم التي يمكن تمريرها للباراميتر غير محدد فإنه يقال لهذه القيم Variable-length Arguments.


في المثال التالي قمنا بتعريف دالة سهمية إسمها printAll تقبل عدد غير محدد من القيم عند إستدعائها و ثم تقوم بعرض هذه القيم بواسطة الحلقة for of.
جميع القيم التي سيتم تمريرها لها، سيتم تخزينها في باراميتر واحد إسمه ...args.

المثال الأول

// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة القيم التي مررناها لها printAll هنا قمنا بتعريف دالة إسمها
printAll = (...args) => {
for (let e of args) {
document.write(e + '<br>');
}
}
// مع تمرير 10 قيم لها printAll() هنا قمنا بإستدعاء الدالة
printAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة القيم التي مررناها لها printAll هنا قمنا بتعريف دالة إسمها printAll = (...args) => { for (let e of args) { document.write(e + '<br>'); } } // مع تمرير 10 قيم لها printAll() هنا قمنا بإستدعاء الدالة printAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
جرب الكود

في المثال التالي قمنا بتعريف دالة سهمية إسمها printSum تقبل عدد غير محدد من القيم عند إستدعائها.
الهدف من هذه الدالة طباعة مجموع كل القيم التي يتم تمريرها له.
جميع القيم التي سيتم تمريرها لها، سيتم تخزينها في باراميتر واحد إسمه ...values.

المثال الثاني

// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة ناتج جمع هذه القيم printSum هنا قمنا بتعريف دالة إسمها
printSum = (...values) => {
let total = 0;
for (let val of values) {
total += val;
}
document.write('Total sum = ' + total);
}
// مع تمرير 5 قيم لها printSum() هنا قمنا بإستدعاء الدالة
printSum(1, 2, 3, 4, 5);
// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة ناتج جمع هذه القيم printSum هنا قمنا بتعريف دالة إسمها printSum = (...values) => { let total = 0; for (let val of values) { total += val; } document.write('Total sum = ' + total); } // مع تمرير 5 قيم لها printSum() هنا قمنا بإستدعاء الدالة printSum(1, 2, 3, 4, 5);
جرب الكود

في المثال التالي قمنا بتعريف دالة إسمها printUserScore الهدف منها طباعة إسم الشخص و مجموع النقاط التي أحرزها.

عند إستدعائها يجب أن نمرر لها قيمتين على الأقل:

  • القيمة الأولى تمثل إسم شخص و الذي سنقوم بتخزينه في باراميتر إسمه user.
  • القيمة الثانية أو مجموعة القيم الثانية تمثل نقاط هذا الشخص و التي سنقوم بتخزينها في باراميتر واحد إسمه ...points.

المثال الثالث

// points و نقاطه مكان الباراميتر user عند إستدعائها نمرر لها إسم الشخص مكان الباراميتر printUserScore هنا قمنا بتعريف دالة إسمها
// و عندها ستقوم بحساب مجموع نقاط هذا الشخص و من ثم ستعرض إسمه و إجمالي النقاط التي أحرزها بشكل مرتب
printUserScore = (user, ...points) => {
let total = 0;
for (let point of points) {
total += point;
}
document.write(`${user} score is: ${total}`);
}
// مع تمرير إسم الشخص و 5 قيم (و التي تمثل النقاط التي أحرزها) لها printUserScore() هنا قمنا بإستدعاء الدالة
printUserScore('Mhamad', 3, 5, 4, 2, 6);
// points و نقاطه مكان الباراميتر user عند إستدعائها نمرر لها إسم الشخص مكان الباراميتر printUserScore هنا قمنا بتعريف دالة إسمها // و عندها ستقوم بحساب مجموع نقاط هذا الشخص و من ثم ستعرض إسمه و إجمالي النقاط التي أحرزها بشكل مرتب printUserScore = (user, ...points) => { let total = 0; for (let point of points) { total += point; } document.write(`${user} score is: ${total}`); } // مع تمرير إسم الشخص و 5 قيم (و التي تمثل النقاط التي أحرزها) لها printUserScore() هنا قمنا بإستدعاء الدالة printUserScore('Mhamad', 3, 5, 4, 2, 6);
جرب الكود

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

الدرس التالي❯ ❮الدرس السابق