Zaczynamy cykl techniczny na blogu! Na pierwszy ogień idą zagadnienia z ES6, które warto znać. Czyli gratka dla wszystkich, którzy mają do czynienia z JavaScriptem. Zarówno początkujących, jak i tych już trochę znających JS.
W tej serii mam zamiar dzielić się z Wami tematami z ES6. Artykuł powstał na podstawie lektury książki Nowoczesny JavaScript autorstwa Nicolasa Bevacqua (dzieliłam się już kilkoma spostrzeżeniami o samej książce w grudniowym wpisie o polecanych lekturach). Przykłady, które zawarłam w artykule są moje, bazują jednak na tym, co Bevacqua podaje u siebie.
Od razu chcę uprzedzić pytania początkujących – tak, znajdziecie we wpisie coś dla siebie. Jest wiele zagadnień z ES6, które można wdrażać w swój kod adekwatnie od początku nauki. ES6 jest w tej chwili bardzo popularnym i powszechnie używanym standardem. Pewnie, niektóre rzeczy będą wymagały zrozumienia bardziej złożonych zagadnień. Ale niech Was to nie zatrzymuje. choćby jak teraz nie użyjecie danej rzeczy, możliwe, iż przyda Wam się ona w przyszłości.
Zdaję sobie sprawę, iż na początku ES6 może być trochę przytłaczające. W końcu dopiero opanowujecie albo opanowaliście podstawy JavaScriptu, a tu już jakieś nowości. Nie dajcie się zwieść pozorom – te nowości są naprawdę przydatne i ułatwiają pracę z kodem (choć na samym początku możecie tego nie widzieć). Poznanie zagadnień z ES6 przyda się też dlatego, iż dzięki temu będziecie mogli czytać kod innych osób i jak traficie na coś z ES6, nie wyda Wam się to super dziwne. choćby jak nie będziecie do końca pamiętali, co dana rzecz robi, skojarzycie, co to i będziecie mogli poszukać w dokumentacji czy wrócić do tego wpisu.
Nie przedłużając – dziś bierzemy się za tematy związane ze zwięzłą deklaracją adekwatności obiektu oraz zagadnienia z destrukturyzacji obiektów i tablic. Brzmi enigmatycznie? Czytajcie dalej! A jak najpierw chcecie poczytać więcej o tym, czym w ogóle jest ES6, odsyłam Was do tego artykułu.
Zwięzła deklaracja adekwatności obiektu
Gdy zajmujemy się JavaScriptem, prędzej czy później trafimy na obiekty. Obiekt (w uproszczeniu) rozpoznajemy po tym, iż deklarujemy go używając nawiasu klamrowego. Obiekt ma też adekwatności oraz przypisane do nich wartości. Dzięki obiektom możemy np. przechowywać dane związane z danym elementem w jednym miejscu. Załóżmy, iż mamy obiekt o nazwie Jane, który przechowuje informacje o jakiejś osobie.
Dzięki zwięzłemu przypisaniu możemy przypisać od razu wartość zmiennej interests do adekwatności o takiej samej nazwie w obiekcie Jane. To pozwala nam zaoszczędzić czas, nie pisać dwa razy tego samego i ułatwia czytelność. Nie musimy pisać: interests: interests przy deklaracji obiektu Jane. Nasz kod wyglądałby więc tak:
var interests = ["books", "travels", "coding"]; var Jane = { age: 26, eyes: green, occupation: programmer, interests }Jak wykorzystać to zagadnienie ES6 w praktyce? Bardzo często np. przy pobieraniu jakiś danych będziemy sobie chcieli je najpierw jakoś przygotować. Często tworzy się zmienne, gdzie najpierw zbieramy odpowiednie dane, a potem dopiero przypisujemy je jako wartość własności danego obiektu. Za każdym razem, gdy zauważamy, iż to, co przypisujemy do obiektu ma taką samą nazwę jak nasza zmienna, warto skorzystać ze zwięzłej deklaracji. Powtórzenia w kodzie nie są dobre, a pisanie obok siebie dokładnie takiej samej nazwy to zwyczajnie strata czasu.
Przypisać do adekwatności oczywiście możemy wszystko, nie tylko tablicę, jak w poprzednim przykładzie. Spójrzmy na jeszcze jeden przykład, który tworzy nam obiekt o nazwie greetingMechanism. adekwatności tego obiektu deklarowane są przy użyciu stworzonych wcześniej zmiennych. Do jednej z nich mamy przypisany ciąg tekstowy, do drugiej funkcję.
var greeting = "hello"; function sayHello(greeting) { console.log(greeting); }; var greetingMechanism = { greeting, sayHello };Warto też zwrócić uwagę, iż greetingMechanism to obiekt (sugerują to nawiasy klamrowe), mimo iż nie mamy klasycznego przypisania wartości do adekwatności (z dwukropkiem). Dla początkujących to może być trochę mylące, dlatego też warto zapoznawać się z ES6, żeby właśnie taki kod nas nie zaskoczył. Nie znając zwięzłego przypisania, nie wiedzielibyśmy, skąd biorą się wartości w obiekcie. Ale teraz już to wiemy
Destrukturyzacja obiektów
Pozostańmy jeszcze na chwilę w temacie obiektów. Załóżmy, iż mamy obiekt z zagnieżdżonymi adekwatnościami. Wygląda on następująco:
var user = { id: 8978787898, email: "jon.smith@gmail.com", personalInfo: { name: "Jon", surname: "Smith" } }Jeśli chcielibyśmy stworzyć kolejną zmienną, która przechowywałaby email użytkownika z powyższego obiektu, musielibyśmy zrobić tak:
var email = user.email;Nie wygląda to jakoś super źle, ale gdy chcemy stworzyć kilka zmiennych, za każdym razem musielibyśmy zapisywać user., a potem podawać adekwatność, do której chcemy się odnieść. Dzięki wykorzystaniu destrukturyzacji obiektu, które oferuje ES6, możemy stworzyć zmienną, która ma taką wartość jak adekwatność email z obiektu user w następujący sposób:
var { email } = user;Powyższy zapis oznacza, iż chcemy stworzyć zmienną o nazwie email, która będzie miała taką wartość jak adekwatność email obiektu user. jeżeli nasz obiekt user ma taką adekwatność, zostanie ona przypisana do nowostworzonej zmiennej. Działa to także dla bardziej zagnieżdżonych adekwatności, czyli możemy stworzyć zmienną z wartością równej user.personalInfo.name w następujący sposób:
var { name } = user.personalInfo;Możemy także stworzyć od razu więcej niż jedną zmienną. Jest to bardzo przydatne gdy chcemy wykorzystać potem te zmienne nie pisząc za każdym razem user. Szczególnie przydaje się to, gdy korzystamy z Reacta i w komponencie mamy przekazany obiekt props. Żeby za każdym razem nie pisać props. możemy stworzyć zmienne z potrzebnymi informacjami. Żeby to zilustrować, załóżmy, iż chcemy stworzyć od razu dwie zmienne, jedna ma zawierać mail, druga id użytkownika. Zrobilibyśmy to w następujący sposób:
var { email, id } = user;Teraz mamy dostęp do obu zmiennych i wywołanie w consoli email lub id pozwoli nam zobaczyć wartości, które są równe adekwatnościom obiektu user.
Nie zawsze chcemy, aby nowa zmienna miała dokładnie taką samą nazwę jak adekwatność w danym obiekcie. Możemy zmienić nazwę zmiennej korzystając z aliasów. Bowiem zmienna o nazwie email może nie mówić nam wystarcząco o tym, co w niej przechowujemy. Załóżmy, iż chcemy, aby nasza zmienna nazywała się userEmail i miała taką wartość jak adekwatność email w obiekcie user. Aby do tego doszło, zapisać musimy następujący kod:
var { email: userEmail } = user;Nazwę, którą nadajemy zmiennej podajemy po dwukropku, jest to tzw. alias.
Destrukturyzacja tablic
Destrukturyzacji możemy także używać przy tablicach. Nie jest to może aż tak częste, jak przy obiektach (przynajmniej ja mam takie odczucia), natomiast ES6 umożliwia nam też bardzo fajne funkcjonalności, jeżeli chodzi właśnie o destrukturyzację tablic.
Możemy użyć jej na przykład, gdy mamy tablicę i z jej elementów chcemy utworzyć zmienne, tj. nasze zmienne mają mieć takie wartości jak kolejne elementy tablicy. Żeby nie musieć odnosić się bezpośrednio do poszczególnych indeksów, wystarczy, iż skorzystamy z destrukturyzacji. Będziemy tu umieszczać nazwy zmiennych w nawiasie kwadratowym, bo mamy do czynienia z tablicami. Nasza przykładowa tablica wygląda tak:
var numbers = [1, 2, 3];Mamy w niej trzy elementy, każdy z nich jest cyfrą. jeżeli normalnie chciałabym stworzyć zmienną a i przypisać do niej pierwszy element z tablicy numbers, zrobiłabym to w następujący sposób:
var a = numbers[0];Powyższy kod jest poprawny i wygląda ok, nie mam w nim tak naprawdę nic podejrzanego Co jednak zrobić, gdy chcemy stworzyć trzy zmienne i do każdej z nich przypisać wartości z tablicy? Musielibyśmy za każdym razem pisać nazwę tablicy i podawać indeks danego elementu. Destrukturyzacja z ES6 umożliwia nam o wiele szybszy zapis, który wygląda tak:
var [ a, b, c ] = numbers;Krócej, nieprawdaż? Stworzyliśmy w ten sposób trzy zmienne, a każda z nich ma przypisaną wartość z tablicy o nazwie numbers.
Bardzo fajna jest też opcja pomijania elementów tablicy, których nie potrzebujemy. jeżeli chcemy stworzyć tylko dwie zmienne d i e, gdzie d ma mieć wartość pierwszego elementu tablicy numbers, natomiast e jego trzeciego elementu, wystarczy, iż zostawimy puste miejsce tam, gdzie jest element numer dwa. W praktyce wygląda to tak:
var [ d, , e ] = numbers;Tworzymy teraz dwie zmienne, które mają przypisane wartości pierwszego i trzeciego elementu tablicy numbers.
Domyślne ustawienie parametrów funkcji
Jak już jesteśmy w temacie destrukturyzacji, wspomnijmy sobie o możliwości domyślnego przypisania wartości parametrów funkcji. Funkcje w JS mogą przyjmować argumenty. Gdy nie podamy argumentu przy wywołaniu, funkcja nie wykona się prawidłowo. Może zdarzyć się, iż chcemy wywoływać funkcję z domyślnymi wartościami, gdy inne nie zostaną przekazane. Poniżej mamy prostą funkcję, która dodaje dwie liczby, przyjmuje więc dwa argumenty.
function sum(a, b) { return a + b; };Gdy wywołamy powyższą funkcję podając tylko jeden argument, jako wynik dostaniemy NaN, ponieważ JS nie widzi drugiego argumentu i uznaje go za NaN (not a number). Żeby zapobiec tego typu sytuacjom, wystarczy, iż podamy jaka ma być domyślna wartość drugiego argumentu. Deklaracja funkcji wygląda wtedy tak:
function sum(a, b = 0) { return a + b; };Teraz, gdy nie podamy drugiego argumentu przy wywołaniu, czyli napiszemy tylko sum(5), jako wynik uzyskamy 5, ponieważ do drugiego argumentu domyślnie przypisane jest 0, tak jak wskazaliśmy przy deklaracji funkcji. Domyślne wartości możemy podać do każdego argumentu funkcji, nie tylko do drugiego. Jest to naprawdę bardzo przydatna rzecz, szczególnie, gdy nasza funkcja przyjmuje wiele argumentów i nie jesteśmy pewni, czy wszystkie z nich dostaniemy, a chcemy, by funkcja wykonała się bez błędu. Oczywiście należy wziąć pod uwagę to, iż domyślne wartości mogą wprowadzić zamieszanie w kodzie, dlatego warto dobrze przemyśleć ich zastosowanie dla wszystkich przypadku.
To by było na tyle! Część pierwsza skończona! W kolejnych artykułach zapoznam Was między innymi z funkcjami strzałkowymi i wytłumaczę, co takiego robi let i const. Ten wpis jest jednocześnie moim debiutem w świecie bardziej technicznych artykułów, dlatego będę bardzo wdzięczna za wszelkie uwagi i sugestie. Piszcie w komentarzach albo mailem do mnie na joanna@wakeupandcode.pl. Czekam na feedback
