ما الجديد في الإصدار القادم من جافاسكربت (ECMAScript 6) – الجزء الثاني

يُعتبر ECMAScript 6، المعروف أيضاً باسم ES6 أو ECMAScript 2015، أحد أهم التحديثات في تاريخ لغة جافاسكربت. فقد جاء هذا الإصدار بالعديد من الميزات والتحسينات التي غيرت من طريقة كتابة وتطوير التطبيقات بلغة جافاسكربت، وجعلتها أكثر قوة، مرونة، وتنظيماً. في هذا الجزء الثاني، سنواصل استعراض الميزات الجديدة التي أُضيفت في ES6، بعد أن تناولنا في الجزء الأول بعض الميزات الأساسية مثل المتغيرات باستخدام let و const، الوظائف السهمية (arrow functions)، والقوالب النصية (template literals).

1. الكائنات المحسنة (Enhanced Object Literals)

في ES6، تم إدخال تحسينات كبيرة على كتابة الكائنات (Objects) لتسهيل تعبير المطورين عن الخصائص والطرق. أبرز هذه التحسينات:

• تعريف الخصائص بدون الحاجة إلى المفتاح والقيمة بشكل منفصل:
  
  يمكنك الآن تعريف خاصية في كائن باستخدام اسم المتغير مباشرة دون الحاجة إلى كتابته مرتين.

javascript
CopyEdit
let name = "Ahmed";
let age = 30;

let person = { name, age };
// نفس معنى { name: name, age: age }

• تعريف الدوال داخل الكائن بدون كلمة function:
  
  يسمح ES6 بكتابة دوال داخل الكائن بشكل أبسط.

javascript
CopyEdit
let person = {
  sayHello() {
    console.log("مرحبا");
  }
};

• الخصائص المحسوبة (Computed Property Names):
  
  يمكن استخدام تعبيرات لحساب أسماء الخصائص مباشرةً.

javascript
CopyEdit
let propName = "score";
let obj = {
  [propName]: 100
};

2. الفئات (Classes)

أدخل ES6 مفهوم الفئات (Classes) لتسهيل البرمجة الكائنية (OOP) في جافاسكربت، والتي كانت تعتمد سابقاً على النماذج الأولية (prototypes) بشكل معقد وصعب الفهم.

• تعريف الفئة (Class) وإنشاء الكائنات (Instances):

javascript
CopyEdit
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`مرحباً، اسمي ${this.name} وعمري ${this.age} سنة.`);
  }
}

let p = new Person("سارة", 25);
p.greet(); // مرحباً، اسمي سارة وعمري 25 سنة.

• الدعم الكامل للوراثة (Inheritance) باستخدام extends وsuper:

javascript
CopyEdit
class Employee extends Person {
  constructor(name, age, position) {
    super(name, age);
    this.position = position;
  }

  work() {
    console.log(`${this.name} يعمل كـ ${this.position}.`);
  }
}

let e = new Employee("علي", 40, "مهندس");
e.greet(); // مرحباً، اسمي علي وعمري 40 سنة.
e.work();  // علي يعمل كـ مهندس.

هذا النظام جعل جافاسكربت أكثر توافقاً مع لغات برمجة كائنية شهيرة وسهل فهم البنية الهرمية للكائنات.

3. الوحدات النمطية (Modules)

في ES6 تم تقديم نظام الوحدات النمطية (Modules) والذي يمكن من تقسيم الكود إلى ملفات مستقلة مع إمكانية استيراد وتصدير الأجزاء المطلوبة بسهولة. هذا يسهل إدارة المشاريع الكبيرة ويقلل من التعارض بين أسماء المتغيرات والدوال.

• تصدير العناصر (Export):

javascript
CopyEdit
// في ملف module.js
export const pi = 3.14;
export function square(x) {
  return x * x;
}

• استيراد العناصر (Import):

javascript
CopyEdit
// في ملف آخر
import { pi, square } from './module.js';

console.log(pi); // 3.14
console.log(square(5)); // 25

• تصدير واستيراد افتراضي (default export/import):

javascript
CopyEdit
// تصدير افتراضي
export default function greet() {
  console.log("مرحبا");
}

