مصطلحات الدوال في JavaScript: الـ Parameters والـ Arguments والـ Declaration والـ Initialization والـ Execution Context والـ Lexical Environment

- الفرق بين الParameters والArguments هو أن الParameters هي المتغيرات التي تحدد في تعريف الFunction، بينما الArguments هي القيم التي تمرر إلى الFunction عند استدعائها. مثلا، في الFunction التالية:

function add(x, y) {
  return x + y;
}

x و y هما Parameters، وعندما نستدعي الFunction بهذه الطريقة:

add(3, 5);

3 و 5 هما Arguments.

- الفرق بين الDeclaration والInitialization هو أن الDeclaration هو إعلان اسم ونوع المتغير أو الFunction دون تحديد قيمته، بينما الInitialization هو تعيين قيمة مبدئية للمتغير أو الFunction. مثلا، في هذا المثال:

var x; // declaration
x = 10; // initialization
function square(n) { // declaration and initialization
  return n * n;
}

- الExecution Context هو بيئة تشغيل للكود في لغة برمجة معينة. يحدد ما هي المتغيرات والFunctions والObjects المتاحة للكود في ذلك الوقت. عادة، يوجد Execution Context عام للبرنامج ككل، وExecution Contexts محلية لكل Function تستدعى. مثلا، في هذا المثال:

var x = 10; // global variable
function add(y) { // global function
  var z = 5; // local variable
  return x + y + z;
}
console.log(add(7)); // 22
console.log(z); // error: z is not defined

الExecution Context العام يحتوي على المتغير x والFunction add، بينما Execution Context للFunction add يحتوي على المتغير y (الذي يأخذ قيمة Argument) والمتغير z (الذي يعرف داخل الFunction). عندما نستدعي add(7)، يتم إنشاء Execution Context جديد للFunction add ويتم تشغيل كودها داخله. عندما نحاول طباعة قيمة z خارج الFunction، نحصل على خطأ لأن z غير معرف في Execution Context العام.

- الLexical Environment هو مفهوم مرتبط بالExecution Context، وهو يشير إلى كيفية تحديد مجال (Scope) المتغيرات والFunctions في لغة برمجة معينة. يعتمد الLexical Environment على كيفية كتابة الكود (Lexical Structure)، وليس على كيفية تشغيله (Dynamic Structure). مثلا، في هذا المثال:

var x = 10; // global variable
function foo() { // global function
  var y = 20; // local variable in foo
  function bar() { // local function in foo
    var z = 30; // local variable in bar
    console.log(x + y + z); // 60
  }
  bar(); // call bar
}
foo(); // call foo

الLexical Environment يحدد أن المتغير x متاح للFunctions foo و bar، وأن المتغير y متاح فقط للFunction foo و bar (ولكن ليس للبرنامج الرئيسي)، وأن المتغير z متاح فقط للFunction bar (ولكن ليس للFunction foo أو للبرنامج الرئيسي). هذه التراتبية في المجالات تسمى Lexical Scoping أو Static Scoping.

• الفرق بين الParameters والArguments:

في هذا المثال، لدينا دالة تسمى "addNumbers" تقوم بإضافة رقمين وإرجاع النتيجة:

function addNumbers(num1, num2) { return num1 + num2; }

يتم تعريف المتغيرات num1 و num2 كـ parameters في تعريف الدالة. وعند استدعاء الدالة، يتم تمرير الـ arguments وهي القيم الفعلية التي يتم إدخالها إلى الدالة، كما هو موضح في المثال التالي:

var result = addNumbers(5, 10); console.log(result); // النتيجة هي 15

في هذا المثال، يتم تعريفالـ parameters num1 و num2 في تعريف الدالة "addNumbers". وعند استدعاء الدالة باستخدام الـ arguments 5 و 10، تتم إسناد القيم 5 و 10 إلى المتغيرات num1 و num2 على التوالي، وتقوم الدالة بإضافة المتغيرين وإرجاع النتيجة 15.

• الفرق بين الDeclaration والInitialization:

في هذا المثال، لدينا متغير يسمى "name" يتم تعريفه في الكود وإسناد قيمة له في وقت لاحق:

var name; name = "John"; console.log(name); // النتيجة هي "John"

في هذا المثال، يتم استخدام الـ Declaration لتعريف المتغير "name" دون تحديد قيمة محددة له. ويتم استخدام الـ Initialization لإسناد القيمة "John" إلى المتغير "name" في الوقت الذي يتم فيه تعريفه، ويتم ذلك باستخدام علامة الـ "=" لإسناد قيمة "John" إلى المتغير "name". وبعد ذلك، يتم طباعة قيمة المتغير باستخدام console.log()، وتكون النتيجة "John".

• الـ Execution Context:

في هذا المثال، لدينا دالة تسمى "greet" تقوم بطباعة رسالة ترحيب باستخدام المتغير "name":

function greet(name) {
  console.log("Hello, " + name + "!");
}

