W standardzie ES6 wprowadzono wiele zmian i unowocześnień do języka Javascript. Jednym z najważniejszych z nich jest tzw. spread operator. Dzięki niemy możemy uniknąć mutowania obiektów.
Mutowanie obiektów
Jak wspomniałem na początku serii wpisów o Javascript’cie, dane możemy przechowywać w szufladkach w pamięci operacyjnej – w tzw. zmiennych i stałych. Różnica między nimi widoczna jest już w nazwie – zmienna może się zmieniać a stała po przypisaniu jej wartości jest niezmienna.
<script>
try
{
const a = 5;
a = 4;
document.write(a);
}
catch(err)
{
document.write(err);
}
</script>Jak widać uzyskaliśmy błąd, a nie przypisanie wartości. Jednak zadziwiający efekt pojawi się, gdy stała a będzie obiektem. Zobaczmy:
<script>
try
{
const a = {value: 5};
a.value = 4;
document.write(a.value);
}
catch(err)
{
document.write(err);
}
</script>Jak widać, nie dość, że żaden błąd się nie pojawił, to jeszcze wartość value uległa zmianie. Dlaczego tak się stało? Otóż słowo const nie chroni obiektów przed tzw. mutacją czyli zmianą z zachowaniem referencji. Brzmi skomplikowanie . Prościej rzecz ujmując stała sprawdza czy adres obiektu w pamięci jest taki sam, i jeżeli się nie zmienił to nie wyrzuca błędów. Jednak jeżeli przypiszemy zupełnie nowy obiekt błąd już się pojawi, bo powstanie zupełnie nowa wartość, którą chcemy przypisać.
<script>
try
{
const a = {value: 5};
a = {value: 4};
document.write(a);
}
catch(err)
{
document.write(err);
}
</script>Operator […]
Często zdarza się, że musimy uniknąć mutowania obiektów podczas ich modyfikacji. Wówczas najłatwiejszym rozwiązaniem jest użycie operatora spread, który „wyciągnie” wszystkie wartości obiektu (w tym tablicy). Funkcję tego operatora pełnią trzy kropki (…). Oto kilka przykładowych zastosowań
Najpierw prosty przykład z dokładaniem nowej wartości do obiektu. W tym przypadku dodam funkcję suma.
<script>
let a = {value: 5};
let b = {...a, value2: 4};
document.write(JSON.stringify(b));
</script>Innym wykorzystaniem jest przesłanie elementów tablicy jako oddzielnych argumentów. Oto przykład:
<script>
const tablica = [1,2,3];
function suma(liczba1,liczba2,liczba3)
{
return liczba1+liczba2+liczba3;
}
document.write(suma(...tablica));
</script>I na koniec jeszcze jedna uwaga – nie możemy użyć tego operatora do zamiany obiektu w tablicę, ponieważ Javascript nie umie przetworzyć obiektu na tablicę. W związku z tym, poniższy kod zwróci błąd.
<script>
try
{
const a = {value: 5};
const b = [...a,4];
document.write(b);
}
catch(err)
{
document.write(err);
}
</script>
