مميزات جديدة في JavaScript#

Optional Chaining (?.)#

الـOptional Chaining إتضافت في ECMAScript 2020. بتسمحلك توصل لقيمة جوه objects متشعبة من غير ما تعمل if conditions كتير. بدل ما تتأكد من وجود كل جزء في الـChain، تقدر تستخدم الـOptional Chaining بشكل بسيط:

let streetName = person?.address?.street?.name;

لو الشخص مش موجود أو العنوان مش موجود، الكود مش هيعمل خطأ وهيرجع undefined

Nullish Coalescing (??)#

الـ Nullish Coalescing Operator اتقدمت برضه في ECMAScript 2020. دي بتستخدم علشان ترجع أول قيمة لو مش null أو undefined، وتاني قيمة لو الأولانية null أو undefined. يعني مثلاً:

let name = person?.name ?? 'Unknown';

لو الشخص مش عنده اسم، هيرجع ‘Unknown’ بدل ما يرجع undefined

BigInt#

ده نوع بيانات جديد في JavaScript اسمه BigInt. بيستخدم لتمثيل الأعداد الكبيرة جداً اللي ما ينفعش تتعامل معاها بـNumber العادي. يعني ممكن تكتب:

const bigNumber = 12345678901234567890n;

الأعداد دي ممكن تكون أكبر بكتير من أكبر رقم يقدر يتعامل معاه الـNumber العادي، وبالمناسبة هي primitive data type

globalThis#

ده global object جديد في JavaScript اسمه globalThis. بيوفر طريقة للوصول للـglobal object بطريقة متوافقة مع كل بيئات JavaScript الحديثة زي المتصفحات و Node.js. يعني بدل ما تكتب window أو global، تقدر تكتب:

console.log(globalThis === window); // true في المتصفح

matchAll()#

دي method جديدة على الـString prototype، اسمها matchAll(). بتديك Iterator بيجيب كل المتطابقات مع Regular Expression في نص، وبتشمل الـcapturing groups.

مثال:#

const regex = /(\w)(\d)/g;
const str = 'a1b2c3';
for (const match of str.matchAll(regex)) {
  console.log(match);
}

الكود ده هيطبع كل المتطابقات زي ['a1', 'b2', 'c3'].

Promise.allSettled()#

دي method جديدة في API بتاع Promise، اسمها allSettled(). بترجع promise بيتحل لما كل الـ promises في المصفوفة تتحل سواء كانت تحلت أو ترفضت.

مثال:#

const promises = [Promise.resolve('a'), Promise.reject('b'), Promise.resolve('c')];
Promise.allSettled(promises).then((results) => console.log(results));

الكود ده هيطبع الحالة بتاعة كل promise سواء كان إتحل أو إترفض

String.prototype.at()#

دي method جديدة على الـ String prototype، اسمها at(). بترجع الحرف عند الـ index المحدد، وبتسمح باستخدام مؤشرات سالبة للوصول للحروف من آخر النص.

مثال:#

const str = 'hello';
console.log(str.at(0));  // 'h'
console.log(str.at(-1)); // 'o'

Error Cause#

الـ Error Cause هي خاصية جديدة في JavaScript بتسمحلك تضيف معلومات عن السبب الأصلي للخطأ لما ترمي (throw) خطأ جديد. الفكرة هي إنك لما يكون عندك خطأ، أحياناً بيكون السبب الأصلي للخطأ خطأ تاني، والخاصية دي بتساعدك تحتفظ بالمعلومات دي.

بدون Error Cause#

لو ما استخدمتش Error Cause، هيبقى عندك كود زي ده:

try {
  // تخيل إن دي دالة بتقرأ ملف
  readFile('nonexistentFile.txt');
} catch (originalError) {
  throw new Error('Failed to read file');
}

باستخدام Error Cause#

لو استخدمت Error Cause، هيبقى عندك كود زي ده:

try {
  // تخيل إن دي دالة بتقرأ ملف
  readFile('nonexistentFile.txt');
} catch (originalError) {
  throw new Error('Failed to read file', { cause: originalError });
}

إزاي تستخدمها#

لما ترمي خطأ جديد، ممكن تضيف الخاصية cause وتحدد الخطأ الأصلي. بعد كده، لما تعمل كاتش (catch) للخطأ، تقدر تطبع أو تستخدم السبب الأصلي للخطأ.

try {
  try {
    // دي دالة بتعمل حاجة ممكن تفشل
    doSomethingRisky();
  } catch (originalError) {
    throw new Error('Something went wrong', { cause: originalError });
  }
} catch (error) {
  console.log(error.message); // "Something went wrong"
  console.log(error.cause);   // يطبع الخطأ الأصلي
}

الفوائد#

• توفير معلومات إضافية: يساعدك في تتبع أسباب الأخطاء بسهولة أكبر.
• تحليل أفضل للأخطاء: لما يكون عندك سلسلة من الأخطاء، تقدر تفهم السياق الكامل للخطأ بسهولة.
• تحسين تجربة التطوير: بيخلي عملية الديباجينج (debugging) أسهل وأسرع.

باختصار، الـ Error Cause بتخليك تقدر تضيف سبب إضافي للخطأ بحيث تقدر تتبع الأخطاء بشكل أفضل وتفهمها بشكل أعمق، خصوصاً لما يكون عندك أكتر من مستوى من الخطأ في الكود بتاعك.

Join our whatsapp group here
My Channel here