var message = "Welcome to my website!";
greet("John");

عند استدعاء الدالة "greet" باستخدام الـ argument "John"، يتم إنشاء Execution Context جديد يحتوي على المتغيرات التالية:

المتغير "name" الذي تم تعريفه كـ parameter في دالة "greet".

المتغير "message" الذي تم تعريفه في المستوى العلوي من الكود.

يتم إنشاء Lexical Environment جديد لكل Execution Context، والذي يحتوي على الـ Identifier bindings التي تم تعريفها في هذا النطاق. في هذا المثال، يتم الوصول إلى المتغير "name" من خلال Lexical Environment الخاص بـ Execution Context الذي تم إنشاؤه لدالة "greet"، بينما يتم الوصول إلى المتغير "message" من خلال Lexical Environment العلوي للكود.

•  الـ Lexical Environment:

في هذا المثال، لدينا دالة تسمى "calculateArea" تقوم بحساب مساحة المستطيل باستخدام المتغيرات "width" و "height":

ini

function calculateArea(width, height) {
  var area = width * height;
  return area;
}

var width = 5;
var height = 10;
var result = calculateArea(width,height);
console.log(result); // النتيجة هي 50

في هذا المثال، يتم تعريف المتغيرات "width" و "height" في المستوى العلوي من الكود، وتتم إسناد القيم 5 و 10 إلى المتغيرات على التوالي. وعند استدعاء الدالة "calculateArea" باستخدام الـ arguments "width" و "height"، يتم إنشاء Execution Context جديد يحتوي على المتغيرات التالية:

المتغير "width" الذي تم تعريفه في المستوى العلوي من الكود.

المتغير "height" الذي تم تعريفه في المستوى العلوي من الكود.

المتغير "area" الذي يتم تعريفه داخل الدالة "calculateArea".

يتم إنشاء Lexical Environment جديد لكل Execution Context، والذي يحتوي على الـ Identifier bindings التي تم تعريفها في هذا النطاق. في هذا المثال، يتم الوصول إلى المتغيرات "width" و "height" من خلال Lexical Environment العلوي للكود، بينما يتم الوصول إلى المتغير "area" من خلال Lexical Environment الخاص بـ Execution Context الذي تم إنشاؤه لدالة "calculateArea". وتتم إدارة المتغيرات في هذه الـ Lexical Environment، ويتم الوصول إليها من خلال الـ Execution Context الخاص بها.

يمكنك الإطلاع على المزيد من المعلومات من خلال المقالة التالية

الفرق بين الـ Parameters والـ Arguments:

Parameters (المعاملات): هي المتغيرات التي يتم تعريفها في تعريف الدالة وتستخدم لاستقبال القيم التي يتم تمريرها عند استدعاء الدالة.

Arguments (الوسائط أو الوسائط الفعلية): هي القيم الفعلية التي يتم تمريرها للدالة عند استدعائها. وتكون الوسائط الفعلية قيم حقيقية يتم تمريرها للدالة بناءً على المعاملات المحددة في تعريف الدالة.

الفرق بين الـ Declaration والـ Initialization:

Declaration (التصريح): هو عملية إعلان المتغير أو الدالة دون تعيين قيمة أو تنفيذها. عند قيامك بإعلان متغير، فإنك تعلن عن وجوده ونوعه، ولكن لا يحتوي على قيمة محددة.

Initialization (التهيئة): هو عملية تعيين قيمة لمتغير بعد تصريحه. عند تهيئة متغير، تعين قيمة محددة له.

الـ Execution Context (سياق التنفيذ):

Execution Context هو البيئة التي يتم فيها تنفيذ قطعة من الكود في لغة البرمجة. يتم إنشاء Execution Context لكل جزء من الكود الذي يتم تنفيذه ويحتوي على معلومات حول المتغيرات المتاحة ونطاقها والدوال المتاحة ونقطة تنفيذ الكود الحالية.

الـ Lexical Environment (البيئة اللغوية):

Lexical Environment هو جزء من Execution Context ويحتوي على معلومات حول المتغيرات المحلية والمتغيرات العامة المتاحة في النطاق اللغوي الحالي. ويتم استخدام البيئة اللغوية لحل الروابط بين المتغيرات والدوال وتحديد الوصول إليها.

 سأوضح لك المصطلحات بالتفصيل وأمثلة لتوضيح الأفكار.

 الفرق بين الـ Parameters والـ Arguments

• Parameters: المتغيرات التي يتم تعريفها في تعريف الدالة وتستخدم لتمرير القيم إلى الدالة، وشير إلى المتغيرات التي يتعامل معها الدالة في داخلها.
• Arguments: القيم الفعلية التي يتم تمريرها إلى الدالة عند استدعائها، وتشير إلى القيم التي تمررها عند استخدام الدالة.

مثال:

