Vychytávky ES6

V tomto článku se budu snažit vysvětlit nové změny v ES6, ES2015 nebo ECMAScript 2015 oproti ES5. Pokud máte guláš v těchto všech názvech, tak doporučuji článek o rozdílu mezi pojmy JavaScript a ECMAScript.

Jen dopředu upozorňuji, že se jedná o tréninkový příspěvek a píšu spíše, abych si sám v hlavě urovnal, o co se jedná.

Let a const

Začneme asi tím nejzákladnějším. Zapomeňte na deklaraci proměnné pomocí var, teď už jen let a const. Pro obě deklarace je společné to, že jsou tzv. „block-scoped“. V jakém bloku kódu je definujete, tam budou platit.

Let definuje proměnnou, které můžete v průběhu exekuce kódu přiřazovat různé hodnoty.

let hello = "Ahoj";
hello = 5;
hello = [1,2,3];

Const definuje konstantu, která se obsahem nemění, ale má to i své vyjímky.

Například:

const obj = { ovoce: "jablko" };
obj.ovoce = "hruška"; // toto jde
obj = { zelenina: "vokurka" } // přepsat objekt nelze
// TypeError: Assignment to constant variable.

Řetězcové šablony / šablonové řetězce / Template Strings

Nyní můžeme využívat jednoduchého šablonování, bez nepřehledného spojování jednotlivých řetězců s proměnnými.

const jmeno = "Vojta";
const Template = `Ahoj já jsem ${jmeno}`;

Můžeme je také roztahovat na kolik chceme řádků.

const Temp = `Ahoj
já
jsem
Vojta`

Desctructuring

Tomuto bych česky rád říkal vytýkání. Pokud máme objekt nebo array, tak můžeme v si v konkrétním bloku můžeme určit nové, kratší proměnné.

Například nám do funkce přijde objekt Člověk s ID, věkem a výškou.

const clovekPepa = {
	ID: 1,
	vek: "31",
	vyska: "166"
}
function ukazCloveka(clovek) {
	const { ID, vek, vyska } = Clovek;
	// zbavíme se tak nutnosti přistupovat do objektu pomocí
	// Clovek.vek, Clovek.ID
	console.log(`Jsem člověk vysoký ${vyska} cm a starý ${vek} let`);
}
ukazCloveka(clovekPepa); // vypíše Jsem člověk vysoký 166 cm a starý 31 let

Zrovna tak můžeme destrukturovat přímo v parametru funkce:

const nakup = {
	ovoce: "hruška",
	pecivo: "rohlik"
}
function vypisSeznam({ovoce, pecivo}) {
	console.log(ovoce, pecivo);
};
vypisSeznam(nakup); // hruska, rohlik

Výchozí hodnoty parametrů

Nyní můžete deklarovat výchozí hodnoty parametrů funkcí, pokud nejsou předány.

function udelejNeco(pole, objekt = { jmeno: "Vojta"} ) {
	console.log(pole[0] + objekt.jmeno);
}
// nyní můžeme zavolat pouze
const mojePole = ["hodnota", "hodnota2"];
udelejNeco(mojePole); // vypíše hodnotaVojta

Rest operátor / Zbytek

Můžeme definovat pouze jeden parametr s Rest operátorem a při volání dané funkce se nám předané parametry předají jako pole. Důležitá poznámka: rest operátor musí být na konci všech parametrů.

function vypisVsechnyParametry(...slova) {
	console.log(slova);
}
vypisVsechnyParametry("ahoj", true, {null}, []);
// vypíše ["ahoj", true, [object Object] {null: null}, []]

Spread operátor

Dělá v podstatě pravý opak než rest operátor: rozloží pole na jednotlivé argumenty. Píše se před parametr. O tricích s rest a spread asi v dalším příspěvku.

Arrow funkce

Jedná se o přehlednější a kratší zápis pro deklaraci funkcí. Zároveň na sebe váže kontext this z okolního prostředí. Vypadají asi takto:

const otevriOci = () => {
	return "Otevrene oci.";
};
const pozdravCloveka = jmeno => {
	return `Ahoj ${jmeno}`;
};
// To samé můžeme zapsat zkráceně:
const pozdravCloveka = jmeno => `Ahoj ${jmeno}`;

Pokud vynecháme složené závorky, tak funkce bude explicitně vracet hodnotu za „šipkou“.

Proč se jmenují arrow si asi každý domyslí, ale jen bych chtěl podotknout, že do závorek se píší parametry, pokud je pouze jeden, tak závorky nepíšeme.

Další věcí je, že nemají this, ale vážou na sebe tzv. lexikální this, což je jednoduše this z vnějšku.

let rodina = {
  prijmeni: "Novotný",
  clenove: ["Karel", "Petr", "David"],

  vypisCleny() {
    this.clenove.forEach(
      clen => alert(`${clen} ${this.prijmeni}`);
    );
  }
};

rodina.vypisCleny();

Vylepšené objektové literály ?

Můžeme například používat dynamické názvy jednotlivých párů v objektu.

const prijmeni = "Novotny";
const rodina = {
	[prijmeni]: {"Petr", "Alfons", "Betty"}
};
console.log(rodina.Novotny);

Další

Dále se můžete těšit na:

1. Classes
2. Iterators + For..Of
3. Generators
4. Comprehensions
5. Unicode
6. Modules
7. Module Loaders
8. Map + Set + WeakMap + WeakSet
9. Proxies
10. Symbols
11. Subclassable Built-ins
12. Math + Number + String + Object APIs
13. Binary and Octal Literals
14. Promises
15. Reflect API
16. Tail Calls