Moderni JavaScript ES6:sta ES13:een (JS-ohje)

Tämä odottaa sinua tässä JavaScript ES6 -kurssissa.

JavaScript on ollut selaimissa jo monia vuosia. Melkein joka verkkosivusto sisältää enemmän tai vähemmän JS-koodia. Vaikka ensimmäiset versiot olivat vielä hyvin kömpelöitä, tähän asti on pystynyt työskentelemään varsin hyvin ES5-standardilla, ainakin jos ansat ja epävarmuustekijät pystyi kiertämään taitavasti. Miksi siis oppia jotain uutta eikä pysyä todistetussa? Tässä oppitunnissa näytän uuden standardin ES6 edut ja syyn siihen, miksi siihen ei oikeastaan voi olla turvautumatta.

Aina mukaan lukien ES5, avainsana var oli ainoa tapa julistaa muuttujia ja aiheutti usein ei-toivottua käyttäytymistä tai jopa virheitä. ES6 lähettää kaksi uutta avainsanaa let ja const kilpajuoksuun, jotka korjaavat joitakin varn puutteita.

Ja kaikki verkkokehittäjät tuntevat For-silmukan. Sitä käytetään myös usein taulukoiden läpikäyntiin. ES6: n myötä on olemassa For-silmukan muunnelma, joka mahdollistaa tämän huomattavasti lyhyemmin ja tiiviimmin.

Toiminnot ovat olennaisia JS:ssä ja niitä on tähän asti julistettu ja määritelty vain avainsanan funktio avulla. ES6 esittelee hyvin tyylikkään ja lyhyen kirjoitusasun, joka tekee koodista paitsi helpommin luettavaa myös tarjoaa ratkaisun this-ongelmaan.

Vaihtoehtoiset parametrit voidaan toteuttaa ES5:ssä hieman kömpelösti eivätkä ne paljastu funktion kutsujalle. ES6:ssa optionaaliset parametrit voidaan kirjoittaa suoraan funktion määrittelyyn niiden oletusarvoilla.

Tyhjentäminen mahdollistaa elementtien tarkoituksenmukaisen poimimisen objekteista ja taulukoista. Tarkalleen katsottuna avautuu monta eri käyttömahdollisuutta, jotka tekevät JS-koodista tyylikkäämpää ja tiiviimpää.

Käsittelemällä arguments-muuttujaa oli ennen ES6:ta tarpeen mahdollistaa muuttuva määrä parametreja funktioille. Tämä on paljon helpompaa ES6:ssa ns. lepo-parametrien avulla.

Ei vain toimintomäärittelyissä käytetään leikekirjaoperaattoria jäännösparametriin, myös taulun purkamisessa sitä voidaan käyttää jäännöselementtien keräämiseen ja niiden tarjoamiseen taulukkona.

Ei vain taulukoissa voidaan käyttää lepo-operaattoria, vaan myös objekteissa se voi kerätä jäljellä olevat ominaisuudet ja tarjota ne objektina käytettäväksi.

Vastakohta Rest-operatorille on Spread-operatori. Se näyttää tältä (…), mutta on toisella puolella asetusta ja levittää taulukon osiinsa.

Etuosaajan "temppu" toimii myös erittäin hyvin objektien kanssa. Tällä tavalla objekteja voi "sekoittaa" toisiin objekteihin. Object.assign() tarjoaa kuitenkin erittäin hyvän vaihtoehdon tähän.

Funktionit objektilitereissä ovat hyvin kömpelöitä kirjoittaa function--avainsanan kanssa. ES6:n avulla ne voidaan kuitenkin kirjoittaa paljon lyhyemmin ja helpommin ymmärrettävästi.

Näin sen täytyy olla: Moniriviset merkkijonoliteraalit sisäänrakennetuilla muuttujien arvoilla olivat ennen ES6:ta tuskaa ja myös erittäin epämiellyttäviä lukea. Uudet ES6:n templaattiliteraalit sen sijaan ovat syntaktinen siunaus.

Objekte on aina voitu väärinkäyttää key-value-storena tai sanakirjana, mutta siinä on ollut joitakin haittoja. Uusi Map-tietorakenne pääsee eroon näistä haitoista ja tarjoaa vakaata sanakirjatoiminnallisuutta, kuten muista ohjelmointikielistä tunnetaan.

Kun lupausten avulla voidaan välttää takaisinkutsuhelvetti, async/await-rakenne lisää vielä enemmän syntaktista sokeria. Se perustuu lupauksiin ja mahdollistaa lähes synkronisten tapahtumien ohjelmoinnin. Kuka tahansa, joka on ohjelmoinut async/await:llä, välttää jatkossa suoran then-metodin käyttöä lupauksissa (ja varsinkin takaisinkutsujen käyttöä).

Lisäksi staattisen moduulien tuonnin lisäksi käyttämällä import-avainsanaa, ES6 mahdollistaa myös dynaamisen tuonnin import()-funktiolla. Koska kaikki tapahtuu asynkronisesti, palautetaan ratkaisuksi Promise, johon odottaa erinomaisesti käyttämällä await-avainsanaa. Tämä mahdollistaa moduulien lataamisen suorituksen aikana missä tahansa vaiheessa.

Periytyminen perustuu edelleen prototyyppeihin, mutta ES6:ssa se kirjoitetaan avainsanalla extends huomattavan helpommaksi ja selkeämmäksi. Sitä käyttäessä on kutsuttava perusluokan konstruktori oikeaan aikaan avainsanalla super. Tämä opetus selitetään tietysti myös tässä oppitunnissa.

Myös yksityisiä kenttiä voidaan nyt julistaa, eikä niihin pääse ulkopuolelta. Hieman tottumista vaativaa on julistaminen, joka eroaa selvästi muista ohjelmointikielistä.

Uuden avainsanan luokka ja niihin liittyvien ominaisuuksien, kuten perinnön ja tietojen kapseloinnin (yksityiset kentät), pitäisi tehdä kaikkien OO-ohjelmoijien tyytyväiseksi, vai mitä? Haluan esitellä tässä oppitunnissa vaihtoehdon objektien luomiselle, joka pärjää ilman luokkia, prototyyppejä ja this -avainsanaa, mutta mahdollistaa joustavamman tavan "perinnälle" tai paremminkin "kompositiolle".

Version ES6 ja uudemmat tärkeimmät ominaisuudet tulisi nyt olla käsitelty. Mutta aina tulee lisää uudistuksia. Joitakin harvemmin käytettyjä toimintoja ei ole vielä mainittu. Tässä oppitunnissa selitetään, mitä on vielä odotettavissa tulevaisuudessa ja mitkä toiminnot saattavat olla edelleen kiinnostavia erikoistapauksissa.