// استيراد افتراضي
import greet from './greet.js';
greet();

هذا النظام بديل متطور عن تقنيات مثل CommonJS و AMD، مما جعل جافاسكربت أكثر تنظيماً وحداثة.

4. الـ Promises (الوعود)

التعامل مع العمليات غير المتزامنة (Asynchronous) كان دائماً من التحديات في جافاسكربت. مع ES6، تم إدخال مفهوم الـ Promises بشكل رسمي، وهي أداة تسمح بكتابة كود غير متزامن بشكل أكثر تنظيماً ووضوحاً.

• تعريف Promise:

javascript
CopyEdit
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("تمت العملية بنجاح");
  }, 2000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

• مميزات الـ Promises:

  • إمكانية التعامل مع نتائج العمليات غير المتزامنة.

  • إمكانية ربط سلسلة من العمليات باستخدام .then() بشكل متسلسل.

  • معالجة الأخطاء بسهولة باستخدام .catch().

استخدام الـ Promises ساعد كثيراً في كتابة أكواد أكثر وضوحاً وقابلية للصيانة مقارنة بالـ callbacks التقليدية التي قد تؤدي إلى ما يعرف بـ “callback hell”.

5. المولدات (Generators)

تقدم ES6 نوعاً جديداً من الوظائف يُسمى “المولد” (Generator)، وهي وظائف يمكن إيقافها مؤقتاً واستئنافها لاحقاً، مما يفتح آفاقاً جديدة في التحكم بتدفق التنفيذ.

• كتابة مولد:

javascript
CopyEdit
function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generatorFunction();

console.log(gen.next()); // {value: 1, done: false}
console.log(gen.next()); // {value: 2, done: false}
console.log(gen.next()); // {value: 3, done: false}
console.log(gen.next()); // {value: undefined, done: true}

• استخدامات المولدات:

  • التحكم بتدفق البيانات.

  • تنفيذ العمليات غير المتزامنة بشكل متسلسل.

  • تحسين أداء البرامج من خلال توليد البيانات عند الحاجة.

6. التكرار (Iterators) وواجهة التكرار (Iterable Interface)

ES6 أدخلت مفهوم التكرار الذي يسمح بالتكرار على مجموعات البيانات بطريقة موحدة باستخدام for...of بدلاً من for...in أو استخدام الأساليب التقليدية.

• تطبيق التكرار:

javascript
CopyEdit
let arr = [10, 20, 30];

for (let value of arr) {
  console.log(value);
}
// 10
// 20
// 30

• إنشاء كائن قابل للتكرار:

javascript
CopyEdit
let myIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (let value of myIterable) {
  console.log(value);
}

• الفرق بين for…of و for…in:

  • for...of للتكرار على القيم.

  • for...in للتكرار على المفاتيح أو الخصائص.

7. المتغيرات البارامترية (Default Parameters)

تسهيل التعامل مع البرامترات في الدوال، حيث يمكن تحديد قيم افتراضية للمعاملات بدل التحقق من وجودها يدوياً.

javascript
CopyEdit
function greet(name = "ضيف") {
  console.log(`مرحباً، ${name}`);
}

greet();       // مرحباً، ضيف
greet("علي");  // مرحباً، علي

هذه الميزة تقلل الحاجة لكتابة الكود الذي يتحقق من وجود البرامترات وتعيين قيم افتراضية، مما يزيد من وضوح ونظافة الكود.

8. المتغيرات المتبقية و الانتشار (Rest & Spread Operators)

• المتغيرات المتبقية (Rest Parameters):

تسمح بجمع عدد غير محدد من المعاملات في مصفوفة واحدة.

javascript
CopyEdit
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

• عامل الانتشار (Spread Operator):

يسمح بتفكيك المصفوفات أو الكائنات إلى عناصرها.

javascript
CopyEdit
let arr1 = [1, 2];
let arr2 = [3, 4];

let combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

javascript
CopyEdit
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3 };

let merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2, c: 3 }

9. الرموز (Symbols)

