ECMAScript 6 zwany jest również jako ECMAScript 2015 albo najkrócej ES6. Jest to 6 edycja standardu ECMAScript, która ostatecznie opublikowana została jako standard 17 czerwca 2015 roku. Nowy standard niesie ze sobą kilka nowości ułatwiających codzienną pracę na polu front-endu.

Przejście od etapu ciekawej nowości do etapy must-know dał ES6 AngularJS w wersji 2. W przypadku ECMAScript 6 cały czas możemy spotkać się z problemem braku wsparcia ze strony przeglądarek i wtedy nieocenione będą narzędzia typu Webpack z pluginem Babel, który to przekonwertuje nam kod do ECMAScript 5.

Template Stringi w EcmaScript6

Bardzo użyteczną rzeczą wprowadzoną w ES6, są Template Stringi. W ES5 wstawianie do stringów zmiennych również było możliwe, jednak przy dłuższym tekście oraz większej liczbie zmiennych powodowało spore zamieszanie.

ES5:

var user = "Mark";
var trolley = [5, 3];
var sentence = "Hello " + user + ". You have to paid: " + (trolley[0] + trolley[1]) + " PLN.";
console.log(sentence);

ES6:

let user = "Mark";
let trolley = [5,3];
let sentence = `Hello ${user}. You have to paid: ${trolley[0] + trolley[1]} PLN.`;
console.log(sentence);

Oprócz widocznej powyższej zmiany, która zdecydowanie poprawiła czytelność zapisu dla Template Stringów znaczenie mają również znaczniki: spacje i entery:

let list = `List: //zachowany zostaje podział na akapity
 1) First point //zachowane zostają wcięcia
 2) Second point
 3) Third point`;

Podsumowując używając nowego znaku `` (znajduje się on przed klawiszem 1 na klawiszu z ~) możemy używać zmiennych w jego wnętrzu oraz zachowane zostaje formatowanie (spacje i entery).

Deklaracja zmiennych let, const

W EcmaScript6 do dotychczasowej deklaracji zmiennych słowem kluczowym var doszły dwie nowości let i const, które rozwiązały problem zasięgu deklarowanych zmiennych.

Cała różnica w ich działaniu widoczna jest w poniższym przykładzie. Zarówno let jak i const, są ograniczone do zakresu w jakim zostały zadeklarowane. Dlatego zmienne nrsecond nrthird (zadeklarowane w poniższym kodzie) nie zostaną wyświetlone w konsoli, a zamiast tego pojawi się komunikat „is not defined”. Dodatkowo próba ponownej deklaracji zmiennej let nrsecond w tym samym zakresie skończy się błędem: „has already been declared”.

(function letfn() {
   let nrfirst = 1;
   if (nrfirst >= 1) {
      var nrold = 4;
      let nrsecond = 2;
      const nrthird = 3;
      //let nrsecond = 2; //has already been declared
   }
   console.log(nrfirst); 
   console.log(nrold);
   console.log(nrsecond); //is not defined
   console.log(nrthird); //is not defined
})();

Jeszcze tylko ważna uwaga dotycząca const Jak można się domyśleć uniemożliwia ono nadpisanie zmiennej, która została przypisana bezpośrednio. Inaczej jest jednak w sytuacji jeżeli const jest obiektem. W poniższym przykładzie zmienna txt będąca częścią obiektu zostanie zamieniona z 123 na 456;

(function letfn() {
   const obj = {txt: '123'};
   obj.txt = '456';
   console.log(obj.txt); 
})();

Efekt console.log dla powyższych przykładów:

Operator Rest […]

Umożliwia nam uzyskanie dostępu do nieokreślonej liczby argumentów w formie tablicy.

function(a, b, ...arguments) {
   console.log(arguments.length); //wyświetli liczbę przekazanych argumentów
}

Operator Spread […]

Innym operatorem wprowadzonym do ES6 jest operator Spread, który wygląda identycznie jak opisane przed momentem Rest (zapis to również 3 kropki). Jednak jego działanie jest zupełnie inne. Spread rozbija tablicę do pojedynczych elementów. Przy próbie stworzenia jednej tablicy z dwóch jak pokazano poniżej bez operatora […] uzyskalibyśmy dwie zagnieżdżone tablice w nowej.

let num1 = [1,2];
let num2 = [3,4];
let all = [...num1, ...num2];
console.log(all); //1,2,3,4 (rozbija i łączy wskazane argumenty)

Funkcje strzałkowe => (funkcje lambda, arrow function)

Jest to nowość w EcmaScript 6, chociaż ten zapis jest znany w innych językach programowania. Funkcje strzałkowe, są anonimowe oraz dziedziczą this po najbliższej funkcji.

Różne możliwości zapisu funkcji strzałkowych w ES6:

• (param1, param2, param3) => { //some code }
• (param1, param2, param3) => expression
• () => { return expression };
• params => ({name: ‚Jan’})
• (name, surname) => { return name + ‚ ‚ + surname };
• (name, surname) => name + surname;

function Counter(){
  this.count = 0;
  setInterval(() => {
    console.log(this.count++);
  }, 1000);
}
var count = new Counter();

Klasy w EcmaScript 6

Klasy, są w rzeczywistości specjalnymi funkcjami, które nie wprowadzają nowego modelu dziedziczenia zorientowanego obiektowo w JS. Stanowią jedynie (jak to zostało nazwane przez twórców) „syntactical sugar”. Klasy w ES6 wprowadzają porządek do kodu aplikacji. Temat jest dosyć obszerny i wiele przykładów z wytłumaczeniem zostało przedstawione na stronie: https://developer.mozilla.org/pl/. Poniżej prosty przykład, na którym widać konstrukcję klasy, jej wywołanie oraz dziedziczenie.

class House {
	constructor(area, rooms) {
		this.area = area;
		this.rooms = rooms;
	}
	describeIt() {
		console.log(`This house has total surface area ${this.area} and ${this.rooms} rooms.`);
	}
}
var TomsHouse = new House("200m", 8);
TomsHouse.describeIt();
class TwinHouse extends House {
	constructor() {
		super("280m", 9);
	}
	describeTwin() {
		console.log(`This twin-house has backyard. Total surface area ${this.area} and ${this.rooms} rooms.`);
	}	
}
var JackHouse = new TwinHouse();
JackHouse.describeTwin();