مقدمة إلى ES6

ECMAScript 2015، المعروف أيضًا باسم ES6 (ECMAScript 6)، هو تحديث مهم لـ JavaScript، حيث يقدم تركيبًا وميزات جديدة تجعل البرمجة أكثر كفاءة وأسهل في الإدارة. تعد JavaScript إحدى لغات البرمجة الأكثر شيوعًا المستخدمة لتطوير الويب، كما تعمل التحسينات في ES6 على تحسين قدراتها بشكل كبير.

سيغطي هذا الدليل الميزات المهمة المقدمة في ES6، مع التركيز بشكل خاص على وظائف الأسهم، وهي طريقة جديدة قوية لكتابة الوظائف.

الميزات الرئيسية لES6

1. دع و ثابت

قدم ES6 طريقتين جديدتين للإعلان عن المتغيرات: Let وconst.

• let: يعلن عن متغير ذو نطاق كتلة، مما يعني أن المتغير متاح فقط داخل الكتلة التي تم الإعلان عنه فيها.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: يعلن عن متغير ثابت لا يمكن إعادة تعيينه. ومع ذلك، هذا لا يجعل المتغير غير قابل للتغيير — فالكائنات المعلنة باستخدام const لا يزال من الممكن تغيير خصائصها.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. وظائف السهم

واحدة من أكثر الميزات التي تم الحديث عنها في ES6 هي وظيفة السهم. يوفر بناء جملة أقصر وأكثر إيجازًا لوظائف الكتابة.

#### مقارنة بناء الجملة:

الوظيفة التقليدية (ES5) :

   var add = function(x, y) {
     return x   y;
   };

وظيفة السهم (ES6):

   const add = (x, y) => x   y;

إليك ما يجعل وظائف السهم مختلفة:

• صيغة أقصر: لا تحتاج إلى كتابة الكلمة الأساسية للدالة، ويمكنك حذف الأقواس المتعرجة {} إذا كانت الدالة تحتوي على عبارة واحدة.
• إرجاع ضمني: إذا كانت الدالة تحتوي على تعبير واحد فقط، فسيتم إرجاع نتيجة هذا التعبير تلقائيًا.
• لا يوجد هذا الربط: وظائف السهم لا تملك هذا الخاص بها، مما يجعلها غير مناسبة لطرق الكائن.

مثال لدالة سهم ذات سطر واحد:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

يمكن أيضًا استخدام وظائف السهم بدون معلمات:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

بالنسبة للوظائف التي تحتوي على أكثر من سطر واحد، يلزم استخدام الأقواس المتعرجة {}، ويجب أن تكون عبارة الإرجاع صريحة:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

وظائف السهم وهذا
أحد الفروق المهمة هو كيفية تصرف ذلك في وظائف السهم. على عكس الوظائف التقليدية، لا تربط وظائف السهم هذا — فهي ترث هذا من السياق المحيط بها.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

في المثال أعلاه، ترث وظيفة السهم داخل setTimeout هذا من طريقة sayName، والتي تشير بشكل صحيح إلى كائن الشخص.

3. مهمة التدمير

يسمح لنا التدمير باستخراج القيم من المصفوفات أو الكائنات وتخصيصها للمتغيرات بطريقة أكثر إيجازًا.

تدمير الكائنات:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

تدمير المصفوفة:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. عامل الانتشار والراحة (...)

يمكن استخدام العامل ... لتوسيع المصفوفات إلى عناصر فردية أو لجمع عناصر متعددة في مصفوفة.

• الانتشار: يوسع المصفوفة إلى عناصر فردية.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest: يجمع وسائط متعددة في مصفوفة.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. الوعود

تُستخدم الوعود للتعامل مع العمليات غير المتزامنة في JavaScript. يمثل الوعد قيمة قد تكون متاحة الآن أو في المستقبل أو لن تكون متاحة أبدًا.

مثال:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

في هذا المثال، يتم حل الوعد بعد ثانية واحدة، ويتعامل الأسلوبthen() مع القيمة التي تم حلها.

6. المعلمات الافتراضية

في ES6، يمكنك تعيين القيم الافتراضية لمعلمات الوظيفة. يكون هذا مفيدًا عندما لا يتم توفير معلمة أو تكون غير محددة.

مثال:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. طرق السلسلة (تتضمن ()، تبدأ مع ()، تنتهي مع ())

تمت إضافة أساليب جديدة إلى السلاسل لتسهيل المهام الشائعة:

• يتضمن (): التحقق مما إذا كانت السلسلة تحتوي على قيمة محددة.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): يتحقق مما إذا كانت السلسلة تبدأ بقيمة محددة.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): يتحقق مما إذا كانت السلسلة تنتهي بقيمة محددة.
  

   console.log(str.endsWith("!")); // true
  

8. طرق المصفوفة (find(), findIndex(), from())

قدم ES6 طرقًا جديدة للعمل مع المصفوفات:

• find(): إرجاع العنصر الأول الذي يفي بالشرط.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): إرجاع فهرس العنصر الأول الذي يستوفي الشرط.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. الفصول الدراسية

قدم ES6 فئات إلى JavaScript، وهي عبارة عن السكر النحوي فوق الميراث القائم على النموذج الأولي لجافا سكريبت. تسمح الفصول الدراسية ببرمجة موجهة للكائنات أنظف وأكثر قابلية للفهم.

مثال:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

خاتمة

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

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

متابعة مشروع Arrow Functions على GitHub

مراجع

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements