عامل الاندماج العديم القيمة في JavaScript

توضح هذه المقالة عامل الاندماج العديم القيمة في JavaScript۔

YouTube Video

عامل الاندماج العديم القيمة في JavaScript

في JavaScript، يقوم عامل الاندماج العديم القيمة (??) بتقييم ما إذا كانت القيمة هي null أو undefined ويعيد قيمة افتراضية مختلفة إذا كانت كذلك۔ إنه مشابه لمشغل OR المنطقي المعتاد (||)، ولكنه يختلف في أنه متخصص في null و undefined۔

يُرجع عامل المنطق OR القيمة الموجودة على الجهة اليمنى إذا كانت القيمة الموجودة على الجهة اليسرى باطلة (falsy)، بينما يُرجع عامل تلاصق القيمة الافتراضية القيمة الموجودة على الجهة اليمنى فقط عندما تكون القيمة الموجودة على الجهة اليسرى null أو undefined۔ تتيح هذه الميزة التعامل الصحيح مع القيم مثل 0 والسلاسل النصية الفارغة ("")۔

الصياغة الأساسية

1let result = value ?? defaultValue;

• value هي القيمة التي يتم التحقق منها۔
• defaultValue هي القيمة التي يتم إرجاعها عندما تكون value تساوي null أو undefined۔

أمثلة على استخدام عامل الاندماج العديم القيمة

المثال التالي ينفذ عملية لإرجاع قيمة افتراضية في حال كانت null أو undefined۔

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

في هذا الكود، نظرًا لأن name هي null، يتم إرجاع قيمة defaultName، وهي "Anonymous"۔ إذا كانت name قيمتها غير null أو undefined، فسيتم إرجاع تلك القيمة۔

الاختلافات مع مشغل OR المنطقي

عامل تلاصق القيمة الافتراضية يشبه عامل المنطق OR ولكنه يحتوي على اختلاف مهم۔ عامل المنطق OR يتحقق من القيم 'الباطلة' (false، 0، NaN، ""، null، undefined، إلخ)، بينما يتحقق عامل تلاصق القيمة الافتراضية فقط من null و undefined۔

مثال على مشغل OR المنطقي:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

مثال على عامل الاندماج العديم القيمة:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

بهذه الطريقة، يُبقي عامل تلاصق القيمة الافتراضية على القيم الصالحة مثل 0 وسلاسل النصوص الفارغة ("") ويعيد قيمة افتراضية فقط عند الحاجة۔ نظرًا لأن عامل المنطق OR يعامل هذه القيم على أنها باطلة ويُرجع القيمة الافتراضية، فمن المهم اختيار العامل المناسب بناءً على حالة الاستخدام۔

مثال عند استخدامه بالاقتران:

يمكن أيضًا الجمع بين عامل تلاصق القيمة الافتراضية وعوامل منطقية أخرى، ولكن يجب الحذر عند القيام بذلك۔

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• على سبيل المثال، عند استخدامه مع عامل المنطق OR (||) أو عامل المنطق AND (&&)، يجب استخدام الأقواس لتوضيح ترتيب العمليات۔

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• في هذا المثال، يتم تقييم a ?? b أولاً، ونظرًا لأن a هي null، يتم إرجاع b۔ ثم يتم تقييم b || c، وحيث أن b قيمة غير صادقة، يتم في النهاية إرجاع c۔

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

الحالات التالية هي التي يكون فيها عامل تلاصق القيمة الافتراضية مفيدًا۔

• القيم الافتراضية للنماذج يمكن استخدام هذا في السيناريوهات التي يتم فيها تعيين قيمة افتراضية لحقول إدخال النموذج عندما لا يُدخل المستخدم أي شيء۔

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• معالجة استجابات API يمكن تنفيذ معالجة احتياطية عندما تكون القيمة null أو undefined في الردود الواردة من API۔

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

الملخص

