دليل شامل لدوال السهم (Arrow Functions) في JavaScript: صياغة ES6 الجديدة

مقدمة إلى دوال السهم (Arrow Functions) في JavaScript

ربما صادفت دوال السهم (Arrow Functions) في لغة JavaScript مكتوبة بطرق متعددة ومختلفة. فبعضها يحيط بالمعاملات (parameters) بأقواس، والبعض الآخر لا يفعل. بعضها يستخدم الأقواس المتعرجة (curly brackets) وكلمة المفتاح return، بينما البعض الآخر يستغني عنها. حتى أن بعضها يمتد على عدة أسطر، في حين يتكون البعض الآخر من سطر واحد فقط.

المثير للاهتمام هو أننا عندما نستدعي دوال السهم المذكورة أعلاه بنفس الوسيط (argument)، نحصل على نفس النتيجة دائمًا. إليك بعض الأمثلة التوضيحية:

// المثال 1: استخدام الأقواس المتعرجة وكلمة المفتاح return
const addTwo = (num) => {
  return num + 2;
};

// المثال 2: صياغة موجزة بدون أقواس متعرجة أو return
const addTwo = (num) => num + 2;

// المثال 3: بدون أقواس حول المعامل (parameter) الواحد
const addTwo = num => num + 2;

// المثال 4: دالة سهم متعددة الأسطر
const addTwo = a => {
  const newValue = a + 2;
  return newValue;
};

عند استدعاء أي من هذه الدوال، تكون النتيجة واحدة:

console.log(addTwo(2)); // النتيجة: 4

فكيف يمكنك معرفة أي صياغة لدالة السهم يجب استخدامها؟ هذا هو ما سيكشفه هذا المقال: كيفية تعريف دالة سهم (arrow function) بشكل صحيح وفعال.

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

تُعد دوال السهم طريقة أخرى – وأكثر إيجازًا – لكتابة تعبيرات الدوال (function expressions). ومع ذلك، هناك فرق جوهري يجب الانتباه إليه: دوال السهم لا تمتلك ربطها الخاص بكلمة المفتاح this. بدلاً من ذلك، ترث قيمة this من السياق المحيط بها (lexical scope)، وهو ما يمثل ميزة مهمة في بعض السيناريوهات.

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

// تعبير دالة تقليدي (Function expression)
const addNumbers = function (number1, number2) {
  return number1 + number2;
};

// تعبير دالة سهم (Arrow function expression)
const addNumbers = (number1, number2) => number1 + number2;

عند استدعاء هاتين الدالتين بنفس الوسائط، نحصل على نفس النتيجة:

console.log(addNumbers(1, 2)); // النتيجة: 3

الفرق الصياغي الأهم الذي يجب ملاحظته هو أن دوال السهم تستخدم الرمز => بدلاً من كلمة المفتاح function. هناك اختلافات أخرى يجب أن تكون على دراية بها عند كتابة دوال السهم، وهذا ما سنستكشفه لاحقًا.

قواعد الأقواس في دوال السهم

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

دالة سهم بدون معاملات

تتطلب دالة السهم التي لا تحتوي على أي معاملات استخدام الأقواس الفارغة ():

const hello = () => "hello";
console.log(hello()); // النتيجة: "hello"

دالة سهم بمعامل واحد

لا تتطلب دالة السهم التي تحتوي على معامل واحد أقواسًا حول هذا المعامل. بعبارة أخرى، الأقواس اختيارية في هذه الحالة:

const addTwo = num => num + 2;

لذلك، يمكننا إضافة أقواس للمثال أعلاه وستظل دالة السهم تعمل بشكل صحيح:

const addTwo = (num) => num + 2;
console.log(addTwo(2)); // النتيجة: 4

دالة سهم بمعاملات متعددة

تتطلب دالة السهم التي تحتوي على عدة معاملات استخدام الأقواس بشكل إلزامي:

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2)); // النتيجة: 3

دوال السهم مع معاملات Rest و Destructuring

تدعم دوال السهم أيضًا ميزات مثل معاملات Rest parameters و Destructuring. تتطلب كلتا الميزتين استخدام الأقواس حول قائمة المعاملات.

هذا مثال لدالة سهم تستخدم Rest parameter:

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4)); // النتيجة: [2, 3, 4]

وهذا مثال آخر يستخدم Destructuring:

const location = { country: "Greece", city: "Athens" };
const travel = ({city}) => city;
console.log(travel(location)); // النتيجة: "Athens"

باختصار: إذا كان هناك معامل واحد فقط – ولم تكن تستخدم Rest parameters أو Destructuring – فإن الأقواس اختيارية. بخلاف ذلك، تأكد من تضمينها.

بنية جسم الدالة (Function Body) في دوال السهم

بعد أن غطينا قواعد الأقواس، دعنا ننتقل إلى بنية جسم دالة السهم. يمكن أن يكون لجسم دالة السهم إما “جسم موجز” (concise body) أو “جسم كتلة” (block body). يؤثر نوع الجسم على الصياغة.

الجسم الموجز (Concise Body)

أولاً، صياغة “الجسم الموجز”:

const addTwo = a => a + 2;

صياغة “الجسم الموجز” هي بالضبط ما توحي به: إنها موجزة! لا نستخدم كلمة المفتاح return أو الأقواس المتعرجة. إذا كانت لديك دالة سهم من سطر واحد (مثل المثال أعلاه)، فسيتم إرجاع القيمة ضمنيًا. لذلك يمكنك حذف كلمة المفتاح return والأقواس المتعرجة.

جسم الكتلة (Block Body)

الآن دعنا نلقي نظرة على صياغة “جسم الكتلة”:

const addTwo = a => {
  const total = a + 2;
  return total;
}

لاحظ أننا نستخدم كلاً من الأقواس المتعرجة وكلمة المفتاح return في المثال أعلاه. عادة ما ترى هذه الصياغة عندما يكون جسم الدالة أكثر من سطر واحد. وهذه نقطة أساسية: قم بتغليف جسم دالة السهم متعددة الأسطر بأقواس متعرجة واستخدم كلمة المفتاح return.

إرجاع الكائنات (Objects) باستخدام دوال السهم

هناك فارق صياغي آخر يجب معرفته: قم بتغليف جسم الدالة بأقواس عادية (parentheses) عندما تريد إرجاع تعبير حرفي لكائن (object literal expression) بشكل ضمني.

const f = () => ({ city: "Boston" });
console.log(f().city); // النتيجة: "Boston"

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

const f = () => { city: "Boston" }; // النتيجة: خطأ (SyntaxError)

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

الخلاصة التقنية

تُعد دوال السهم (Arrow Functions) إضافة قوية ومفيدة لـ JavaScript منذ إصدار ES6، حيث توفر صياغة أكثر إيجازًا ووضوحًا في العديد من الحالات. فهم الفروقات الدقيقة في استخدام الأقواس (سواء للمعاملات أو عند إرجاع الكائنات ضمنيًا) والتمييز بين الجسم الموجز (concise body) والجسم الكتلة (block body) أمر بالغ الأهمية لكتابة كود نظيف وفعال. كما أن الوعي بكيفية تعامل دوال السهم مع كلمة المفتاح this يجنب العديد من الأخطاء الشائعة، مما يجعلها أداة لا غنى عنها للمطورين المعاصرين.