Kaasaegne JavaScript alates ES6 kuni ES13 (JS õpetus)

Seda ootab sind selles JavaScripti ES6-kursus.

Juba aastaid on veebibrauserites olemas olnud JavaScript. Peaaegu iga veebileht sisaldab rohkem või vähem JS-koodi. Kuigi algversioonid olid esialgu väga kohmakad, õnnestus seni üsna hästi töötada standardiga ES5, vähemalt kui suudeti oskuslikult vältida lõkse ja ettearvamatusi. Miks siis õppida midagi uut ja mitte jääda vanaviisi? Selles õppetükis näitan uue standardi ES6 eeliseid ja põhjuseid, miks tegelikult ei saa sellest loobuda.

Kuni ja kaasa arvatud ES5 oli võtmekohaks var ainus viis muutujaid deklareerida, mis oma iseloomulikkuse tõttu põhjustas sageli soovimatut käitumist või isegi vigu. ES6 toob mängu kaks uut võtmesõna let ja const, mis parandavad mõningaid var puudusi.

Enamik veebiarendajaid teab For-tsüklit. Seda kasutatakse sageli massiivide läbimiseks. ES6-s on For-tsükli variant, mis võimaldab seda oluliselt lühemalt ja kompaktselt teha.

Funktsioonid on JS-is olulised ja seni on neid deklareeritud ja määratletud ainult võtmesõnaga funktsioon. ES6 toob sisse väga elegantse ja lühikese kirjutamisviisi, mis mitte ainult ei tee koodi loetavamaks, vaid pakub ka lahenduse tüütavale probleemile this.

Valikulisi parameetreid on ES5-s veidi ebamugav luua ja need ei ilmu funktsiooni kutsujale. ES6-s saab valikulised parameetrid koos vaikeväärtustega kirjutada otse funktsiooni signatuuri.

Destruktuureerimine võimaldab objektidest ja massiividest elementide sihipärast väljavõtmist. Täpsemal vaatlusel ilmnevad paljud rakendusvõimalused, mis muudavad JS-koodi elegantsemaks ja kompaktsemaks.

Variablite arvuga parameetrite lubamine funktsioonides oli vajalik kuni ES6-ni arguments-muutuja kasutuselevõtmiseks. ES6-s on see palju lihtsam kasutades nn ülejäägi-parameetreid.

Mitmääratud funktsioonide määratlemisel ei tule mitte ainult …-operaator mängu, vaid ka massiivi destruktureerimisel saab seda kasutada, et koguda kokku "jääknäärid" ja anda need massiivina kätte.

Mit Set-Operatsiooni ei saa kasutada mitte ainult massiivide korral, vaid seda saab kasutada ka objektide korral, et püüda ülejäänud omadused ja esitada need objektina.

Ülejäänu operaatori vastand on laialioperaator. Ta näeb välja täpselt samamoodi (…), kuid asub teisel poolel omistamisest ja laiendab massiivi selle osadeks.

Lihtne „trikk“ koos Spread-operaatoriga toimib ka objektide puhul väga hästi. Nii saab objekte teistesse objektidesse „sisse segada“. Siin on aga ka väga hea alternatiiv Object.assign().

Funktsioonid objektiliteraalides on väga kohmakad kirjutada koos funktsiooni-märksõnaga. ES6 abil saab neid aga palju lühemalt ja arusaadavamalt kirjutada.

Seda ei saa teisiti öelda: Enamrealised stringiliteraalid koos integreeritud muutuja väärtustega olid enne ES6 aega piinarikkad ja väga ebameeldivad lugeda. Uued ES6 põhised malli-literealid on aga sellele vastupidiselt süntaktiline nauding.

Objekte oleks alati saanud kasutada võtm-väärtus-paaride või sõnastikuna, kuid mõningate puudustega. Uus kaardistratektuur vabaneb nendest puudustest ja pakub stabiilset sõnaraamatufunktsionaalsust, nagu see on tuntud teistest programmeerimiskeeltest.

Pärast lubaduste abil pääseb Callback-põrgust, seab async/await-konstruktsioon süntaktilise suhkru juurde. See tugineb lubadustele ja võimaldab peaaegu nagu sünkroonselt programmeerida asünkroonseid toiminguid. Kes on korra programmeerinud async/await abil, vältib edaspidi lubaduste then-meetodi otsest kasutamist (ja eriti vältib tagasihelistuste kasutamist).

Lisaks staatilisele moodulite importimisele võtmesõnaga import, toetab ES6 ka dünaamilist importimist import- funktsiooniga. Kuna kõik toimub asünkroonselt, tagastatakse lubadus, mille täitmist saab ootama jääda abil await. Selle abil pole midagi takistamises moodulite järellaadimisel jooksuajal ükskõik millal.

Pärandamine põhineb ikka veel prototüüpidel, kuid ES6-s kirjutatakse see märksõna extends abil oluliselt lihtsamalt ja selgemalt. Selle kasutamisel tuleb baasklassi konstruktor kutsuda õigel hetkel super abil. Kuidas seda teha, selgitatakse muidugi ka selles õppetükis.

Erinevate muutujate deklareerimine on nüüd võimalik ka eramuväljadel ning neile pole kahtlemata võimalik väljastpoolt juurde pääseda. Deklaratsioon on veidi harjumatu võrreldes teiste programmeerimiskeeltega.

Uue võtmega klass ja sellega seotud funktsioonidega nagu pärimine ja andmekapseldus (privaatsed väljad) peaksid kõik OO-programmeerijad tegelikult olema rahul, eks ole? Selles õppetükis tahan tutvustada alternatiivi objektide loomiseks, mis ei vaja klasside, prototüüpide ega this kasutamist, kuid võimaldab paindlikumat "pärimist" või pigem "kompositsiooni".

Olulisemad funktsioonid versioonist ES6 ja uuem on nüüd läbi vaadatud. Kuid pidevalt lisanduvad uuendused. Mõned vähem levinud funktsioonid pole veel mainitud. Selles tunnis selgitatakse, mida tulevikus veel oodata on ja millised funktsioonid võiksid olla erijuhtudel endiselt huvitavad.