Arrow Function

الدالة السهمية (Arrow Function)

Beginnerprogramming1 min read
arrow fnfat arrow=>lambda functionanonymous function

Definition

A concise syntax for writing functions in JavaScript using the => symbol.

صيغة مختصرة لكتابة الدوال في JavaScript باستخدام الرمز =>.

Why It Matters

Arrow functions are the standard in modern React and Next.js code. Most event handlers, .map() callbacks, and async wrappers you write will be arrow functions.

الدوال السهمية هي المعيار في كود React و Next.js الحديث. معظم معالجات الأحداث ومستدعيات .map() والأغلفة اللاتزامنية التي تكتبها ستكون دوالًا سهمية.

Full Definition

Arrow functions are a shorter syntax for function expressions introduced in ES6. They use the => symbol, automatically bind `this` from the surrounding scope (no own `this`), and can omit braces and `return` for single-expression bodies. Arrow functions are ubiquitous in React event handlers, array methods (map, filter, reduce), and async callbacks.
الدوال السهمية هي صيغة مختصرة للتعبيرات الدالية قُدِّمت في ES6. تستخدم الرمز => وتربط `this` تلقائيًا من النطاق المحيط (لا `this` خاص بها)، ويمكن حذف الأقواس و`return` للجسم أحادي التعبير. تُستخدم على نطاق واسع في معالجات أحداث React وأساليب المصفوفات والاستدعاءات اللاتزامنية.

Example Usage

const greet = (name) => `Hello ${name}`; — or in React: onClick={() => setCount(c => c + 1)}

const greet = (name) => `مرحبًا ${name}`; — أو في React: onClick={() => setCount(c => c + 1)}

Knowledge Graph

Avoid these mistakes when using Arrow Function:

1

Using arrow functions as class methods when you need `this` inheritance

2

Wrapping arrow functions in unnecessary extra parentheses

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Arrow Function.

Explain:
1. What is Arrow Function and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Using arrow functions as class methods when you need `this` inheritance, Wrapping arrow functions in unnecessary extra parentheses
5. Best practices and production tips

Official Resources