قابل للتغيير وغير قابل للتغيير في JavaScript
تشرح هذه المقالة مفهومي القابلية للتغيير وعدم القابلية للتغيير في JavaScript۔
YouTube Video
قابل للتغيير وغير قابل للتغيير في JavaScript
ما هو القابل للتغيير؟
القابل للتغيير يعني أن القيمة يمكن تعديلها۔ يُعد الكائنات والمصفوفات، التي تُعرف بـ أنواع الإشارة، أمثلة نموذجية للهياكل القابلة للتغيير.۔
مثال على كائن قابل للتغيير
1let person = { name: "Alice", age: 25 };
2person.age = 26;
3console.log(person); // { name: "Alice", age: 26 }
في هذا الكود، تم تغيير خاصية age في كائن person من 25 إلى 26۔ نظرًا لأن الكائنات تُمرر على أساس المرجع، يتم تعديل المحتوى في عنوان الذاكرة المخزن في المتغير person.۔
مثال على مصفوفة قابلة للتغيير
1let numbers = [1, 2, 3];
2numbers.push(4);
3console.log(numbers); // [1, 2, 3, 4]
في هذا الكود، تم استخدام طريقة push لإضافة العنصر الجديد 4 إلى المصفوفة الأصلية.۔ هذا يعدل المصفوفة الأصلية، مما يجعله عملية قابلة للتغيير.۔
مثال داخل دالة
1// Function to append a value to an array
2function append(arr, value) {
3 arr.push(value); // Modify the original array
4 console.log(arr);
5}
6
7let numbers = [1, 2, 3];
8append(numbers, 4);
9
10console.log(numbers); // [1, 2, 3, 4] (original array is modified)
عند تنفيذ عمليات قابلة للتغيير داخل دالة، يتم تعديل المصفوفة الأصلية أيضًا.۔
ما هو غير القابل للتغيير؟
غير القابل للتغيير يعني أن القيمة لا يمكن تعديلها۔ الأنواع الأولية في الأساس غير قابلة للتغيير۔
مثال على نوع أولي غير قابل للتغيير
1let str = "hello";
2str[0] = "H";
3console.log(str); // "hello"
محاولة تغيير أول حرف من النص str إلى H تفشل لأن النصوص غير قابلة للتغيير.۔
مثال داخل دالة
1// Function to increment a number
2function increment(num) {
3 num++; // This modifies only the local copy of num
4 console.log(num);
5}
6
7let number = 10;
8increment(number);
9
10console.log(number); // 10 (original number remains unchanged)
نظرًا لأن الأرقام غير قابلة للتغيير، فإن العمليات داخل الدالة لا تؤثر على المتغير الأصلي.۔
العمليات غير القابلة للتغيير على المصفوفات
المصفوفات قابلة للتغيير، ولكن إنشاء مصفوفة جديدة بدلاً من تعديل الأصلية يسمح بعمليات غير قابلة للتغيير.۔
1// Create an array of numbers
2let numbers = [1, 2, 3];
3
4// Create a new array by spreading the original and adding a new element
5let newNumbers = [...numbers, 4];
6
7console.log(numbers); // [1, 2, 3] (original array is unchanged)
8console.log(newNumbers); // [1, 2, 3, 4] (new array with an added element)
هنا، يتم استخدام بناء الجملة المتوقع (...) لإنشاء مصفوفة جديدة newNumbers۔ نظرًا لعدم تعديل مصفوفة numbers الأصلية، فإن هذه عملية غير قابلة للتغيير۔
فوائد استخدام هياكل البيانات غير القابلة للتغيير
تحسين القدرة على التنبؤ
نظرًا لأن البيانات غير القابلة للتغيير لا يمكن تعديلها، فإنه من غير المرجح حدوث تغييرات غير متوقعة، مما يقلل من خطر الأخطاء۔
التوافق مع المكتبات القائمة على الخصائص غير القابلة للتغيير
غالبًا ما يتم تصميم مكتبات مثل React و Redux مع مراعاة البيانات غير القابلة للتغيير، مما يجعل إدارة الحالة أسهل عند استخدامها بشكل صحيح۔
جعل الكائنات غير قابلة للتغيير باستخدام Object.freeze
يمكن استخدام Object.freeze لمنع التعديلات على الكائن۔
1// Create a frozen object (properties cannot be modified)
2const person = Object.freeze({ name: "Alice", age: 25 });
3
4// Attempt to modify a property (ignored in non-strict mode, error in strict mode)
5person.age = 26;
6
7console.log(person); // { name: "Alice", age: 25 }
ومع ذلك، يقوم Object.freeze بتنفيذ تجميد سطحي، مما يعني أن خصائص الكائنات المتداخلة تبقى قابلة للتعديل۔
1// Create a frozen object with a nested object
2const user = Object.freeze({ profile: { name: "Bob" } });
3
4// Attempt to modify a nested property (this works because Object.freeze() is shallow)
5user.profile.name = "Charlie";
6
7console.log(user.profile.name); // "Charlie" (nested object is still mutable)
لإنشاء كائن غير قابل للتغيير بالكامل، يلزم إجراء تجميد عميق۔
1// Function to deeply freeze an object, making all nested objects immutable
2function deepFreeze(obj) {
3 Object.keys(obj).forEach(key => {
4 if (typeof obj[key] === "object" && obj[key] !== null) {
5 deepFreeze(obj[key]); // Recursively freeze nested objects
6 }
7 });
8 return Object.freeze(obj); // Freeze the top-level object
9}
10
11// Create a deeply frozen object
12const user = deepFreeze({ profile: { name: "Bob" } });
13
14// Attempt to modify a nested property (ignored)
15user.profile.name = "Charlie";
16
17console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)
الملخص
- يمكن تعديل البيانات القابلة للتغيير، بما في ذلك الكائنات والمصفوفات۔
- لا يمكن تعديل البيانات غير القابلة للتغيير، بما في ذلك الأنواع الأولية مثل النصوص والسلاسل والأرقام۔
- استخدام بناء الجملة المتوقع أو
mapيمكّن من عمليات البيانات غير القابلة للتغيير.۔ - يمكن استخدام
Object.freezeوdeepFreezeلمنع التعديلات على الكائنات۔ - يسمح استخدام البيانات غير القابلة للتغيير بالحصول على شفرة أكثر قابلية للتنبؤ وأقل عرضة للأخطاء۔
التصميم غير القابل للتغيير يعزز من أمان الكود وسهولة قراءته، لذا استفد منه جيدًا!
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