عامل تلاصق القيمة الافتراضية (??) مفيد جدًا لتهيئة البيانات والتعامل مع استجابات واجهات البرمجة (API)، حيث يُرجع قيمة افتراضية عند مواجهة null أو undefined۔ على وجه الخصوص، يُعتبر اختيارًا أفضل من عامل المنطق OR التقليدي (||) عندما تريد التعامل بشكل صحيح مع القيم الباطلة مثل 0 أو سلاسل النصوص الفارغة۔

حول عامل تعيين الدمج الصفري (??=)

نظرة عامة

في JavaScript، تم تقديم عامل تعيين الدمج الصفري ??= لتعيين قيمة جديدة بكفاءة للمتغيرات التي تحتوي على null أو undefined۔ يعد هذا العامل اختصاراً مريحاً لتعيين قيمة إلى متغير فقط إذا كانت القيمة المحددة null أو undefined۔

الاستخدام الأساسي

يعمل عامل إسناد تلاصق القيمة الافتراضية كما يلي:۔

• إذا كان المتغير null أو undefined، يقوم بتعيين القيمة الموجودة في الجهة اليمنى۔
• إذا لم يكن المتغير null ولا undefined، فإنه لا يقوم بأي شيء ويحافظ على القيمة الحالية۔

الصياغة

الصيغة الأساسية لعامل إسناد تلاصق القيمة الافتراضية كما يلي:۔

1x ??= y;

• يتم تعيين y إلى x إذا كانت x تساوي null أو undefined۔
• إذا كانت x لديها قيمة بالفعل (ليست null أو undefined)، فلن تتغير قيمة x۔

مثال

لنلقِ نظرة على مثال أساسي لمعامل التخصيص التوليفي الصفري۔

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• في هذا الكود، حيث أن userName تساوي null، يتم تعيين قيمة defaultName۔

بعد ذلك، إليك مثال حيث تكون القيمة ليست null ولا undefined۔

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• في هذه الحالة، حيث أن القيمة "Alice" تم تعيينها بالفعل لـ userName، لم يتم القيام بأي تعيين۔

مقارنة مع عوامل التعيين الأخرى

تحتوي JavaScript على العديد من عوامل التعيين الأخرى أيضاً۔ على وجه الخصوص، فإن الفرق مع عامل التعيين OR المنطقي (||=) مهم۔

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

عامل الإسناد OR يُسند قيمة حتى عند مواجهة القيم الباطلة مثل false أو 0 أو سلسلة نصوص فارغة ("")، بينما يعمل عامل إسناد تلاصق القيمة الافتراضية فقط عندما تكون القيمة null أو undefined۔

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

نظرًا لأن عامل إسناد تلاصق القيمة الافتراضية يعمل فقط مع null أو undefined، فإنه مفيد جدًا عندما تريد الاحتفاظ بالقيم مثل 0 أو false۔

حالات الاستخدام في العالم الحقيقي

يمكن أن يكون هنالك استخدام حقيقي لمشغل تعيين الالتقاء الصفري كما يلي:۔

1. تعيين القيم الافتراضية

   إنه مفيد لتعيين القيم الافتراضية عندما تكون المدخلات من المستخدم أو استجابات API يمكن أن تكون null أو undefined۔

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. التعامل مع المعلمات الاختيارية

   يمكن استخدامه أيضًا لتنفيذ إجراءات افتراضية عندما لا يتم تحديد معاملات الوظائف۔

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

الملخص

عامل إسناد تلاصق القيمة الافتراضية (??=) يسند قيمة فقط عندما تكون القيمة على الجهة اليسرى null أو undefined، مما يجعل الكود أكثر اختصارًا ويساعد في منع الإسنادات غير المقصودة۔ خاصة عند التعامل مع القيم "الخاطئة" مثل 0 أو false، قد يكون أكثر ملاءمة من عامل OR التقليدي (||=)۔

من خلال استخدام هذا العامل، يمكنك إنشاء رمز أكثر قوة وسهولة في القراءة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video