Cili është ndryshimi midis një kopjeje sipërfaqësore dhe një kopjeje të thellë?

Question

Accepted Answer

Objektet caktohen **sipas referencës**, kështu që `b = a` nuk kopjon — të dyja tregojnë të njëjtin objekt. Një kopje **sipërfaqësore** përthyes nivelin e sipërm por ndan referenca të mbishtrirë; një kopje **e thellë** përthyes gjithçka, plotësisht e pavarur.

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ independent (top-level primitive)
shallow.address.city = "LA";     // ⚠️ ALSO changes original.address.city — shared!

original.address.city; // "LA"  ← mutated through the shallow copy
```

Objekti `address` i mbishtrirë është **e njëjta referencë** në të dyja, kështu që mutimi i tij ndikon në të dyja.

## Bërja e një kopjeje të thellë

```js
const deep = structuredClone(original); // modern, built-in, handles most types
deep.address.city = "Chicago";          // ✅ original is untouched
```

Opsionet e tjera dhe paralajmerimet e tyre:

```js
JSON.parse(JSON.stringify(obj)); // simple, but LOSES functions, Dates → strings, undefined
// lodash: _.cloneDeep(obj)       // robust, for complex cases
```

## Pse ka rëndësi

Este një burim kryesor i gabimeve "pse ndryshoi gjendja ime papritur?", veçanërisht në React/Redux ku nuk duhet të ndryshoni gjendjen.

Përhapja funksionon mirë kur ndryshoni vetëm fusha të nivelit të sipërm, por për përditësimet e mbishtrirë duhet të kopjoni edhe nivelin e mbishtrirë (`{ ...obj, address: { ...obj.address, city } }`) ose të bëni një klonë të thellë.