Modern Javascript funkciók - ES6 I.

Mára a legtöbb weboldal dobta a régi Flash Playeres funkciókat, felváltotta őket a HTML5 és a Javascript használata. Ez utóbbi viszonylag gyakran kap frissítéseket, de aki nem követi, annak kevés esélye van észlelni, hiszen a böngészők nem igazán szoktak szólni róla, ha bejön egy-egy új szabvány amit implementálnak. 1997 óta nagy utat tett meg a JS, mára a legtöbb keretrendszer alapvető elvárásnak tekinti az ES6-ot. Az ECMAScript 2015 (azaz az ES6) számos új funkciót hozott a 4-6 évvel korábbi (attól függ, hogy az 5.1-et el akarjuk-e fogadni vagy sem) megoldáshoz képest.

Nézzük is mik ezek:

Let

A var kulcsszóhoz hasonló, változókat tudunk deklarálni vele, azonban a scope kicsit más. Amennyiben blokkon belül hozzuk létre, azaz valahogy így:

{ let x = 1; }

Úgy a kapcsos zárójeleken kívül az x bizony már nem lesz 1. Ha korábban deklaráltuk, akkor az előző értéket veszi fel, ha nem, akkor undefined lesz. Ha ugyanezt varral csináljuk, a blokkon belüli értékünk marad a zárás után is.

Function-scope tekintetében a let és a var között nincs igazán különbség, az elérésük ugyanolyan, a function zárásakor kívül már nem lesz elérhető az értékük.

Global-scopeban is lehet használni, egyszerűen csak blokkon és függvényen kívül hozzuk létre

const

Gyakorlatilag ugyanúgy működik mint a let, azzal az egy különbséggel, hogy csak deklarálásnál tudunk neki értéket adni. Így biztosak lehetünk abban, hogy később nem írjuk felül véletlenül.

Arrow function 

Shorthand a függvény deklarációkhoz. A segítségével elhagyhatjuk a function kulcsszót egy névtelen függvénynél, illetve akár a kapcsos zárójeleket és a returnt is

const c = (a,b) => a * b;
console.log(c(2,3)); // 6 

Ennek az ES5-ös megfelelője így néz ki:

var c = function(a, b) {
	return a * b;
}
console.log(c(2,3));

For/Of ciklus 

Leginkább a foreachre hasonlít, egy iterable objektumon tudunk végigmenni vele:

let arr = ["1", "6", "37", "52"];
for (let x of arr) {
	console.log(x);
} 

Nem csak tömbökön működik. Például egy string is iterable, ezáltal így is használhatjuk:

let s = "ES6";
for (let y of s) {
	console.log(s[y]); //"E", "S", "6"
} 

Vegyük észre, hogy ebben az esetben nem a konkrét betűket, hanem annak indexeit kapjuk meg az y-ban, ezért van szükség a címzésre.

Map

kulcs-érték párokat tartalmaz, melyeknek megtartja a hozzáadási sorrendjét is:

let x = new Map();
x.set(y, 10);
x.set(z, 3); 

Tartalmaz néhány beépített metódust minden létrehozott Map:

• set: érték beállítása egy kulcshoz
• get: érték lekérdezése kulccsal
• clear: map kiürítése
• delete: elem törlés kulcs alapján
• has: tartalmazza-e a megadott kulcsot a map
• entries: A kulcs-érték párokat adja vissza egy iterator objectben
• keys: ugyanaz mint az entries csak kulcsokkal
• values: ugyanaz mint a keys csak értékekkel

Ezen kívül a már megszokott forEach is működik rajta, illetve van egy size propertyje, ami az elemszámot adja vissza.

Set

Hasonló a maphoz, annyi különbséggel, hogy egyedi értékeket tárolhatunk benne, nincsenek kulcs-érték párok.

Class

Magyarul osztályként találkozhatunk vele, az objektumok számára egy sablon, belső metódusokkal és tulajdonságokkal:

class Fruit {
	constructor(name, color) {
		this.name = name;
		this.color = color;
	}
} 

A construcor mindig kötelező, a példányosításnál ez a függvény fog lefutni:

var example = new Fruit("apple", "red");

Példányosítás után pedig a beállított tulajdonságokat le tudjuk kérdezni:

console.log(example.name); //apple
console.log(example.color); //red

Symbol

Egyedi azonosítónak használják, mely minden létrehozásnál más értéket vesz fel.

var truck = { color: "red", };
var id = Symbol(‘id’);
truck[id] = 856334; 

Így a Symbol által létrehozott egyedi azonosítóval kérhetjük le a truck objektum id-ját, ami csak és kizárólag a felette létrehozott Symbol objektummal működik, ha ugyan ezekkel a paraméterekkel létrehozunk egy másikat, azzal már nem fog.

Alapértelmezett értékek a paramétereknél 

A függvénydeklarációknál megadható a paraméterek kezdőértéke, amely akkor állítódik be, ha oda a függvényhívásnál nem adtunk meg semmit.

function add(x, y = 1) {
	return x + y;
}
add(3); //4 

Így létrehozhatunk opcionálisan megadható függvényparamétereket.

Rest paraméter 

Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:

function write(a, b, …args) {
	console.log(a);
	console.log(b);
	for(let current of args) {
		console.log(current);
	}
}

write(1,2,3,4,5,6,7,8);

Így az első 2 számot fixen kiírja a write, míg a harmadikat vagy azután következőket már nem kötelező megadnunk. Ha mégis megadjuk, azokat is kiírja.

Persze önmagában is használhatjuk, abban az esetben így kezdődne a létrehozás:

function write(...args) }

String.includes() 

Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:

var text = "Test String";
text.includes("rin"); //true 

Ezen kívül a startsWith() és az endsWith() metódusokkal ellenőrizhetjük, hogy a megadott szöveggel kezdődik vagy végződik-e a stringünk.

Array.from() 

Tömböt csinál egy iterable objektumból.

Array.from("123"); //[1,2,3]

Az ES6-nak itt nincs még vége, számos Javascript trükk épül rá amit a honlapkészítés során felhasználhatunk. Egy következő cikkben ismertetjük a további hasznos funkciókat, amelyek ezzel a szabvánnyal kerültek be a nyelvbe.