مقدمة : ما هي وظائف JavaScript؟

وظيفة JavaScript هي كتلة من التعليمات البرمجية التي تؤدي مهمة محددة . يتم استخدامها لتقسيم الكود وتنظيمه إلى أجزاء يمكن التحكم فيها. يمكن استخدام الوظائف لإنشاء كائنات مخصصة وفلاتر وأشياء أخرى كثيرة.

JavaScript باستخدام الكلمة الأساسية للوظيفة متبوعة باسم الوظيفة وزوج من الأقواس يحتوي على صفر أو أكثر من المعلمات المفصولة بفواصل (أو الوسائط). ستكون قائمة معلمات الوظيفة بين هذين القوسين (). المعلمات اختيارية ويمكن أن نسميها متغيرات داخل وظائف a. يتم وضع جسم الوظيفة في أقواس معقوفة {} ، والتي قد تتضمن عبارة واحدة أو أكثر بداخلها.

ما هو مثال على وظيفة في JavaScript ؟

اسم الوظيفة (المعلمة 1 ، المعلمة 2) {

صياغات؛

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

}

دعنا نقسمها إلى:

• الكلمة الدالة
• الاسم بعد الكلمة الأساسية
• معلمات اختيارية
• العبارات التي تحمل المهام
• عودة الكلمة للحصول على بعض الإخراج

لنقم الآن بإنشاء مثال حقيقي ، فلنبدأ بدالة يمكنها إضافة رقمين:

الوظيفة add (num1، num2) {let result = num1 + num2 console.log (result) return result}

يمكن أن تضيف هذه الوظيفة قيمتين ، لكننا نحتاج أولاً إلى استدعاء الدالة بالقيمتين اللتين نريد إضافتهما (Argument1 ، Argument 2):

add (2، 3) // output: يجب إرجاع تعليمة الإرجاع: 5

شيء جيد آخر من JavaScript هو أنه يتيح لك الاحتفاظ بإخراج دالة في متغير ، لذلك بدلاً من الإضافة (2،3) يمكننا كتابة:

const addOutput = add (2،3) // output: يجب أن تُرجع تعليمة الإرجاع متغير addOutput بـ: 5

مع ذلك ، قمت بتخزين قيمة الوظيفة في متغير وليس لدي كل مرة لاستدعاء الوظيفة بنفس الوسيطات التي تم تمريرها للحصول على نفس الإخراج. بدلاً من ذلك ، استخدم فقط متغير addOutput الذي سيخزن القيمة المرجعة للدالة المضافة.

أشياء لتأخذها بالحسبان:

• أسماء المتغيرات حساسة لحالة الأحرف. addoutput يختلف عن addOutput ، نستخدم حالة الجمل في جافا سكريبت. ابدأ بحرف أقل من كل كلمة أخرى ، ننتقل إلى الحرف العلوي الأول فقط.
• باستخدام الأسماء الوصفية ، تجنب أسماء x أو y أو z للمعلمات وأسماء الوظائف.
• كتابة الوظيفة تسمى إعلان الوظيفة
• استدعاء الوظيفة تسمى استدعاء أو استدعاء الوظيفة

الإعلانات

قم بتعريف دالة تسمى تعبيرًا

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

هذه هي الطريقة:

إضافة const = الوظيفة (num1، num2) {let نتيجة = num1 + num2 console.log (نتيجة) إرجاع نتيجة} إضافة (2،3) // الإخراج: 5

الدالة التي تسمى IIFE (استدعاء التعبير الوظيفي فورًا)

IIFE هو نوع من الوظائف التي نحتاج إلى كتابتها عندما نريد تشغيل الدالة أو استدعائها أو استدعائها على الفور.

(الوظيفة (num1، num2) {let result = num1 + num2 console.log (result)}) (2،3) // output: 5 // لاحظ أنه لم يكن علينا استدعاء الوظيفة بالاسم ، لاحظ أيضًا الوظيفة ليس لها اسم!

أشياء يجب وضعها في الاعتبار مع الوظيفي :

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

معلمات جافا سكريبت:

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

