JS / الدوال السهمية

الناشر :كودا فوكس -

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

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

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

JS - الدوال السهمية


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

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

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

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// demo هنا قمنا بتعريف دالة إسمها
demo = () => {
    document.write('My arrow function is called');
}

// حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة
demo();
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// demo هنا قمنا بتعريف دالة إسمها
demo = () => document.write('My arrow function is called');

// حتى يتم تنفيذ الأمر الموضوع فيها demo هنا قمنا باستدعاء الدالة
demo();
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = (name) => {
    document.write('Hello ' + name + ', welcome to our company.');
}

// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Ahmed');
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = name => {
    document.write('Hello ' + name + ', welcome to our company.');
}

// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Ahmed');
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميتر واحد greeting هنا قمنا بتعريف دالة إسمها
greeting = name => document.write('Hello ' + name + ', welcome to our company.');

// name مع تمرير قيمة لها للباراميتر greeting هنا قمنا باستدعاء الدالة
greeting('Ahmed');
        </script>
    </body>
</html>

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها
// name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص
getMessage = name => {
    return 'Hello ' + name;
}

// name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة
// 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون
document.write(getMessage('Ahmed'));
        </script>
    </body>
</html>

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


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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميتر واحد getMessage هنا قمنا بتعريف دالة إسمها
// name و يليه قيمة 'Hello ' عند استدعاء هذه الدالة فإنها ترجع النص
getMessage = name => 'Hello ' + name;

// name مع تمرير إسم المستخدم لها للباراميتر getMessage هنا قمنا باستدعاء الدالة
// 'Hello Mhamad' و من ثم طباعة النص الذي سترجعه و الذي سيكون
document.write(getMessage('Ahmed'));
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// تحتوي على باراميترين getSum هنا قمنا بتعريف دالة إسمها
// عند استدعاء هذه الدالة فإنها ترجع مجموع العددين اللذين يتم تمريرهما لها
getSum = (a, b) => a + b;

// b و a مع تمرير قيمتين لها للباراميترين getSum هنا قمنا باستدعاء الدالة
// مع طباعة القيمة التي سترجعها و التي ستكون ناتج جمع 3 و 5، أي 8
document.write(getSum(3, 5));
        </script>
    </body>
</html>

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

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

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


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

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

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

مثال

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

// 'English' و بالتالي ستظل قيمته language بدون تمرير قيمة مكان الباراميتر greeting() هنا قمنا باستدعاء الدالة
greeting('AhmedAl-Atris');

// 'French' و بالتالي ستصبح قيمته language للباراميتر 'French' مع تمرير القيمة greeting() هنا قمنا باستدعاء الدالة
greeting('AhmedAl-Atris', 'French');
        </script>
    </body>
</html>

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

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة القيم التي مررناها لها 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);
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// عند إستدعائها يمكننا تمرير عدد غير محدد من القيم لها. بعدها ستقوم بطباعة ناتج جمع هذه القيم 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);
        </script>
    </body>
</html>

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

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

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
    <body>
        <script>
// 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('AhmedAl-Atris', 3, 5, 4, 2, 6);
        </script>
    </body>
</html>

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

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال