npm install -g babel-cli npm install --save-dev babel-preset-es2015 babel --presets es2015 script_es6.js --out-file script_es5.js
Ostatnie polecenie reprezentuje transpilację z jednego pliku do drugiego. Od kilku dni należy do tego celu wykorzystywać preset es2015, wcześniej transpilacja była domyślną operacją.
Najważniejsze zmiany składniowe w ES2015 (ES6):
let keyword
Deklaruje zmienną typu block-scoped, co jest naturalne w większości języków programowania, w JS nie było, kiedy mieliśmy do wyboru tylko var (function-scoped variables).function myFunction() { console.log(a); let b = 13; //accessible throughout function console.log(b); if(true) { let c = 14; //accessible throughout function let b = 15; console.log(b); } //console.log(c); //c is not defined }
Zmienne możemy nadpisywać poprzez let, ale tylko jeżeli są w innym block-scope. Zaleca się używanie let zamiast var, ze względu na zmniejszenie podatności na bugi takiego kodu.
const keyword
Zmienne typu read-only, ostatnia linijka zwróci SyntaxError podczas transpilacji, a docelowo także błąd w run-time. Zmienne typu const są również block-scoped.
const pi = 3.141; var r = 2; console.log(pi * r * r); //Output "12.564" pi = 12; //throws read-only exception
W przypadku obiektów deklarowanych jako const będziemy mogli modyfikować ich propercje, a błąd dostaniemy tylko przy próbie nadpisania całego obiektu.
default parameter values
W ES5 nie musieliśmy przekazywać wszystkich argumentów wywołując funkcję. Nieprzekazane zmienne przyjmowały wartość undefined. Teraz możemy od razu zadeklarować dla każdego parametru domyślne wartości.
function myFunction(x = 1, y = 2, z = 3){ console.log(x, y, z); //Output "6 7 3" } myFunction(6, 7);
spread operator
Operator ten reprentują ... , a jego zadaniem jest rozdzielenie obiektu typu iterable na pojedyncze elementy. Po transpilacji otrzymamy metodę apply (przyjmuje listę parametrów jako tablicę) wołaną na funkcji, ale docelowo wykorzystane będą znacznie szybsze mechanizmy w runtime.
function myFunction3(a, b) { return a + b; } let data = [1, 4]; let result = myFunction3(...data); console.log(result); //Output "5"
Można go wykorzystać także przy budowaniu tablicy z innej tablicy.
rest parameter
Trzech kropek można także użyć do obsługi funkcji ze zmienną liczbą argumentów. Rest parameter zmapuje nadmiarowe zmienne jako tablicę.
function myFunction(a, b, ...args) { console.log(args); //Output "3, 4, 5" } myFunction(1, 2, 3, 4, 5);
array destructuring assignment
Pozwala na przypisanie wartości do wielu zmiennych za pomocą jednego wyrażenia. Prawą stroną musi być obiekt typu iterable. Array destructuring pozwala na ignorowanie niektórych elementów oraz użycie spread operator-a.
let myArray2 = [1, 2, 3]; let [g, h, i] = myArray2; let [j, , k] = myArray2; let [l, ...m] = myArray2;
object destructuring assignment
W analogiczny sposób możemy wykonywać destructuring na obiektach.let object = {"name" : "John", "age" : 23}; let {name, age} = object; //object destructuring assignment syntax
arrow function
Przypomina dobrze znane np. z C# lambda expression. Więcej niż jedną linię należy opakowywać w nawiasy klamrowe.
let circleArea = (pi, r) => pi * r * r; let result = circleArea(3.14, 3); let circleArea2 = (pi, r) => { let area = pi * r * r; return area; }; let result = circleArea2(3.14, 3);
enhanced object literals
Wprowadzono kilka udogodnien składniowych przy budowie obiektów. Mamy do dyspozycji skróconą składnię przy definiowaniu propercji (również tych z wyliczanymi nazwami) oraz metod,
let x = 1, y = 2; let object = { x, y }; console.log(object.x); //output "1" let object = { ["first" + "Name"]: "Eden", }; //extract console.log(object["first" + "Name"]); //Output "Eden" let object = { myFunction(){ console.log("Hello World!!!"); //Output "Hello World!!!" } }
