O różnice pomiędzy typami wartościowymi i referencyjnymi często lubią pytać rekruterzy na rozmowach kwalifikacyjnych na stanowisko młodszego programisty. Jaka jest różnica pomiędzy tymi dwoma typami? Zobrazuje Ci to na przykładzie. Załóżmy, że mamy 2 zmienne, dla prostoty przykładu będzie to x oraz y. Przypiszemy wartość x do y, a następnie zmienimy wartość x. Tak to będzie wyglądać dla typów wartościowych:
let x = 1;
let y = x;
x = 2;
console.log(x); //2
console.log(y); //1
Jak widać na powyższym przykładzie mimo, że przypisaliśmy x do y, a następnie zmieniliśmy wartość x, to wartość y się nie zmieniła. W sumie może się to wydawać dla Ciebie logiczne.A teraz napiszmy podobny przykład, zastosujemy tą samą technikę, ale tym razem na obiektach, czyli typach referencyjnych:
let x = { value: 1 };
let y = x;
x.value = 2;
console.log(x.value); //2
console.log(y.value) //2
Co się tutaj wydarzyło? Mimo, że zastosowaliśmy ten sam mechanizm, to jednak na typach referencyjnych zadziałał on inaczej. Dzieje się tak, ponieważ przypisując x do y, tak naprawdę przypisujemy do y referencję obiektu x, tzn. że oba te obiekty x oraz y od tej pory wskazują na tą samą referencję, czyli ten sam obiekt. Od tej pory każda zmiana w x powoduje zmianę również w zmiennej y i odwrotnie tak samo. Żeby udowodnić Ci, że działa to w obie strony dopiszmy kilka linii do kodu:let x = { value: 1 };
let y = x;
x.value = 2;
console.log(x.value); //2
console.log(y.value) //2
y.value = 4;
console.log(x.value); //4
console.log(y.value) //4
Typy wartościowe są kopiowane poprzez ich wartość, ale typy referencyjne nie przechowują żadnej wartości, przechowują tylko referencję, tzn. adres w pamięci do odpowiedniego obiektu, dlatego typy referencyjne są kopiowane poprzez tą referencję.Abyś lepiej zrozumiał różnicę pomiędzy typami wartościowymi oraz typami referencyjnymi pokaże Ci jeszcze jeden przykład, a mianowicie przekazywanie parametru do funkcji. Najpierw typ wartościowy:
let x = 1;
function increaseNumberByTen(number) {
number += 10;
}
increaseNumberByTen(x);
console.log(x); //1
Tutaj do funkcji został przekazany typ number, czyli typ wartościowy, zatem zwiększanie liczby o 10 zostało zastosowane na zupełnie innej zmiennej i została tylko ona zwiększona lokalnie w ciele funkcji.let x = { value: 1 };
function increaseNumberByTen(obj) {
obj.value += 10;
}
increaseNumberByTen(x);
console.log(x.value); //11
Tutaj do funkcji został przekazany typ object, czyli typ referencyjny. Została przekazana referencja do obiektu, więc zmiany tj. zwiększanie liczby o 10 zostało zastosowane na referencji do obiektu, dzięki czemu została zwiększona również wartość naszego pierwotnego obiektu.To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.
Poprzedni artykuł - Instrukcja warunkowa if w JavaScript.
Następny artykuł - Obiekt Math w JavaScript.