حماية الـarray في JavaScript

مقدمة

بعد اخر تحديثات صدرت في ECMAScript 2023 (ES2023) ظهرت methods لحل مشكلة مزعجة موجودة في javascript بشكل عام وهي مشكلة تغير ترتيب قيم الـarray الاصلية في حال قمت باجراء اي تعديل على الـarray في اي جزء من كود الموقع بدل اخذ نسخة منها والتعديل عليها دون التعديل على الـarray الاصلية.

مثلا لو كتبت

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

النتيجة رح تكون ان الـarray الاصلية تغير ترتيب قيمها وهنا المشكلة وتظهر بشكل اكبر في react لأن احيانا يكون معتمد على نفس الـarray عدة اجزاء من الموقع فمن الغير المنطقي التعديل على الـarray في مكان في الموقع ثم يصل تأثير هذا التعديل لبقية اجزاء الموقع وهنا ظهر الحل وهو ان

الـsort اصبح بديلها .toSorted()

const numbers = [3, 1, 2];
const sortedArray = numbers.toSorted();
console.log(sortedArray); // [1, 2, 3]
console.log(numbers); // [3, 1, 2] -> لم تتغير

الـreverse اصبح بديلها .toReversed()

const letters = ["a", "b", "c"];
const reversedLetters = letters.toReversed();
console.log(reversedLetters); // ['c', 'b', 'a']
console.log(letters); // ['a', 'b', 'c'] -> لم تتغير

الـsplice اصبح بديلها .toSpliced()

const skills = ["javascript", "typescript", "nextjs"];
const removeSkill = skills.toSpliced(0, 1);
console.log(removeSkill); // ['typescript', 'nextjs']
console.log(skills); // ['javascript', 'typescript', 'nextjs'] -> لم تتغير

قد يقول قائل

الحل بسيط وهو ان نقوم بعمل نسخة بشكل يدوي بهذا الشكل

const arr = [3, 1, 2];

const newArr = [...arr]; // النسخة اليدوية
newArr.sort();
console.log(newArr); // [1, 2, 3]

console.log(arr); // [3, 1, 2]

ولكن تذكر ان هذه الطريقة غير جيدة لاداء الكود في حال كانت الـarray ضخمة، نعم قد لا يكون فارق كبير ولكن هذه الفروقات البسيطة هي ما تحدث كارثة بعد التراكمات بالاضافة إلى ان الـmethods الجديدة اقل كود واكثر وضوحا يعني كود احترافي اكثر.

المصدر

https://allthingssmitty.com/