Lesson 10 / الدرس 10

Arrow functions / الدوال السهمية

A shorter way to write a function, used constantly in modern code. The syntax has four forms worth recognising, and one behaviour that is not just shorthand.

طريقة أقصر لكتابة دالة، تُستخدم باستمرار في الشيفرة الحديثة. وللصيغة أربعة أشكال تستحق التعرف، وسلوك واحد ليس مجرد اختصار.

Four forms of the same thing

function (a, b) { return a + b; }      the long form
(a, b) => { return a + b; }            an arrow, with a body
(a, b) => a + b                        one expression: returned automatically
a => a * 2                             one parameter: brackets optional
() => 'hello'                          no parameters: brackets required

x => ({ id: x })                       returning an object needs the ( )

The last line is the one that catches people: without the brackets, JavaScript reads the braces as a function body rather than an object, and the function silently returns nothing. Run the demonstration.

When to use which

Situation	Prefer
A small function passed to filter, map, sort	A short arrow
A callback of one line	A short arrow
A named function you will call by name	function, or an arrow with a name
Something twenty lines long	Either — but give it a name
A method on an object that uses this	function, not an arrow

The last row is the behaviour difference rather than a style preference. An arrow does not get its own this, which is usually exactly what you want in a callback and occasionally exactly what you do not want on an object method.

والسطر الأخير هو فرق السلوك لا تفضيل أسلوبي. فالسهم لا ينال this خاصًا به، وهو ما تريده بالضبط في رد نداء عادةً وما لا تريده بالضبط أحيانًا في دالة كائن.

That this difference is worth one honest paragraph rather than a whole lesson. In an ordinary function, this depends on how the function was called, which is a famous source of confusion. An arrow function does not have its own — it uses whatever this meant where it was written. In practice: inside a listener, an arrow keeps the surrounding this while a plain function gets the element. If you avoid this entirely, which beginners can and should, none of this affects you yet.

وفرق this ذاك يستحق فقرة صادقة واحدة لا درسًا كاملًا. ففي الدالة العادية يعتمد this على كيفية استدعائها، وهو مصدر حيرة شهير. والدالة السهمية لا تملك خاصًا بها — بل تستخدم ما عناه this حيث كُتبت. وعمليًا: داخل مستمع يبقي السهم this المحيط بينما تنال الدالة العادية العنصر. وإن تجنّبت this تمامًا، وهو ما يستطيعه المبتدئون وينبغي لهم، فلا يمسّك شيء من هذا بعد.

والسهم بأقواس معقوفة لا يُرجع شيئًا ما لم تكتب return. فـp => { p.price * 2 } تبدو أنها تضاعف سعرًا وتُرجع undefined، فـmap بها تنتج قائمة من undefined بلا خطأ إطلاقًا. والفرق بينها وبين p => p.price * 2 محرفان، وهو أشيع خطأ في السهام.

والوضوح يغلب الاختصار. فالسهم القصير داخل filter أوضح من الصيغة الطويلة؛ والسهم من عشرين سطرًا مسنَدًا إلى متغيّر أسوأ من دالة مسمّاة، لأن الاسم أول ما يبحث عنه القارئ. استخدم الصيغة القصيرة حيث تجعل السطر يُقرأ جملةً، وتوقف هناك.

Try it live / جرّب بنفسك

<pre id="out"></pre>

<script>
  const lines = [];

  function addTaxLong(price) { return price * 1.14; }
  const addTaxShort = price => price * 1.14;

  lines.push('long:  ' + addTaxLong(100));
  lines.push('short: ' + addTaxShort(100));

  document.getElementById('out').textContent = lines.join('\n');
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does p => { p.price * 2 } return?

ماذا تُرجع p => { p.price * 2 }؟

2. Why does x => ({ id: x }) need the brackets?

لماذا تحتاج x => ({ id: x }) الأقواس؟

3. When is a plain function the better choice?

متى تكون function العادية الخيار الأفضل؟

Your task / مهمتك

Take five functions you wrote in the basics course and rewrite each as an arrow, choosing the shortest form that stays readable. Show both versions side by side. Then deliberately write the braces mistake in a map, print the result, and explain why a list of undefined appears with no error. Finish by naming one of your five that you would leave as a plain function, and why.

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

Five functions, both forms shown خمس دوال بالصيغتين
At least one of each of the four arrow forms واحدة على الأقل من كل شكل من الأربعة
The braces mistake shown producing undefined خطأ الأقواس معروضًا وهو ينتج undefined
One left as a plain function, with a reason واحدة متروكة دالة عادية مع سبب