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.

Tämä oppitunti esittelee tavan määrittää kehitysympäristö. Siinä käytämme IDE-ohjelmistona Microsoftin Visual Studio Codea ja kehityspalvelimena ViteJS:ää.

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.

Käsitellä merkkijonoja on osa jokaisen ohjelmoijan perustyökaluja. Onneksi ES6 tarjoaa joitakin uusia ja erittäin hyödyllisiä merkkijonojen funktioita, jotka säästävät paljon kirjoitustyötä.

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.

Jo ES5:n kanssa on olemassa useita erittäin hyödyllisiä taulukon toimintoja, jotka noudattavat funktionaalista lähestymistapaa. ES6 on lisännyt niihin muutamia muita, jotka tekevät taulukoiden käsittelystä vielä miellyttävämpää. Jotkin vanhat, jo ES5:ssä olemassa olevat toiminnot kuitenkin arvostetaan täällä.

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.

Asynkroniset toiminnot voidaan käsitellä takaisinkutsufunktioiden avulla, mutta siinä on vaara, että pesukonetie tulee liian suureksi ja koodi muuttuu epäselväksi (niin kutsuttu takaisinkutsuhelvetti). Lupaukset ratkaisevat tämän ongelman kiertämällä syvät pesukonet ja mahdollistavat asynkronisten toimintojen ketjutuksen yhdellä tasolla.

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öä).

Node.js:ssä moduuleja on käytetty alusta alkaen, mutta alussa se käytti yksinomaan CommonJS-moduliformaattia require. ES6:sta lähtien standardissa on ollut modulimääritelmä ja uudet avainsanat import/export. Nykyään lähes kaikki (uudet) JS-kirjastot tukevat tätä formaattia, ja myös Node.js osaa käsitellä sitä uusimmissa versioissaan.

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.

Perinteistä olioperustaista ohjelmointia luokilla ja perinnällä oli ennen ES6:ta vain epäsuora polku prototyypin kautta konstruktorifunktiolla. Tämä oli hankalaa, vaikutti vähemmän tiiviiltä ja oli siksi virhealtista. Uusi avainsana class mahdollistaa nyt ES6:n myötä määrittämisen tiiviissä muodossa, kuten muista ohjelmointikielistä kuten Java, C# ja C++ tunnetaan. Sisäisesti järjestelmä perustuu kuitenkin edelleen perusprototyyppiin, vain kauniimmalla syntaksilla.

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.

Jäsenten tai kenttien julistaminen on myös mahdollistettu uusien standardien avulla. Tämän avulla voit julistaa ja alustaa myös staattiset kentät.

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.