لنفترض أن لدينا دالة بسيطة تسمى "add" تقوم بإجراء عملية جمع بين اثنين من الأرقام، حيث a و b هما parameters، أما الأرقام المحددة مثل 3 و 5 فهي arguments.

function add(a, b) {  // a و b هما parameters
    return a + b;
}

const result = add(3, 5);  // 3 و 5 هما arguments
console.log(result);  // الناتج سيكون 8

الفرق بين الـ Declaration والـ Initialization

• Declaration: يتعلق بتعريف متغير أو دالة أو كائن بشكل عام، حيث يتم إعلان وجوده وتحديد نوعه واسمه، ولكن لا يتم تعيين قيمة محددة له في هذه المرحلة.
• Initialization: يتعلق بتعيين قيمة محددة لمتغير بعد تعريفه، أي تخصيص قيمة بداية للمتغير.

مثال:

في JavaScript، تستطيع إعلان المتغير باستخدام الكلمة الرئيسية var أو let أو const، ويمكنك تعيين القيمة باستخدام عامل التعيين =.

let x;  // هنا نقوم بالإعلان عن المتغير x
x = 5;  // هنا نقوم بتعيين قيمة 5 للمتغير x

الـ Execution Context

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

مثال:

عند استدعاء الدالة، يتم إنشاء Execution Context جديد يحتوي على المتغيرات المحلية والمعلومات اللازمة لتنفيذ الدالة.

وعند انتهاء التنفيذ، يتم إزالة Execution Context ويعود التنفيذ إلى السياق السابق.

function outer() {
    const x = 5;

    function inner() {
        console.log(x);
    }

    inner();
}

outer();  // سيتم طباعة قيمة 5

في المثال السابق، الدالة الداخلية inner يمكنها الوصول إلى المتغير x المعرف في البيئة الخارجية (outer)، لأن Execution Context يحتفظ بالارتباط بين الدوال والقيم المرتبطة بها في نطاق الكود.

الـ Lexical Environment

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

مثال:

في JavaScript، يتم تشكيل الـ Lexical Environment عند تحديد النطاقات اللغوية.

أي عند البحث عن قيمة متغير، يتم البحث في Lexical Environment الحالي وفي البيئات الأبوية حتى يتم العثور على القيمة.

function outer() {
    const  x = 5;

    function inner() {
        console.log(x);
    }

    inner();
}

outer();  // سيتم طباعة قيمة 5

هنا الدالة الداخلية inner يمكنها الوصول إلى المتغير x المعرف في البيئة اللغوية الخارجية (outer)، لأن Lexical Environment يحتفظ بالارتباط بين الدوال والقيم المرتبطة بها في نطاق الكود.

• شرح الدوال في JavaScript من موسوعة حسوب

سأجيب على أسئلتك بأسلوب بسيط يسهل فهمه مع أمثلة بلغة الجافاسكربت للتوضيح.

1. يتم استخدام الـ parameters في تعريف الدالة، وهي المتغيرات التي تأخذ قيمة من الـ arguments الممررة للدالة عند استدعائها. على سبيل المثال، إذا كان لدينا دالة لإضافة رقمين، فإن الرقمين هما parameters. أما الـ arguments، فيتم استخدامها عند استدعاء الدالة لتمرير البيانات إلى الدالة:

function addNumbers(num1, num2) {
  return num1 + num2;
}

addNumbers(5, 10); // هنا قمنا بإرسال الـ arguments 5 و 10 إلى الدالة addNumbers والتي ستقوم بإضافتهما

2. الـ declaration هو عندما تقوم بتعريف المتغير أو الدالة في الكود، في حين أن الـ initialization هو عندما تقوم بتعيين قيمة للمتغير في نفس الكود. على سبيل المثال، إذا كان لدينا متغيرًا بإسم "x"، فإن الـ declaration هو عندما نقوم بكتابة "let x" في الكود، والـ initialization هو عندما نقوم بتعيين قيمة لـ "x" مثل "x = 5":

let x; // هنا تم إعلان المتغير "x"

x = 5; // هنا تم تهيئة المتغير "x" بقيمة 5

3. الـ Execution Context هو المكان الذي تعمل فيه الدالة ويحتوي على معلومات حول الدالة مثل قيمة الـ this والـ variables المستخدمة في الدالة:

const person = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
}

person.greet(); // هنا نستدعي الدالة greet الموجودة في person وستقوم بإظهار "Hello, my name is John"

4. الـ Lexical Environment هو المكان الذي تم بناؤه في الكود ويحتوي على المتغيرات والدوال المستخدمة في الكود. ويتم إنشاء الـ Lexical Environment عندما يتم تحميل الكود في الذاكرة:

let x = 5;

function addNumbers(num1, num2) {
  return num1 + num2 + x; // هنا ستستخدم الـ variable "x" من الـ Lexical Environment
}

addNumbers(3, 2); // هنا ستقوم الدالة بإضافة الرقمين 3 و 2 والمتغير "x" (الذي تم استدعاؤه من الـ Lexical Environment)