ECMAScript 6 [ES6]

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:
ECMAScript 6 [ES6] let const

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();

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij