Modest Programmer logo
8 września 2018
Tagi: JavaScript
W jednym z początkowych artykułów w kursie podstaw JavaScript'a pisałem o typach wartościowych (zwane też proste, prymitywne) w tym języku, wspomniałem że za jakiś czas przedstawię Ci typ referencyjny. Po poznaniu solidnych podstaw o obiektach, właśnie nadszedł ten czas. Dla przypomnienia typy wartościowe to number, string, boolean, undefined oraz null. Jeśli chodzi o typy referencyjne to są nimi object, function oraz array.

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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin