Kaip JavaScript tapo supergalia: modern javascript examples

JavaScript kalba per pastarąjį dešimtmetį patyrė neįtikėtiną transformaciją. Iš paprastos naršyklės scenarijų kalbos ji virto viena galingiausių programavimo kalbų visoje žiniatinklio ekosistemoje. Šiandien, kai kalbame apie modern javascript examples, kalbame apie ES6 (ECMAScript 2015) ir naujesnes versijas – pažangias funkcijas, kurios leidžia rašyti švaresnį, efektyvesnį ir įdomesnį kodą. Šiame straipsnyje su džiaugsmu pasinersime į modernios JavaScript kalbos galimybes ir pateiksime aiškius modern javascript examples przykłady.

Let ir Const vietoj Var: aiškesnis kintamųjų valdymas

Anksčiau viskas buvo „var“. Dabar – viskas pasikeitė. let ir const atnešė aiškumą ir blokinį kintamųjų galiojimo laiką:

let skaicius = 10;
const vardas = "Jonas";

skaicius = 15; // galime pakeisti
// vardas = "Tomas"; // sukeltų klaidą – const negalima keisti

let naudojamas keičiamoms reikšmėms, o const – nekintančioms. Paprasta ir genialu!

Arrow funkcijos – trumpiau ir aiškiau

Funkcijos deklaravimas JavaScript'e niekada nebuvo toks gražus. Su „arrow functions“ rašome mažiau, o pasakome daugiau:

const sudek = (a, b) => a + b;
console.log(sudek(5, 3)); // 8

Tai puikus pavyzdys iš modern javascript examples, kuris rodo, kaip galima parašyti tą pačią logiką trumpesniu būdu.

Destruktūrizavimas: išrink informaciją elegantiškai

JavaScript leidžia patogiai „išrinkti“ duomenis iš masyvų ar objektų:

const vartotojas = { vardas: "Asta", amzius: 28 };
const { vardas, amzius } = vartotojas;

console.log(vardas); // "Asta"

Destruktūrizavimas palengvina kodą, kai reikia dirbti su daugeliu kintamųjų.

Default reikšmės funkcijoms

Funkcijų parametrai dabar gali turėti numatytąsias reikšmes – tai pašalina poreikį tikrinti „undefined“:

function sveikinti(vardas = "Svečias") {
  console.log("Labas, " + vardas + "!");
}

sveikinti(); // "Labas, Svečias!"
sveikinti("Dovile"); // "Labas, Dovile!"

Mažiau if'ų – daugiau produktyvumo!

Spread ir Rest operatoriai – universalūs duomenų herojai

Su „spread“ galime išskleisti masyvus, o su „rest“ – surinkti parametrus:

const skaiciai = [1, 2, 3];
const naujiSkaiciai = [...skaiciai, 4, 5];

console.log(naujiSkaiciai); // [1, 2, 3, 4, 5]

function suma(...skaiciai) {
  return skaiciai.reduce((a, b) => a + b, 0);
}

console.log(suma(1, 2, 3)); // 6

Vienas iš populiariausių modern javascript examples!

Template literals – tekstas su stiliumi

Užuot naudodami plus’us ir kabutes, naudokime ` (backticks) ir ${}:

const vardas = "Rokas";
console.log(`Sveikas, ${vardas}!`);

Skaidresnis tekstų generavimas – jau ne prabanga, o būtinybė.

Promises ir Async/Await – asinchroninis kodas be skausmo

Viena iš didžiausių revoliucijų – asinchroninio kodo rašymas, kuris primena sinchroninį:

function gautiDuomenis() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Duomenys gauti!"), 1000);
  });
}

async function parodyti() {
  const duomenys = await gautiDuomenis();
  console.log(duomenys);
}

parodyti();

Su async/await kodas tampa aiškus kaip diena.

Modules: kodą suskaidykime protingai

Modernus JavaScript leidžia naudoti import/export konstrukcijas, kurios palengvina kodo organizavimą:

// math.js
export function daugyba(a, b) {
  return a * b;
}

// index.js
import { daugyba } from "./math.js";
console.log(daugyba(3, 4)); // 12

Moduliai leidžia plėtoti didelius projektus be chaoso.

Optional chaining – išvenkime TypeError

„Optional chaining“ leidžia pasiekti objektų laukus saugiai:

const vartotojas = { vardas: "Aiste", adresas: null };

console.log(vartotojas.adresas?.miestas); // undefined, bet be klaidos

Vienas taškelis – ir galvos skausmas dėl „undefined“ dingsta!

Nullish coalescing: tikra reikšmė vietoj loginių klaidų

Operatorius ?? grąžina reikšmę tik jei ji nėra null arba undefined:

let tema = null;
let aktyviTema = tema ?? "Šviesi";

console.log(aktyviTema); // "Šviesi"

Tai itin naudinga, kai 0 ar "" turi būti laikoma teisinga reikšmė.

Modern javascript examples przykłady realiame projekte

Įsivaizduokime, kad kuriame todo aplikaciją. Naudojame visus modernius elementus:

const todos = [];

function pridetiTodo(tekstas = "Nauja užduotis") {
  todos.push({ tekstas, baigta: false });
}

function rodytiTodos() {
  todos.forEach(({ tekstas, baigta }, index) => {
    console.log(`${index + 1}. ${tekstas} - ${baigta ? "Atlikta" : "Neatlikta"}`);
  });
}

pridetiTodo("Nusipirkti pieno");
pridetiTodo();
rodytiTodos();

Tai tik nedidelė demonstracija, kaip modern javascript examples gali pagerinti kasdienį programavimą.

Išvada: kodėl verta naudoti modernų JavaScript?

Naudojant šiuolaikines JavaScript galimybes, tavo kodas tampa tvarkingesnis, greitesnis ir malonesnis dirbti. Nereikia bijoti – kiekvienas žingsnis link modernesnio kodo atneša didesnį produktyvumą ir džiaugsmą. Dabar, kai turi tiek daug modern javascript examples przykłady, pradėk juos taikyti jau šiandien!