Tydzień 46

Powrót do poznawania Java Script w wersji ES6. Do tej pory uczyłem się pisania kodu w wersji ES5. Wiem, że to stara wersja kodu i wiem, że nikt jej nie wykorzystuje obecnie, bo ES6 wprowadziło dużo fajnych ułatwień w pisaniu kodu, ale pomimo to ciągle można spotkać aplikacje napisane w ES5 i warto wiedzieć, jak je utrzymać, albo przepisać na nowo.

W tym tygodniu wrzucam krótkie zestawienie kilku fajnych funkcjonalności jakie daje EA6. Zacznijmy od zmiennych. Na początek temat, który zaskakuje wiele osób, które do tej pory programowały w innych językach. W Java Script nie definiujemy jakiego rodzaju jest zmienna. Czy to string, numer czy boolean. W JS mamy tylko trzy rodzej zmiennych: const, let (ES6) oraz var (ES5). W JS nie można korzystać ze zmiennych przed ich zadeklarowaniem i przypisaniem im wartości. Co prawda JS inaczej reaguje na zmienne zadeklarowane bez wartości i inaczej na zmienne nie zadeklarowane w ogóle, ale w obu przypadkach, próba wykorzystania takiej zmiennej zakończy się błędem.

Poniżej wrzucam krótki opis trzech typów zmiennych występujących w JavaScript.

  • Const – zmienne mające stałą strukturę, nie można ich podmienić, nie można zmieniać ich wartości;
  • Let – zmienne które można przypisać wielokrotnie, ale definiujemy je tylko raz (sugerowane jest używanie wszędzie, gdzie to możliwe).

Let i const są zmiennymi blokowymi, co oznacza ze istnieją tylko we fragmencie kodu znajdującym się pomiędzy { } nie są wynoszone w górę. Dodatkowo const nie może być zadeklarowane w  wyższej części kodu bez przypisania wartości, bo wartość nie zostanie przeniesiona w dół. W przypadku const najlepiej przypisywać wartość od razu przy deklaracji.

  • Var – to typ zmiennej, który pozwala zmienić zawartość zmiennej w kodzie na przykład z boolean na number (znane z ES5 w ES6 używamy raczej let).

Var jest zmienną funkcyjną, co znaczy że zadeklarowana w dowolnym miejscu w funkcji jest przenoszona w obrębie całej funkcji.

W ES6 mamy też pewne uproszczenia przy korzystaniu z funkcji. Na przykład możemy skorzystać z Rest Parameters, który pozwala nam przekazać do funkcji zmienną typu array o nieokreślonej liczbie elementów. Pisząc nieokreślonej, mam na myśli nieznanej w momencie pisania kodu. W ES5 również można było tak zrobić, ale wymagało to wprowadzenia dodatkowej zmiennej i dopiero potem można było wykonać działania na poszczególnych argumentach:

function translateToMeters() {
                var cmArr = Array.prototype.slice.call(arguments);
                cmArr.forEach(function(cur) {
                               console.log(cur / 100);
                })
}
translateToMeters(200, 340, 580);

W ES6 powyższa funkcja będzie napisana krócej:

function translateToMeters(…cm) {
                cm.forEach(cur => console.log(cur / 100));
}
translateToMeters(200, 340, 580);

Ostatnia ciekawostka z tego tygodnia dotyczy wprowadzania wartości domyślnych w przekazywanych do funkcji parametrach.

W ES5 można było wartości domyślne zdefiniować dopiero w ciele funkcji używając warunku if np.:

cm === undefined ? cm = 100 : cm = cm;

W ES6 można od razu przy konstruowaniu funkcji podać domyślną wartość parametru np:

function translateToMeters(cm = 100){

};

To tyle jeżeli chodzi o ten tydzień, w przyszłym nadal poznaję ES6. Na zgłędbianie róznic pomiędzy ES5 i ES6 przeznaczyłem w tym tygodniu pięć i pół godziny.

No comments
Krzysztof NyrekTydzień 46

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *