Mutable և Immutable Array մեթոդներ JavaScript-ում — ի՞նչ տարբերություն

JavaScript-ում զանգվածների (array) վրա գործող մեթոդները կարող են բաժանվել երկու խմբի՝

• Immutable մեթոդներ – չեն փոփոխում օրիգինալ զանգվածը
• Mutable մեթոդներ – ուղղակիորեն փոփոխում են օրիգինալ զանգվածը

Այս տարբերությունը շատ կարևոր է հասկանալու համար, երբ գրում ես կոդ, որը պետք է լինի կանխատեսելի, բացատրելի, կամ օգտագործվում է վիճակների (state) կառավարման մեջ, օրինակ՝ React-ում։

---

Ինչու է կարևոր հասկանալ դա

Երբ դու փոխանցում ես զանգվածը ֆունկցիայի մեջ, այն փոխանցվում է հղմամբ (reference), ոչ թե պատճենով։ Այսինքն՝ եթե մեթոդը փոխում է զանգվածը, այն կարող է աննկատ փոխել արժեքներ ուրիշ տեղերում էլ։

    const arr = [1, 2, 3];
    const result = arr.reverse(); //  MUTABLE
    
    console.log(arr);    // [3, 2, 1] 
    console.log(result); // [3, 2, 1]

---

Immutable մեթոդներ (չեն փոխում օրիգինալ զանգվածը)

Մեթոդ	Նկարագրություն
map	Վերադարձնում է նոր զանգված՝ փոխված արժեքներով
filter	Ֆիլտրում է զանգվածը՝ վերադառձնալով նորը
slice	Կտրում է զանգվածը՝ վերադարձնելով նոր մաս
concat	Միավորում է զանգվածները՝ առանց օրիգինալը փոխելու
flat, flatMap	Հարթեցնում է զանգվածները, բայց չի փոխում օրիգինալը
toSorted, toReversed, toSpliced	Նոր ES2023 մեթոդներ՝ immutable տարբերակներ

    const arr = [1, 2, 3];
    const doubled = arr.map(x => x * 2); // [2, 4, 6]
    
    console.log(arr);    // [1, 2, 3]
    console.log(doubled); // [2, 4, 6]

---

Mutable մեթոդներ (փոխում են օրիգինալ զանգվածը)

Մեթոդ	Նկարագրություն
push	Ավելացնում է տարր
pop	Հանում է վերջին տարրը
shift	Հանում է առաջին տարրը
unshift	Ավելացնում է սկզբում
splice	Կտրում/ավելացնում է տեղում
sort	Դասավորում է նույն զանգվածը inplace
reverse	Շրջում է inplace

    const arr = [1, 2, 3];
    arr.push(4); //  arr = [1, 2, 3, 4]

---

ES2023-ում՝ immutable տարբերակները

ES2023-ից (ES14) JavaScript-ը ներառում է նոր տարբերակներ՝ immutable ձևով գործողությունների համար։

Նոր մեթոդ	Ի՞նչ է անում
toSorted()	Նման է sort()-ին, բայց immutable է
toReversed()	Նման է reverse()-ին, բայց immutable է
toSpliced()	Նման է splice()-ին, բայց immutable է

    const arr = [3, 1, 2];
    const sorted = arr.toSorted(); // [1, 2, 3]
    console.log(arr); // [3, 1, 2] 

---

React-ում կարևորություն

React-ում state-ը երբեք չպետք է ուղղակիորեն փոխվի։ Այդ պատճառով օգտագործվում են immutable մեթոդներ։ Օրինակ՝

    //  Վատ:
    state.numbers.push(4);
    
    // Լավ:
    setState(prev => ({
      numbers: [...prev.numbers, 4]
    }));