دالات جافا سكريبت: لماذا هي ضرورية للفهم؟ | دليل سهل

مقدمة: ما هي دالات جافا سكريبت؟

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

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

ما هو مثال على داله في جافا سكريبت?

اسم الداله (المعلمة ١ ، المعلمة ٢) {

الخطوات.

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

}

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

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

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

function add(num1, num2) {

  let result = num1 + num2

  console.log(result)

return result

}

يمكن أن تضيف هذه الوظيفة قيمتين ، لكن علينا أولاً استدعاء الدالة بالقيمتين اللتين نريد إضافتهما (القيمه ١ ، القيمه ٢):

add(2, 3)

// output: the return statement should return : 5

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

const addOutput = add(2,3)

// output: the return statement should return the addOutput's variable with : 5

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

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

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

التصريحات

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

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

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

const add = function(num1, num2) {

  let result = num1 + num2

  console.log(result)

  return result

}


add(2,3)

// output: 5

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

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

(function (num1, num2) {

let result = num1 + num2

console.log(result)

})(2,3)

// output: 5
// Notice we didn't have to call the function by a name, also notice the function has no name!

أشياء لتأخذها بالحسبان: دالة الداله التعبيريه

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

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

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

function add() {

let argsTotal = 0

for (let i = 0; i < arguments.length; i++) {

// Here we see that javascript give us an access to the object like array called arguments

argsTotal += arguments[i]

}

return argsTotal

}

const output = add(2,3,1)

console.log(output) // 6

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

function add (...args) {

let argsTotal = args.reduce(function(sum, value) {

return (sum + value)

})

return argsTotal

}

const output = add(2,3,1)

console.log(output)
// output: 6

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

• هذه المصفوفة مثل الكائن ليس لديها وصول إلى بعض أساليب المصفوفات مثل map أو filter أو sort
• أحدث إصدار من جافا سكريبت ، يتيح لك استخدام عامل التشغيل "الباقي" مع المعلمات داخل الداله: الجمع (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:

function doStudyNerd() {

var nerdLevel = "Not Nerd"

console.log(nerdLevel)

}

doStudyNerd()

//output Not Nerd

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

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

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function(data) {

console.log(`${data.blog} ${data.twitter} ${data.reddit}`)

}

}

nerdsInfo.printSocial(nerdsInfo.social)

// output: nerdleveltech.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

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

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function(data) {

console.log(`${this.social.blog} ${this.social.twitter} ${this.social.reddit}`)

}

}

nerdsInfo.printSocial()

// output: nerdleveltech.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

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

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function() {

for (const key in this.social){

console.log(`${key} ${this.social[key]}`)

}

}

}

nerdsInfo.printSocial()

// output:

// blog nerdleveltech.com

// twitter twitter.com/NerdLevelTech

// reddit www.reddit.com/user/NerdLevelTech

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

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

بيان الإرجاع

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

function add (num1, num2) {

return console.log('Add Results: '),

num1 + num2

}

console.log(add(2,3))

// output: Add Results: 5

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

function add (num1, num2) {

return

console.log('Add Results: '),

num1 + num2

}

console.log(add(2,3))

// output: undefined

هل يمكنك إجراء تخمين؟ و لماذا؟

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

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

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

function add (num1, num2) {

return(

console.log('Add Results: '),

num1 + num2

)

}

console.log(add(2,3))
// output: Add Results: 5

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

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