JavaScript: Jak zapobiec zmianie wartości tablicy?

Kopiowanie tablicy

Załóżmy, że mam taki przykład:

const original = [1, 2, 3, 4, 5];
const copy = original;

copy[0] = 7;

console.log('original: ', original); // [7, 2, 3, 4, 5]
console.log('copy: ', copy); // [7, 2, 3, 4, 5]

Stworzyliśmy kopię tablicy, a następnie zmieniliśmy jej pierwszy element. Niestety zmienił się także oryginał. Jest tak dlatego, że w ten sposób skopiowaliśmy także referencje z macierzystej tablicy.

Jak temu zapobiec?

Operator spread: ...

const original = [1, 2, 3, 4, 5];
const copyArray = [...original];

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Funkcja slice

const original = [1, 2, 3, 4, 5];
const copyArray = original.slice();

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Funkcja concat

const original = [1, 2, 3, 4, 5];
const copyArray = [].concat(original);

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Jak zapobiec zmianie w tablicy?

Jeśli zależy nam na stworzeniu tablicy, której zawartości nie chcemy zmieniać w ogóle, możemy użyć: Object.freeze. Pisałem już o niej w tym wpisie.

Przykład:

const array = Object.freeze([1, 2, 3]);

array[0] = 7; // Błąd!
array.push(12); // Błąd!
array.pop(); // Błąd!

Jak widać każda próba modyfikacji tablicy, powoduje błąd w kodzie.