الوظيفة add () {let argsTotal = 0 لـ (let i = 0؛ i <arguments.length؛ i ++) {// هنا نرى أن جافا سكريبت تمنحنا وصولاً إلى كائن مثل المصفوفة التي تسمى الوسيطات argsTotal + = arguments [i] } return argsTotal} const output = add (2،3،1) console.log (output) // 6

مع الإصدار الأخير من JavaScript ، حصلنا على هدية أخرى تسمى العامل الباقي. هذا في الأساس يعطينا ما تفعله الوسيطات (كائن يشبه المصفوفة) ، ولكن بطريقة أفضل. وبطريقة أفضل ، أعني أنه لدي الآن مصفوفة يمكنني استخدام جميع طرق المصفوفة بها ، مثل sort () أو filter () أو map () أو تقليل ().

الدالة add (... args) {let argsTotal = args.reduce (function (sum، value) {return (sum + value)}) إرجاع argsTotal} const output = add (2،3،1) console.log (output ) // الإخراج: 6

أشياء يجب وضعها في الاعتبار حول المعلمات:

• هذه المصفوفة مثل الكائن ليس لديها وصول إلى بعض أساليب المصفوفات مثل الخريطة أو التصفية أو الفرز
• أحدث إصدار من جافا سكريبت ، يتيح لك استخدام عامل التشغيل الباقي مع المعلمات الأخيرة داخل الوظيفة: إضافة وظيفة (num1، num2،… args) {} - أو لمجرد البساطة: وظيفة add (… args) {}
• يمكن لمعلمات الباقي هذه قبول عدد لا حصر له من الوسائط ، ويجب أن تكون دائمًا في نهاية قائمة المعلمات
• في حين أن كائن Arguments ليس مصفوفة حقيقية ، فإن باقي معاملات المصفوفة هي ويمكنك استخدام كل طرق المصفوفة معها
• عندما أمرر الكائن كحجة؟ عندما أحتاج إلى تمرير قيمة من خلال الإشارة ولا أهتم بترتيب الحجج

نِطَاق

لفهم النطاق ، نحتاج إلى إلقاء نظرة على متغير. تحتاج إلى معرفة مكان الإعلان عنه ؟، بما أعلن ؟. حيث أعني على أي كتلة {} أو أي سطر. بما أعنيه بكلمة رئيسية (كلمات رئيسية var أو let أو const) أو ما إذا كانت عبارة عن إعلان أو تعبير عادي. لنفترض فقط عدم استخدام الكلمة الرئيسية "var" 🙂

على الرغم من أنني طلبت عدم استخدامه ، إلا أنك ستواجه بالتأكيد رمزًا يستخدمه. لذلك ، يجب أن تكون على دراية بها لتجنب أي مشاكل.

var nerdLevel = "nerd" function doStudy () {nerdLevel = "not nerd" console.log (nerdLevel)} doStudy () // output: not nerd

في المثال السابق متغير nerdLevel المحدد في النطاق العام ، لاحظ أننا لم نعلن عنه داخل الوظيفة ، ومع ذلك يمكننا استخدامه وتغيير قيمته.

في المثال التالي ، نستخدم متغير nerdLevel في نطاق الوظيفة باستخدام "var":

الوظيفة doStudyNerd () {var nerdLevel = "Not Nerd" console.log (nerdLevel)} doStudyNerd () // output Not Nerd

دعنا نلقي نظرة الآن على الإعلانات المتغيرة للكلمات الرئيسية لنطاق الكتلة فقط: let and const. في المثال التالي يمكننا تغيير let to const وسوف نحصل على نفس النتيجة. ومع ذلك ، نحتاج فقط إلى استخدام const إذا علمنا أن قيمتها لن تتغير. ومن هنا جاء اسم const من ثابت. أو يمكننا استخدامه لكائن المراجع التي تم تمريرها مثل المصفوفات والوظائف.

دعونا nerdLevel = "nerd" function doStudy () {let nerdLevel = "not nerd" console.log (nerdLevel)} doStudy () // output: not nerd console.log (nerdLevel) // output: nerd

لا ينبغي السماح بهذين المتغيرين اللذين يحملان الاسم نفسه ، ولكن إذا لاحظت نفس الاسم ، نعم ، لكنه يظهر في مناسبات مختلفة. ومن ثم ، فإن النطاق مختلف وليس هو نفسه. في المرة الأولى التي يظهر فيها ، كان ضمن النطاق العالمي ، لذلك عندما تسميه في النطاق العالمي ، فإنه يظهر قيمة "الطالب الذي يذاكر كثيرا".

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

أشياء يجب وضعها في الاعتبار بشأن النطاق:

• إذا لم تستخدم كلمة أساسية للإعلان مثل let أو var أو const ، فستفترض جافا سكريبت أنك تريد استخدام var

الرفع

الرفع هو عملية نقل إعلان متغير إلى أعلى نطاقه المحتوي ، من أجل إتاحته في أسرع وقت ممكن.

إذا كان لديك وظيفة معلنة في السطر رقم 300 ولكنك قمت باستدعاءها بالفعل أو استدعاء هذه الوظيفة نفسها في السطر رقم 100.

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

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

أشياء يجب مراعاتها حول الرفع:

• Keyword const هي نفسها مثل let keyword ، لكن تستخدم const إذا أردنا استخدام قيمة ثابتة أو استخدام تعبير تصريح.
• تكون التصريحات العادية للوظيفة مثل var · سيتم رفعها ، بينما لا يتم رفعها عن التعبيرات الوظيفية.

طُرق

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

الكلمة الأساسية هذا

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

const nerdsInfo = {social: {blog: "ahmedr12.sg-host.com"، twitter: "twitter.com/NerdLevelTech"، reddit: "www.reddit.com/user/NerdLevelTech"}، printSocial: function (data) {console.log (`` $ {data.blog} $ {data.twitterdit} $}) o.social) // الإخراج: ahmedr12.sg-host.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

ولكن باستخدام الكلمة الأساسية ، يمكننا القيام بذلك بدلاً من ذلك:

const nerdsInfo = {social: {blog: "ahmedr12.sg-host.com"، twitter: "twitter.com/NerdLevelTech"، reddit: "www.reddit.com/user/NerdLevelTech"}، printSocial: function (data) {console.log (`$ {this.social.blog} $ {this.social}) o.printSocial () // الإخراج: ahmedr12.sg-host.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

وإذا لم نرغب في تحسين الكود قليلاً وجعله مثالاً عمليًا أكثر ، فيمكننا كتابة ما يلي:

const nerdsInfo = {social: {blog: "ahmedr12.sg-host.com"، twitter: "twitter.com/NerdLevelTech"، reddit: "www.reddit.com/user/NerdLevelTech"}، printSocial: function () {for (const key in this.social) {console.log (`$ {` `Keyocial} $ n ) // الإخراج: // blog ahmedr12.sg-host.com // twitter twitter.com/NerdLevelTech // reddit www.reddit.com/user/NerdLevelTech

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

• إذا استخدمنا الكلمة الأساسية هذه في نطاق وظيفة ، فإننا نعني الكائن العام في ذلك الوقت
• إذا استخدمنا الكلمة الأساسية هذه ضمن نطاق الكائن ، فإننا نعني ذلك الكائن في ذلك الوقت

بيان العودة

يمثل إرجاع الكلمة الأساسية نتائج دالة بعد إرجاع النتائج ، ويتم تنفيذ هذه الوظيفة. بمعنى آخر ، ينهي تنفيذ الوظيفة

الوظيفة add (num1، num2) {return console.log ('Add Results:')، num1 + num2} console.log (add (2،3)) // output: Add Results: 5

ماذا لو اتخذنا خطًا جديدًا بعد العودة؟ ماذا تعتقد ستكون نتائج الكود؟

الوظيفة add (num1، num2) {return console.log ('Add Results:')، num1 + num2} console.log (add (2،3)) // output: undefined

هل يمكنك عمل تخمين متعلم؟ و لماذا؟

سبب النتيجة غير المحددة هو أن المترجم يضع تلقائيًا في نهاية كل سطر الفاصلة المنقوطة "؛"

لذلك عندما يفترض المترجم أن هذه هي نهاية السطر ، فسيتم إرجاعه فقط ؛ وهذا بالطبع يعود غير محدد.

أنت الآن بحاجة إلى تضمين الأقواس كما يلي:

الوظيفة add (num1، num2) {return (console.log ('Add Results:')، num1 + num2)} console.log (add (2،3)) // output: Add Results: 5

أشياء يجب وضعها في الاعتبار حول بيان الإرجاع:

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