JavaScript المتقدم (ES6+)

مقدمة إلى ES6+

13 دقيقة الدرس 1 من 40

مقدمة إلى ES6+

مرحباً بك في جافا سكريبت المتقدمة! في هذا الدرس، سنستكشف تطور JavaScript، ونفهم ما يعنيه ES6+، ونكتشف لماذا أحدث بناء JavaScript الحديث ثورة في تطوير الويب.

ما هي ES6/ES2015؟

ES6 (ECMAScript 2015) هي الطبعة السادسة من معيار ECMAScript - تحديث رئيسي لـ JavaScript يقدم ميزات وبناء جملة قوية جديدة. إنه التحديث الأكثر أهمية للغة منذ إصدار ES5 في عام 2009.

حقيقة مهمة: ECMAScript هو المواصفات القياسية الرسمية لـ JavaScript. يشير ES6+ إلى ES6 وجميع الإصدارات اللاحقة (ES2016، ES2017، ES2018، ES2019، ES2020، ES2021، ES2022، ES2023، ES2024).

الجدول الزمني لإصدارات ECMAScript

فهم تطور JavaScript يساعدك على تقدير الميزات الحديثة:

ES5 (2009): الوضع الصارم، دعم JSON، طرق المصفوفات
ES6/ES2015 (2015): let/const، الدوال السهمية، الأصناف، الوحدات، الوعود
ES2016: Array.includes()، معامل الأس (**)
ES2017: async/await، Object.entries/values
ES2018: Rest/spread للكائنات، التكرار غير المتزامن
ES2019: Array.flat()، Object.fromEntries()
ES2020: السلسلة الاختيارية (?.)، دمج القيم الفارغة (??)
ES2021: معاملات الإسناد المنطقي (||=، &&=، ??=)
ES2022: await على المستوى الأعلى، حقول الأصناف، الطرق الخاصة
ES2023: Array findLast()، toSorted()، toReversed()
ES2024: Object.groupBy()، Promise.withResolvers()

نصيحة: بعد ES6، يتم إصدار إصدارات جديدة سنوياً بتحديثات أصغر وتدريجية بدلاً من إصلاحات ضخمة.

لماذا ES6+ مهمة

توفر JavaScript الحديثة تحسينات كبيرة:

بناء جملة أنظف - كود قالبي أقل، أكثر قابلية للقراءة
تحكم أفضل في النطاق - متغيرات محددة النطاق مع let و const
دوال محسّنة - دوال سهمية مع ربط this معجمي
وعود أصلية - برمجة غير متزامنة مدمجة
نظام وحدات - import/export لتنظيم أفضل للكود
أصناف - بناء جملة البرمجة الكائنية
قوالب حرفية - استيفاء السلاسل والسلاسل متعددة الأسطر
التفكيك - استخراج القيم من المصفوفات والكائنات بسهولة

توافق المتصفح والتحويل البرمجي

أحد التحديات مع JavaScript الحديثة هو دعم المتصفح. إليك كيف نتعامل معها:

المتصفحات الحديثة (2020+):
- Chrome 90+، Firefox 88+، Safari 14+، Edge 90+
- تدعم معظم ميزات ES6+ بشكل أصلي
- لا حاجة للتحويل البرمجي للميزات الحديثة

المتصفحات القديمة:
- IE11 والمتصفحات الأقدم
- تتطلب التحويل البرمجي (تحويل ES6+ إلى ES5)
- استخدم Babel لتحويل البناء الحديث

ما هو Babel؟

Babel هو مترجم JavaScript يحول كود ES6+ إلى ES5 متوافق مع الإصدارات السابقة:

كود ES6+ (حديث):
const greet = (name) => `Hello, ${name}!`;

بعد Babel (متوافق مع ES5):
var greet = function greet(name) {
  return "Hello, " + name + "!";
};

أخبار جيدة: معظم أدوات التطوير الحديثة (Create React App، Vite، Next.js) تتضمن تكوين Babel تلقائياً، حتى تتمكن من كتابة ES6+ دون القلق بشأن التوافق.

بيئة تطوير JavaScript الحديثة

عادةً ما يتضمن تطوير JavaScript اليوم:

الأدوات الأساسية:
✓ Node.js & npm - إدارة الحزم
✓ مُجمِّع الوحدات - Webpack أو Vite أو Rollup
✓ المحول البرمجي - Babel للتوافق
✓ المُدقِّق - ESLint لجودة الكود
✓ المُنسِّق - Prettier لنمط متسق
✓ التحكم في الإصدار - Git للتعاون

الوضع الصارم في JavaScript الحديثة

تعمل وحدات ES6 تلقائياً في الوضع الصارم، ولكن يمكنك تمكينه صراحةً:

تمكين الوضع الصارم:
"use strict";

function example() {
  // يفرض الوضع الصارم ممارسات برمجة أفضل
  // - يمنع المتغيرات العامة العرضية
  // - يطرح أخطاء للإجراءات غير الآمنة
  // - يعطل الميزات المربكة
  x = 10; // خطأ: x غير معرف
}

أفضل ممارسة: استخدم دائماً الوضع الصارم ("use strict") في أعلى ملفات JavaScript الخاصة بك للكشف عن الأخطاء الشائعة وفرض كود أنظف.

كيفية استخدام ميزات ES6+ اليوم

لديك عدة خيارات لاستخدام JavaScript الحديثة:

الخيار 1: الدعم المباشر للمتصفح
- اكتب كود ES6+ مباشرة
- استخدم فقط في المتصفحات الحديثة
- الأفضل للمشاريع الشخصية أو البيئات المُتحكَّم فيها

الخيار 2: أدوات البناء (موصى به)
- استخدم Vite أو Create React App أو ما شابه
- التحويل البرمجي التلقائي مضمن
- الأفضل لتطبيقات الإنتاج

الخيار 3: CDN مع Babel
- قم بتضمين Babel المستقل من CDN
- جيد للنماذج الأولية السريعة
- غير موصى به للإنتاج

أول كود ES6 لك

لنقارن الأسلوب القديم (ES5) مقابل الجديد (ES6+):

أسلوب ES5:
var name = "John";
var greeting = function(time) {
  return "Good " + time + ", " + name + "!";
};
console.log(greeting("morning"));

أسلوب ES6+:
const name = "John";
const greeting = (time) => `Good ${time}, ${name}!`;
console.log(greeting("morning"));

كلاهما يخرج: Good morning, John! - لكن ES6+ أنظف وأكثر قابلية للقراءة.

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

ما ستتعلمه في هذا البرنامج التعليمي

يغطي هذا البرنامج التعليمي الشامل:

الوحدة 1: بناء جملة وميزات ES6+ (let، const، السهام، القوالب، التفكيك)
الوحدة 2: الدوال والنطاق (الإغلاقات، الدوال عالية الرتبة، الكلمة this)
الوحدة 3: JavaScript غير المتزامنة (الوعود، async/await، Fetch API)
الوحدة 4: هياكل بيانات ES6+ (Sets، Maps، Symbols، Iterators)
الوحدة 5: JavaScript الكائنية (الأصناف، الوراثة، Proxy)
الوحدة 6: الوحدات وتنظيم الكود (import/export، أنماط التصميم)
الوحدة 7: موضوعات متقدمة (Regex، الأداء، واجهات برمجة التطبيقات الحديثة)

تمرين تأملي:

فكر في:

إلى ماذا يشير ES6+ في JavaScript؟
لماذا نحتاج إلى أدوات مثل Babel للمتصفحات الأقدم؟
اذكر ثلاث ميزات رئيسية تم تقديمها في ES6.

الإجابة:

يشير ES6+ إلى ECMAScript 2015 (ES6) وجميع الإصدارات السنوية اللاحقة من معيار JavaScript.
يحول Babel بناء جملة ES6+ الحديث إلى كود ES5 يمكن للمتصفحات الأقدم فهمه، مما يضمن التوافق.
متغيرات let/const، الدوال السهمية، الأصناف، القوالب الحرفية، التفكيك، الوعود، الوحدات (أي ثلاثة).

الملخص

في هذا الدرس، تعلمت:

ES6+ هو المعيار الحديث لـ JavaScript، بدءاً من ES2015
يتم إصدار إصدارات JavaScript الجديدة سنوياً بتحسينات تدريجية
توفر JavaScript الحديثة بناء جملة أنظف وميزات قوية
يحول Babel ES6+ إلى ES5 لدعم المتصفح القديم
تتعامل أدوات التطوير الحديثة مع التحويل البرمجي تلقائياً
يفرض الوضع الصارم ممارسات برمجة أفضل

التالي: في الدرس التالي، سنغوص في let و const والنطاق الكتلي - اللبنات الأساسية لـ JavaScript الحديثة!