JavaScript se še naprej razvija in razvijalcem ponuja nova orodja in funkcije za povečanje produktivnosti in izboljšanje kakovosti kode.

Posodobitve, ki so na voljo od preteklega leta dalje (ECMAScript 2023), prinašajo več zanimivih dodatkov k jeziku.

V članku bom opisal nekaj teh novosti in sprememb, ki omogočajo lažje in hitrejše pisanje kode. V lanskem letu je bilo nekaj posodobitev namenjenih tudi operatorjem, ki dodeljujejo vrednosti spremenljivkam. Novost so operatorji za dodeljevanje vrednosti v primeru null ter logična IN in ALI operatorja dodeljevanja vrednosti. Null dodelitveni operator spremenljivki pripiše vrednost le v primeru, da je le ta null.

const vrednost1 = null ?? 'privzeta vrednost';

let vrednost2 = null;

vrednost2 ??= 'privzeta vrednost';

V obeh primerih imata spremenljivki sedaj vrednost 'privzeta vrednost'.

Operatorja logičnega dodeljevanja &&= in ||= sta okrajšavi za dodeljevanje vrednosti spremenljivk na podlagi logičnega pogoja. Ti operaterji lahko pomagajo zmanjšati ponavljajočo se kodo in izboljšajo berljivost. Logična IN dodelitev preverja levo spremenljivko, če je resnična ji dodeli vrednost.

let x = 1;

let y = 0;

x &&= 10;

y &&= 10;

Po izvedeni dodelitvi bo vrednost spremenljivke x enaka 10, vrednost spremenljivke pa bo ostala 0. Operator preverja ali x ima vrednost (ali je resnična) in če jo ima, spremenljivki določi novo vrednost. Spodnji primer prikazuje zapis s ternarnim operatorjem in pogojnim stavkom.

x = x ? 10 : x;

if (x)

    x = 10;

Podobno logična ALI dodelitev zapiše vrednost le v primeru, da je leva spremenljivka neresnična oziroma nima določene vrednosti.

let z = 0;

z ||= 10;

Spodnji primer prikazuje zapis s ternarnim operatorjem in pogojnim stavkom.

z = !z ? 10 : z;

if (!z)

    z = 10;

Operatorji so dobro podprti in delujejo v vseh modernih brskalnikih.

Dodanih je bilo tudi nekaj funkcij za upravljanje zbirk (array), ki omogočajo lažje razvrščanje in upravljanje elementov. Med novimi funkcijami je bila dodana Array.prototype.toSorted, ki je podobna obstoječi metodi Array.prototype.sort(), vendar ustvari novo zbirko namesto spreminjanja prvotne. Tudi metoda Array.prototype.toReversed je različica metode reverse(), ki ustvari novo zbirko, vendar v obratnem vrstnem redu. Array.prototype.findLast pridobi zadnji element v zbirki na podlagi ujemanja vrednosti ali nedefinirano, če ni najden noben ujemajoči se element​​.  Array.prototype.findLastIndex deluje podobno kot Array.prototype.findLast, vendar pa namesto zadnjega elementa vrne indeks le tega. Array.prototype.with omogoča spreminjanje posameznega elementa zbirke na podlagi njegovega indeksa, pri čemer s spremembo ustvari novo matriko. Tudi metoda Array.prototype.toSpliced ustvari novo zbirko,  je različica kopiranja metode splice(), ki spremeni izvirno zbirko z novimi elementi.

const vrednosti = [1, 9, 5, 7, 3];

const vrednostiSorted = vrednosti.toSorted();

//[1, 3, 5, 7, 9]

const vrednostiReversed = vrednosti.toReversed();

//[3, 7, 5, 9, 1]

const vrednostiWith = vrednosti.findLast((element) => element > 3);

//7

const vrednostiLast = vrednosti.findLastIndex((element) => element > 3);

//3

const vrednostiILast = vrednosti.with(1, 8);

//[1, 8, 5, 7, 3]

const vrednostiSplice = vrednosti.toSpliced(2, 1, 2, 8);

//[1, 9, 2, 8, 7, 3]

V zgornjem primeru findLast metoda vrne element 7, ki je zadnji večji od vrednosti 3, findLastIndex pa vrne 3, ki je mesto na katerem se nahaja vrednost 7. Metoda with zamenja element, ki je na mestu 1(3) z vrednostjo 8. Podobno naredi tudi metoda toSpliced, ki element na mestu 2 zamenja z dvema novima elementoma (2 in 8). Zbirka 'vrednosti' v vseh zgornjih primerih ostane nespremenjena.

Poleg podpore za zbirke je na voljo tudi nova metoda Object.groupBy namenjena združevanju objektov na podlagi podane vrednosti. Vrnjeni objekt ima ločene lastnosti za vsako skupino.

const tecaji = [

    { name: 'Introduction to JavaScript', code: 'JSC101', type: 'Web' },

    { name: 'Designing and Implementing a Microsoft Azure AI Solution', code: 'AI102', type: 'AI' },

    { name: 'Querying Data with Microsoft Transact-SQL', code: 'DP080', type: 'SQL' },

    { name: 'Advanced JavaScript Concepts', code: 'JSC151', type: 'Web' },

    { name: 'Microsoft Azure AI Fundamentals', code: 'AI900', type: 'AI' },

    { name: 'Programming with HTML, CSS, and JavaScript', code: 'HCJ501', type: 'Web' },

    { name: 'Administering Microsoft Azure SQL Solutions', code: 'DP300', type: 'SQL' }

  ];

  const zdruzeni = Object.groupBy(tecaji, ({ type }) => type);

Objekt 'zdruzeni' bo vseboval tri zbirke tečajev glede na tip tečaja.

 {

    "Web": [

        { "name": "Introduction to JavaScript", "code": "JSC101", "type": "Web" },

        { "name": "Advanced JavaScript Concepts", "code": "JSC151", "type": "Web" },

        { "name": "Programming with HTML, CSS, and JavaScript", "code": "HCJ501", "type": "Web" }

    ],

    "AI": [

        { "name": "Designing and Implementing a Microsoft Azure AI Solution", "code": "AI102", "type": "AI" },

        { "name": "Microsoft Azure AI Fundamentals", "code": "AI900", "type": "AI" }

    ],

    "SQL": [

        { "name": "Querying Data with Microsoft Transact-SQL", "code": "DP080", "type": "SQL" },

        { "name": "Administering Microsoft Azure SQL Solutions", "code": "DP300", "type": "SQL" }

    ]

}

Novost od marca dalje deluje v zadnjih posodobitvah brskalnikov.

Čeprav so novosti zanimive in lahko olajšajo pisanje kode pa je vseeno dobro, da preverimo če so vse funkcionalnosti že podprte, saj nekatere še vedno niso podprte na vseh brskalnikih.

Domen Gričar

Front - end programer, predavatelj
MCT, MS, MCSD
domen.gricar@kompas-xnet.si

Do you have any additional questions?

For more information, we are always happy to assist you. Feel free to contact us at info@kompas-xnet.si or call us at 01 5136 990.