جافاسكربتالدوال السهمية
- مفهوم الدوال السهمية
- طريقة تعريف دالة سهمية
- تعريف دالة سهمية ترجع قيمة
- وضع قيم إفتراضية للباراميترات في الدالة السهمية
- تعريف دالة سهمية تقبل عدد غير محدد من القيم
مفهوم الدوال السهمية
الدالة السهمية ( Arrow Function ) عبارة دالة تم تعريفها بشكل مختصر.
إذاً هي مجرد أسلوب جديد يمكنك اتباعه لتعريف الدوال بكود أقل.
في هذا الدرس ستتعلم جميع الطرق و الأساليب التي يمكنك من خلالها إنشاء دوال سهمية و التعامل معها.
أسلوب الدالة السهمية أضيف في جافاسكربت ابتداءاً من الإصدار ES6.
طريقة تعريف دالة سهمية
هناك العديد من الطرق التي يمكنك اتباعها عند تعريف دالة سهمية و لكن الشكل العام لبنائها هو التالي.
statements
}
- name: مكانها نضع الإسم الذي نريد إعطاؤه للدالة، و الذي من خلاله يمكننا استدعاءها.
- parameters: هنا يمكنك وضع متغيرات، هذه المتغيرات تمرر لها قيم عند استدعاء الدالة.
- statements: تعني الأوامر التي سنضعها في الدالة و التي ستتنفذ عند إستدعائها.
في حال كانت الدالة تحتوي أمر واحد فقط فإنه لا داعي لوضع أقواس البداية و النهاية { }
.
بالنسبة لأقواس الباراميترات ( )
فإنه يمكن عدم وضعها في حال كانت تحتوي على باراميتر واحد فقط.
في المثال التالي قمنا بتعريف دالة سهمية إسمها demo
وضعنا فيها أمر طباعة واحد فقط. بعدها قمنا باستدعائها.
المثال الأول
// demo هنا قمنا بتعريف دالة إسمها demo = () => { document.write('My arrow function is called'); } // حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة 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 هنا قمنا بتعريف دالة إسمها 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');
تعريف دالة سهمية ترجع قيمة
في الدوال العادية و الدوال السهمية يمكنك استخدام الكلمة return
لإرجاع قيمة إلى المكان الذي تم منه استدعاء الدالة.
ممنوع استخدام الكلمة return
في الدالة السهمية في حال كانت لا تملك أقواس بداية و نهاية.
في الواقع، إذا وضعت قيمة عادية بعد السهم فإنه سيتم إرجاعها بشكل تلقائي إلى المكان الذي تم فيه استدعاء الدالة.
في المثال التالي قمنا بتعريف دالة سهمية إسمها getMessage
تحتوي على باراميتر واحد إسمه name
يمثل إسم المستخدم. عند استدعائها نمرر لها إسم المستخدم فتقوم بإرجاع نص ترحيبي بإسمه. بعدها قمنا باستدعائها.
المثال الأول
// تحتوي على باراميتر واحد 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'));
في المثال التالي قمنا بتعريف دالة سهمية إسمها getSum
تحتوي على باراميترين و ترجع قيمة واحدة عندما يتم استدعاءها عبارة عن ناتج جمعهما. بعدها قمنا باستدعائها.
المثال الثالث
// تحتوي على باراميترين 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');
تعريف دالة سهمية تقبل عدد غير محدد من القيم
في بعض الأحيان قد تحتاج إلى بناء دالة يمكنها استقبال عدد غير محدد من القيم عند استدعائها. أي مهما كان عدد القيم التي ستمررها لها فإنها يجب أن تعالجهم كلهم.
في جافاسكربت يجب وضع الرمز ...
قبل إسم الباراميتر مباشرةً حتى يفهم المفسّر أنه يمكن تمرير عدد غير محدد من القيم مكانه.
الباراميتر الذي يوجد قبله الرمز ...
يقال له 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);
في المثال التالي قمنا بتعريف دالة سهمية إسمها 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);
في المثال التالي قمنا بتعريف دالة إسمها 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);
عند وضع باراميتر في الدالة يقبل أكثر من قيمة فإنه يجب وضعه دائماً كآخر باراميتر فيها و إلا سيسبب ذلك خطأ في الكود.