Naukę języka obcego zazwyczaj zaczynamy od poznania podstawowego słownictwa. Wraz ze wzrostem naszego poziomu zaawansowania staramy się dotykać coraz bardziej złożonych jego aspektów, wyjątków i dziwactw - czyli jego gramatyki.

Języki programowania również mają swoją gramatykę, którą jest nic innego jak poprawność składniowa tworzonego kodu. Z czego zatem składa się kod? W zasadzie odpowiedź jest bardzo prosta - z wyrażeń i instrukcji. Wyrażenia w kodzie są odpowiednikami zdań. Zaryzykuję stwierdzenie, że pisanie programu jest niczym pisanie opowieści. Im lepsze zdania, tym ciekawsza historia.

W językach naturalnych, aby osiągnąć zamierzony efekt, wykorzystujemy interpunkcję, zabiegi językowe, tak jak metafory i parafrazy, dzielimy opowieść na paragrafy i rozdziały. W kodzie znajdziemy dużo analogii - klasy, obiekty jako rozdziały, bloki jako akapity, średniki i nawiasy jako znaki interpunkcyjne.

Mógłbym pewnie dość dużo napisać na temat samej składni w ogólnikach, ale dziś chciałbym się skupić na jednym rodzaju znaków wykorzystywanych w kodzie Javascript a mianowicie na nawiasach klamrowych.

Słynne klamerki

Nie byłbym sobą, gdybym nie zaczął tej historii od początku - czyli od lat 60. XX wieku. Do lat 60. kod zapisywano tylko z wykorzystaniem dwóch rodzajów nawiasów: okrągłe () oraz kwadratowe []. Dość szybko stało się to problematyczne, ponieważ programy były się coraz bardziej złożone, a kod stawał się przez to mylący.

Pierwszym językiem do którego wprowadzono nowy znak interpunkcyjny, czyli {}, był BCPL (Basic Combined Programming Language). BCPL został zaprojektowany w 1967 roku przez Martina Richardsa na Uniwersytecie w Cambridge. Język dał podwaliny pod język B, który powstał kilka lat później. Jest to o tyle ciekawe, ponieważ wraz z rozwojem B, na rynku pojawił się język C, z którego Javascript dość mocno czerpał.

Literały obiektu

Klasycznym przykładem wykorzystania nawiasów klamrowych w JS jest literał obiektu. Obiekt w JS możemy stworzyć na kilka sposobów: z wykorzystaniem słowa kluczowego new, z wykorzystaniem wbudowanej metody statycznej Object.create lub za pomocą literału obiektu, czyli {}. Najczęściej spotykanym sposobem tworzenia nowych obiektów będzie właśnie użycie literału. Spójrz na poniższy kod:

Warto zwrócić uwagę na sposób zapisu - w powyższym przykładzie tworzymy nowy obiekt, który będzie zawierał dwie właściwości: name oraz age. Zasada jest prosta: nazwa właściwości, następnie dwukropek, potem wartość przypisana i ostatecznie przecinek, który jest niezbędny, jeśli dodawana właściwość nie jest ostatnią w obiekcie.

Pobranie wartości z takiego obiektu jest bardzo proste. Możemy wykorzystać zapis z kropką, np.:

Obiekty tworzone za pomocą literałów mogą przechowywać dowolne typy danych. Do samego obiektu mamy również dostęp za pomocą wskaźnika this, o ile funkcja dodana do obiektu nie jest arrow function.

Bloki

Użycie nawiasów klamrowych do tworzenia obiektów jest bardzo naturalne w języku Javascript. Stosowanie pozostałych możliwości jest mniej popularne, co wcale nie znaczy, że są one gorsze. Z nawiasami klamrowymi w JS możemy się spotkać jeszcze w jednym miejscu. Przeanalizujmy poniższe przykłady:

Powyższy przykład pokazuje inne zastosowanie dla nawiasów klamrowych - jako bloki. Czym jest wspomniany blok? Blok kodu to nic innego jak grupa instrukcji, która może następować po dowolnym słowie kluczowym: if, else, for, while itp. Granice bloku wyznaczane są przez nawiasy klamrowe.

Instrukcje znajdujące się w funkcji show znajdują się wewnątrz bloku tej funkcji, podobnie przypisanie wartości do zmiennej result i jej zwrócenie z funkcji - znajdują się w bloku instrukcji warunkowej.

Oba przykłady - zarówno bloku, jak i literału są w miarę intuicyjne i logiczne. Spójrzmy zatem na inny rodzaj bloku:

Najbardziej interesujące nawiasy w powyższym przykładzie to nawiasy klamrowe, które obramowują cały kod. Takie klamry oznaczają, że zamknęliśmy nasz kod w bloku, a nie w obiekcie. Świadczy o tym zastosowana składnia. Zwróćmy uwagę na to, że zapis taki, jak na przykładzie poniżej nie będzie poprawny.

A co się stanie jeśli zapiszemy powyższy przykład troszkę inaczej.

Taki zapis jest poprawny! Ale dlaczego? Odpowiedź jest prosta… etykiety.

Etykiety

Jedną z mało znanych funkcjonalności języka Javascript są tak zwane „etykiety” (ang. labels). Etykiety służą do oznaczania wyrażeń za pomocą identyfikatora. Mogą być przydatne wraz ze słowami kluczowymi break oraz continue, które pozwalają nam na przeskakiwanie pomiędzy instrukcjami, które zostały oznaczone etykietą. W ostatnim przykładzie w bloku stworzyliśmy dwie instrukcje, odpowiednio opisane etykietami a i b.

Dlaczego w bloku b: 1 zwróciło błąd, natomiast b: b = 1 nie? 1 samo w sobie nie jest instrukcją, ponieważ jest wartością, ale już przypisanie wartości 1 do zmiennej b (globalnej w tym wypadku) jest instrukcją.

Składnia etykiety wygląda następująco: <etykieta> <dwukropek> <instrukcja>.

Zatem czas na zadanie dla Ciebie. Jaka wartość wyświetli się w konsoli?

Oczywiście 10. Instrukcja break myLabel; zatrzymała dalsze przetwarzanie bloku i kolejne przypisania wartości nie miały miejsca.

Destrukturyzacja

Innym miejscem, gdzie znajdziemy nawiasy klamrowe będą wyrażenia destrukturyzacji obiektów, zarówno w argumentach funkcji, jak i poza nią.

Zabieg destrukturyzacji pozwala nam na otrzymanie bezpośredniego dostępu do wartości. W przykładzie const { name, age } = obj; tworzone są zmienne name i age, które zawierają odpowiednie wartości z właściwości destrukturyzowanego obiektu. Nazwa właściwości stała się nazwą zmiennej. Natomiast w funkcji whoIs nie mamy do czynienia, wbrew pozorom, z literałem obiektu czy też blokiem kodu. Zabieg jest identyczny jak w sytuacji ze zmiennymi.

Podsumowanie

Nawiasy klamrowe są z nami od końca lat 60. XX wieku. Na stałe zagościły w wysokopoziomowych językach programowania, stając się istotnym elementem ich gramatyki. W JS odpowiadają za wiele mechanizmów, z których najciekawsze to literały obiektów, destrukturyzacje i bloki. Mam nadzieję, że udało mi się dziś rozjaśnić kilka kwestii. Gramatyka z zasady jest trudna (w językach naturalnych to już w ogóle), ale poznając dobrze jej reguły, możemy tworzyć naprawdę wartościowe rzeczy, nie wpadając w dziwne pułapki języków programowania, jak wspomniane dziś etykiety w Javascript.