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

تشرح هذه المقالة الدوال في جافاسكريبت۔

YouTube Video

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

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

طرق تعريف الدوال

تصريح الدالة

يمكن تعريف الدوال باستخدام الكلمة المفتاحية function۔ تصريحات الدوال يتم رفعها قبل تشغيل الكود، لذا يمكن استدعاؤها قبل تعريفها۔

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

في هذا المثال، نظرًا لأن دالة greet تم استدعاؤها قبل تصريحها، يتم عرض Hello, Everyone و Hello, Alice۔

تعريف الدالة بالتعبير

يمكن أيضًا تعريف الدوال عن طريق إسنادها إلى متغير۔ في هذه الحالة، لا يتم رفع الدالة ولا يمكن استدعاؤها إلا بعد تعريفها۔

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

في هذا المثال، سيتم عرض Hello, Bob۔

دالة السهم

دوال السهم هي طريقة لتعريف الدوال باستخدام صياغة أقصر۔ تكون مفيدة بشكل خاص عند استخدام الدوال المجهولة (الدوال التي ليس لها اسم)۔ تتصرف دوال السهم بشكل مختلف فيما يتعلق بالكلمة المفتاحية this۔

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

يمكن تعريف الدوال كـ greet و greetShort في هذا المثال۔ إذا كانت الدالة عبارة عن سطر واحد، يمكنك حذف الأقواس {} كما في greetShort۔

عناصر الدالة

المعاملات

القيم التي يتم تمريرها إلى الدالة تُسمّى المعاملات۔ من خلال تحديد المعاملات عند تعريف دالة، يمكنك تمرير القيم عند استدعاء الدالة۔

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

الوسائط الافتراضية

يمكنك تحديد قيمة افتراضية إذا لم يتم تمرير قيمة إلى الوسائط۔

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

في هذا المثال، إذا تم استدعاء greet()، سيتم استخدام القيمة الافتراضية Guest۔

القيمة المعادة

يمكنك إرجاع قيمة معادة من الدالة باستخدام عبارة return۔ إذا لم تكن هناك عبارة return، فإن الدالة تعيد undefined۔

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

في هذا المثال، بما أن greet لا تعيد قيمة، فإن القيمة المعادة هي undefined۔

الدالة المجهولة

الدالة التي لا تحتوي على اسم تُسمى دالة مجهولة۔ غالبًا ما تُستخدم كتعبيرات دوال أو كدوال ذات السهم۔

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

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

تعبير الدالة المفعلة فوراً (IIFE) هو دالة يتم تنفيذها بمجرد تعريفها۔ عادةً ما تُستخدم للتحكم في النطاق (scope)۔

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

يتم تنفيذها بمجرد إعلانها۔

الدالة الاستدعائية

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

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

في هذا المثال، يتم تمرير دالة تطبع قيمة إلى وحدة التحكم كدالة استدعائية۔

الدالة التكرارية

استدعاء الدالة لنفسها يُسمى التكرار، والدالة التي تنفذ عملية متكررة باستخدام هذا تُسمى دالة تكرارية۔ على سبيل المثال، يمكن تنفيذ دالة لحساب مضروب العدد باستخدام التكرار كما يلي۔

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

في هذا المثال، سيتم عرض مضروب العدد 5، والذي هو 120۔

الكلمة المفتاحية this

this المستخدمة داخل الدالة تشير إلى الكائن الذي تشير إليه الدالة۔ في الدوال العادية، تشير إلى الكائن الذي استدعاها، ولكن في دوال السهم تحتفظ بـ this الخاصة بالنطاق الذي تم تعريفها فيه۔

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

يتم تعريف greet في متغير obj باستخدام الكلمة الأساسية function۔ لذلك، تشير الكلمة الأساسية this إلى الكائن الخاص بمتغير obj۔ من جهة أخرى، يتم تعريف greet في متغير obj2 باستخدام وظيفة السهم۔ لذلك، تشير الكلمة الأساسية this إلى الكائن في النطاق الخارجي وتكون undefined في هذا المثال۔

نطاق الدوال والإغلاقات

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

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

في هذا المثال، يمكن للدالة inner الوصول إلى المتغير outerVar لأنها تحتفظ بالنطاق الذي تم تعريف الدالة فيه۔

الملخص

• هناك طرق مختلفة لتعريف الدوال، بما في ذلك تصريحات الدوال، تعبيرات الدوال، ودوال السهم۔
• يمكن للدوال أن تأخذ معاملات وتُرجع قيمًا۔
• هناك استخدامات خاصة مثل دوال الاسترجاع والدوال التكرارية۔
• يجب الانتباه عند التعامل مع this، حيث تتصرف دوال السهم والدوال العادية بشكل مختلف۔
• يمكن استخدام الإغلاقات للوصول إلى المتغيرات الداخلية من خارج النطاق۔

الدوال هي واحدة من المفاهيم المهمة في JavaScript، التي تستفيد من بنيتها المرنة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video