Magdy Atef Zahran

شرح ال Arrow Functions في JavaScript

Arrow Functions واحدة من أهم الميزات اللي جت مع ES6 وبتخلي كتابة الفانكشن أسرع وأقصر وأسهل

لكن فيه اختلافات جوهرية بين الـ Arrow Functions والفانكشن العادية

في المحاضره دي هنشرحها بالتفصيل ونشوف إمتى تستخدمها وامتى تتجنبها؟

📌 أولًا: الشكل الأساسي للـ Arrow Function

بدل ما تكتب فانكشن بالطريقة التقليدية:

function add(a, b) { return a + b; }

ممكن تكتبها باستخدام الـ Arrow Function بالشكل ده:

const add = (a, b) => a + b;

أقصر وأسهل في الكتابة
مفيش كلمة function ولا return في الحالة البسيطة
بتستخدم السهم => بدل كلمة function

📌 1- حالات مختلفة لاستخدام الـ Arrow Function

(1) لو عندك بارامتر واحد تقدر تشيل الأقواس

const square = x => x * x; console.log(square(5)); // 25

(2) لو مفيش بارامترات لازم تحط أقواس فاضية

const greet = () => “Hello, World”; console.log(greet()); // Hello, World

(3) لو الفانكشن فيها أكثر من سطر، لازم تستخدم {} وكلمة return

const multiply = (a, b) => { let result = a * b; return result; }; console.log(multiply(4, 5)); // 20

📌 2- الفرق بين الـ Arrow Functions والفانكشن العادية

الجدول	Function Declaration	Arrow Function
this Binding	بيكون حسب ال object اللي استدعاها	بيكون ثابت وبيشير لنفس السياق اللي اتعرفت فيه
Hoisting	بيتم رفعها للأعلى (متاحة قبل تعريفها)	لا يتم رفعها لازم تتعرف الأول
arguments Object	متاحة داخل الفانكشن	غير متاحة داخل الـ Arrow Function
الكود	أطول شوية	أقصر وأسهل في الكتابة

📌 3- `this` في الـ Arrow Function

الـ this في الـ Arrow Function مش بيتغير حسب الاستدعاء وده فرق كبير

🔹 في الفانكشن العادية:

const person = { name: “مجدي”, greet: function () { console.log(this.name); // “مجدي” } }; person.greet();

🔹 في الـ Arrow Function:

const person = { name: “مجدي”, greet: () => { console.log(this.name); // ❌ Undefined (لأن `this` مش مرتبط بالكائن) } }; person.greet();

ليه حصل كده؟ لأن الـ this في الـ Arrow Function بياخد القيمه من الـ Scope اللي اتعرف فيه ومش بيتغير حسب ال object المستدعي.

✅ الحل؟ استخدم Function Declaration في الكائنات بدل الـ Arrow Function

📌 4- الـ `arguments` في الـ Arrow Functions

الـ Arrow Function مش بتوفر arguments Object زي الفانكشن العادية

🔹 في الفانكشن العادية:

function showArguments() { console.log(arguments); } showArguments(1, 2, 3); // [1, 2, 3]

🔹 في الـ Arrow Function (هتسبب Error)

const showArguments = () => { console.log(arguments); }; showArguments(1, 2, 3); // ❌ ReferenceError: arguments is not defined

✅ الحل؟ استخدم الـ Rest Parameters (...args) بدل arguments

const showArguments = (…args) => { console.log(args); }; showArguments(1, 2, 3); // [1, 2, 3]

📌 5- تطبيقات عملية على الـ Arrow Function

1- استخدام الـ Arrow Function معsetTimeout و setInterval

setTimeout(() => { console.log(“⏳ بعد 3 ثواني…”); }, 3000);

2- استخدام الـ Arrow Function مع المصفوفات (map, filter, reduce)

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10]

3- استخدام الـ Arrow Function داخل كائنات مع this (الطريقة الصح)

const user = { name: “مجدي”, sayHello() { setTimeout(() => { console.log(`أهلاً ${this.name}`); }, 1000); } }; user.sayHello(); // أهلاً مجدي ✅

هنا استخدمنا الـ Arrow Function جوه setTimeout عشان this يفضل يشير للكائن user

🎯 تـــاســك عــمــلــي

🔹 المطلوب:

اكتب فانكشن اسمها getFullName تاخد firstName و lastName وتجمعهم مع بعض باستخدام Arrow Function.
استخدم Arrow Function مع map عشان تحول Array من الأسعار بالدولار إلى الأسعار بالجنيه المصري (مثلا تضربها في 30).
اكتب فانكشن جوه كائن، جرب تستخدم Arrow Function جوهها وشوف this هيكون إيه؟

Borma

Magdy Atef Zahran

شرح ال Arrow Functions في JavaScript

📌 أولًا: الشكل الأساسي للـ Arrow Function

📌 1- حالات مختلفة لاستخدام الـ Arrow Function

📌 2- الفرق بين الـ Arrow Functions والفانكشن العادية

this Binding

Hoisting

arguments Object

الكود

📌 3- `this` في الـ Arrow Function

📌 4- الـ `arguments` في الـ Arrow Functions

📌 5- تطبيقات عملية على الـ Arrow Function

🎯 تـــاســك عــمــلــي

🔹 المطلوب:

قسم التعليقات

Borma

Magdy Atef Zahran

شرح ال Arrow Functions في JavaScript

📌 أولًا: الشكل الأساسي للـ Arrow Function

📌 1- حالات مختلفة لاستخدام الـ Arrow Function

📌 2- الفرق بين الـ Arrow Functions والفانكشن العادية

this Binding

Hoisting

arguments Object

الكود

📌 3- this في الـ Arrow Function

📌 4- الـ arguments في الـ Arrow Functions

📌 5- تطبيقات عملية على الـ Arrow Function

🎯 تـــاســك عــمــلــي

🔹 المطلوب:

قسم التعليقات

📌 3- `this` في الـ Arrow Function

📌 4- الـ `arguments` في الـ Arrow Functions