W tym wpisie pogadamy sobie trochę o zmiennych, które są jednym z podstawowych elementów przy tworzeniu programów, zarówno w JavaScript, jak i w większości istniejących języków programowania. Dowiesz się, czym są zmienne w JavaScript i jak z nich korzystać. Temat absolutnie niezbędny do pracy z kodem, dlatego gorąco zachęcam do lektury!
Co to jest zmienna w programowaniu?
Temat zmiennych został przeze mnie poruszony we wpisie dotyczącym CSS Variables, więc możesz znać już ten koncept w kontekście CSS. Dzisiaj jednak skupimy się konkretnie na wykorzystaniu zmiennych w JavaScript.
Pozwól, iż zacznę od dosyć abstrakcyjnego przykładu, bo takie lepiej się zapamiętuje (sprawdzone info ). Wyobraź sobie, iż rozmawiasz ze znajomą o książce, którą ostatnio przeczytałaś. Powiedzmy, iż była to książka Czysty Kod Roberta C. Martina, którą btw. polecam serio przeczytać .
Ty: Właśnie skończyłam czytać książkę Czysty Kod Roberta C. Martina.
Koleżanka: A o czym jest ta książka?
Ty: To książka o tym jak pisać bardziej czytelny kod. Dużo osób ją polecało, więc też się skusiłam.
Koleżanka: I jak Ci się podobała (ta książka)?
Ty: Ogólnie dobra (ta książka), chociaż nie wszystko z niej zrozumiałam.
(Wybacz za ten dialog wyciągnięty z klanu, ale to tylko na potrzeby przykładu. )
Zwróć uwagę, iż nie używasz w tej rozmowie pełnej nazwy Czysty Kod Roberta C. Martina, bo skoro podałaś tytuł wcześniej, to nie musisz się powtarzać. Możesz powiedzieć krótko „książka” i obie wiecie, o jaką dokładnie chodzi.
Podobnie jest w przypadku zmiennych. Pozwalają one nazwać pewne wartości, dzięki czemu nie trzeba ich później znowu podawać. Można je traktować jak etykiety reprezentujące fragment informacji. Zmienna ma nazwę, dzięki czemu możemy się do niej odwoływać, a także pobierać i zmieniać jej wartość w dowolnym momencie.
Jak nazywać zmienne w JavaScript?
Musisz wiedzieć, iż JavaScript wymusza na nas w tym zakresie stosowanie się do kilku zasad. Trzeba korzystać z dopuszczalnych znaków i pamiętać o rozróżnianiu wielkości liter. Oprócz tego nie można używać niektórych, zarezerwowanych dla języka słów.
Odpowiednia składnia
Nazywając zmienną, musisz pamiętać o 3 zasadach:
- nazwy zmiennych mogą składać się ze znaków alfanumerycznych (cyfr i liter), znaku podkreślenia (_) oraz znaku dolara $,
- nazwy zmiennych nie mogą zaczynać się od cyfry,
- nazwy zmiennych nie mogą zawierać spacji
Prawidłowe nazwy zmiennych to np.:
Age
best_score
$current_status
itemsCount
Zastrzeżone/zarezerwowane słowa
Niektórych słów nie można używać jako nazw zmiennych, ponieważ mają one szczególne znaczenie i pełnią konkretne zadanie w JavaScript. Zobaczmy teraz kilka z nich:
return
for
break
if
Pełną listę zarezerwowanych słów w JavaScript znajdziesz np. na w3schools
Wielkość liter
Pamiętaj, iż JavaScript jest językiem rozróżniającym wielkość liter, więc zmienne również cechują się tym zachowaniem. Zmienna o nazwie „myname” nie jest tym samym co zmienna „myName”. „Wiek” to nie to samo co „wiek”.
Weź ten szczegół pod uwagę, ponieważ jest to częste źródło problemów w kodzie, które czasami są trudne do wykrycia. Dzieje się tak dlatego, iż czasami myślisz, iż używasz zmiennej, która powinna mieć określone dane, ale jeżeli popełnisz błąd podczas jej pisania, będzie to już zupełnie inna zmienna.
Jak deklarować zmienne w JavaScript
Deklarowanie zmiennych polega na poinformowaniu systemu, iż zamierzamy używać konkretnej zmiennej. JavaScript daje swobodę przy deklarowaniu zmiennych, ponieważ nie jesteśmy zobowiązani do jawnego określania, w przeciwieństwie do tego, co dzieje się w językach takich jak Java, C, C# i wiele innych. Co znaczy mniej więcej tyle, iż pisząc kod, możesz użyć zmiennej, mimo iż jej wcześniej nie zadeklarujesz. Dobrą praktyką jest to jednak robić.
Deklaracja zmiennej JavaScript z var
JavaScript zawiera słowo „var”, którego używamy, gdy chcemy zadeklarować jedną lub kilka zmiennych. Słowo „var” służy do zdefiniowania zmiennej przed jej użyciem.
var age
var car
Możesz także przypisać wartość do zmiennej podczas jej deklaracji:
var age = 18
var car = "polonez"
Dozwolone jest również zadeklarowanie wielu zmiennych w tym samym wierszu, o ile są one oddzielone przecinkami:
var age, car
Deklaracja zmiennej JavaScript z let i const
Do 2015 roku var był jedynym sposobem, w jaki mogliśmy zadeklarować zmienną w JavaScript. Wraz z wyjściem wersji ES6 (pamiętaj, iż JavaScript jest standardem i jako taki ewoluuje z biegiem czasu) pojawiły się nowe sposoby deklarowania zmiennych: const i let. To właśnie z nich radzę korzystać, a var potraktować bardziej jako ciekawostkę, żebyś nie była zagubiona, jak trafisz na starsze artykuły w necie lub legacy kod, gdzie będzie to wykorzystane.
Obecnie mamy 2 główne sposoby deklarowania zmiennych. Pierwszym z nich jest użycie CONST:
const a = 0
Drugim sposobem jest wykorzystanie LET:
let a = 0
Ok, ale czym to się różni?
Tworząc zmienną, a tak adekwatnie stałą const, pamiętaj, iż nie da się jej potem zmienić. Nie możesz przypisać do niej nowej wartości. jeżeli spróbujesz to zrobić konsola zwróci Ci błąd
TypeError: Assignment to constant variable
const a = 0
a = 1 // to nie zadziała, dostaniemy błąd
Z kolei let już na to pozwala i możemy w dowolnym momencie zmienić wartość zmiennej zadeklarowanej w ten sposób.
let a = 0
a = 1 // to śmiga
Co ciekawe, jeżeli do zmiennej, a tak adekwatnie stałej const przypiszesz obiekt lub tablicę, JavaScript pozwala Ci zmienić jej wartość. Nie traktuje tego jako przypisanie nowej wartości przez zmianę, ale jako edycję adekwatności obiektu (tablicy), do której się odnosi.
const person = { name: "bob" };
person.name = "Seba";
To zadziała, bo zmienna wskazuje (jest przypisany do niej) przez cały czas ten sam obiekt, tylko jego „wnętrze” się zmienia.
Więcej o tym czym się różni let i const oraz kiedy, korzystać, z którego poruszymy w osobnym wpisie.
Podsumowanie
Wiesz już, czym są zmienne w JavaScript i po co są nam w ogóle potrzebne. Umiesz je odpowiednio nazwać, nie naruszając przy tym zasad narzuconych przez język. Poznałaś też dostępne metody na ich deklarację. W następnym artykule będziemy kontynuować naukę o zmiennych w JavaScript. Weźmiemy na tapet kolejne z ważnych pojęć potrzebnych do poskromienia frontu, czyli zakres zmiennych (scope) . Stay tuned!