أدخل ES6 نوعاً جديداً من القيم يسمى Symbol، وهو يمثل مفتاحاً فريداً لا يمكن تكراره، ويستخدم بشكل رئيسي لتعريف خصائص خاصة في الكائنات بدون التعارض مع خصائص أخرى.

javascript
CopyEdit
let sym1 = Symbol("id");
let sym2 = Symbol("id");

console.log(sym1 === sym2); // false

let obj = {
  [sym1]: 123
};

console.log(obj[sym1]); // 123

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

10. Map و Set وهياكل بيانات جديدة

قدم ES6 هياكل بيانات جديدة مهمة:

• Map: خريطة تخزن أزواج المفتاح والقيمة، ويمكن استخدام أي نوع كالمفتاح.

javascript
CopyEdit
let map = new Map();
map.set('name', 'محمد');
map.set(1, 'رقم');

console.log(map.get('name')); // محمد
console.log(map.size);        // 2

• Set: مجموعة تخزن القيم الفريدة فقط.

javascript
CopyEdit
let set = new Set([1, 2, 2, 3]);
console.log(set); // Set {1, 2, 3}

• WeakMap و WeakSet: نسخ مشابهة لكنها تدعم جمع القمامة (garbage collection) بشكل أفضل مما يمنع تسرب الذاكرة.

11. تحسينات في التعامل مع السلاسل النصية

• إمكانية استخدام طريقة .includes() للتحقق من وجود نص معين داخل سلسلة.

javascript
CopyEdit
let text = "مرحبا بالعالم";
console.log(text.includes("بالعالم")); // true

• طرق جديدة مثل .startsWith() و .endsWith() للتحقق من بداية ونهاية السلسلة النصية.

javascript
CopyEdit
console.log(text.startsWith("مرحبا")); // true
console.log(text.endsWith("العالم")); // true

• تكرار النص باستخدام .repeat(n):

javascript
CopyEdit
console.log("علي".repeat(3)); // عليعليعلي

12. تحسينات في الأرقام والرياضيات

• طرق جديدة في كائن Number مثل Number.isNaN() و Number.isFinite() لتحديد ما إذا كانت القيمة عددًا صالحًا.

• طرق في كائن Math مثل Math.trunc() لقطع الكسور.

• دعم للأنظمة العددية المختلفة مثل القيم الثنائية (binary) والثمانية (octal) من خلال الصياغة الجديدة:

javascript
CopyEdit
let bin = 0b1010;  // 10 بالعدد العشري
let oct = 0o12;    // 10 بالعشري

13. التعامل مع الـ Binary و الـ Typed Arrays

لأول مرة في جافاسكربت، أصبح بالإمكان التعامل مع بيانات ثنائية (binary data) باستخدام الـ Typed Arrays، والتي تسمح بالتعامل مع البيانات في شكل مصفوفات ذات نوع معين من القيم (مثل أعداد صحيحة 8 أو 16 أو 32 بت).

javascript
CopyEdit
let buffer = new ArrayBuffer(16);
let int32View = new Int32Array(buffer);
int32View[0] = 42;

هذا مكّن جافاسكربت من اقتحام مجالات جديدة كالتعامل مع الوسائط المتعددة، الألعاب، والعمليات الحسابية المعقدة.

14. الكلمات المفتاحية الجديدة: super و new.target

• super: تتيح استدعاء دوال الأب أو الكائن الأصل داخل الفئات الوراثية.

• new.target: تمكن من التحقق إذا تم استدعاء الدالة باستخدام new لإنشاء كائن جديد، مما يسمح بكتابة دوال تتصرف بشكل مختلف بناءً على طريقة الاستدعاء.

جدول ملخص الميزات الجديدة في ECMAScript 6

خاتمة

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

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

مع تقدم التكنولوجيا، ستستمر جافاسكربت في التطور، لكن ES6 يظل نقطة التحول الأبرز في تاريخها، ويمثل الأساس الذي يبنى عليه كل ما هو جديد في عالم تطوير الويب.

المراجع

1. ECMAScript 6 Language Specification – ECMA International:
   
   https://www.ecma-international.org/ecma-262/6.0/

2. Mozilla Developer Network (MDN) – ECMAScript 6 Features:
   
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class