ECMAScript 6 oder ES6 ist die neueste Version von JavaScript und bringt tolle neue Features mit. Dieser Artikel beschäftigt sich mit einigen dieser Features, die du in deinem täglichen JavaScript Coding verwenden kannst.

Übersicht

• Variablen
• Arrow Functions
• String
• Array

Variablen

Let

In JavaScript sind wir es gewohnt, eine Variable mit var zu deklarieren. Mit der neuen JavaScript Version kann auch let verwendet werden. Der Unterschied der beiden Deklarationen liegt im Scope. Während der Scope für Variablen, die mit var deklariert sind, für umgebende Funktionen gültig ist, ist der Scope für Variablen, die mit let deklariert worden sind, nur für den Block innerhalb der Deklaration gültig.

if(true) {
  let x = 1;
}

console.log(x); // undefined

Die Verwendung von let kann zu einer sauberen Codeschreibweise führen und verhindert „herumliegende“ Variablen.

for(let i = 0, l = list.length; i < l; i++) {
  // do something with list[i]
}

console.log(i); // undefined

Oft würde man für eine weitere Iteration in dem gleichen Scope, beispielsweise die Variable j verwenden. Aber mit let könnte man einfach und sicher die Variable i nochmals deklarieren, solange es nur innerhalb seines eigenen Blocks deklariert und verfügbar ist.

Const

Es gibt einen weiteren Weg, Variablen innerhalb eines Blocks zu deklarieren. Mit const deklariert man eine read-only Referenz zu einer Variable. Es muss eine Variable direkt zugewiesen werden. Wenn versucht wird, die Variable zu ändern oder kein Wert sofort gesetzt wird, wird eine Fehlermeldung geworfen:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

Allerdings können immer noch Objekteigenschaften oder Array Werte geändert werden:

const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool

Arrow Functions

Arrow Functions sind eine großartige Bereicherung für die JavaScript Sprache. Sie machen den den Code kurz und prägnant. Der folgende Code zeigt eine Arrow Function, und dieselbe Funktion nur im ES5 Stil verfasst:

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];

let titles = books.map( item => item.title );

// ES5 equivalent:
var titles = books.map(function(item) {
   return item.title;
});

Wenn wir einen Blick auf die Syntax der Arrow Funktionen werfen, dann sehen wir kein Keyword function. Wir sehen nur 0 oder mehr Arguemte, den Pfeil (=>) und den Funktionsausdruck.

Bei 0 oder mehr als einem Argument müssen Klammern verwendet werden:

// No arguments
books.map( () => 1 ); // [1, 1]

// Multiple arguments
[1,2].map( (n, index) => n * index ); // [0, 2]

Wenn du logischen oder mehr Weißraum brauchst, setze den Funktionsausdruck in einem Block { … } :

let result = [1, 2, 3, 4, 5].map( n => {
   n = n % 3;
   return n;
});

Arrow Funktionen bedeuten nicht nur weniger zu tippen, sondern sie verhalten sich auch unterschiedlich zu den regulären Funktionen. Ein Arrow Funktionsausdruck erbt this und arguments vom umliegenden Kontext. Somit können hässliche Statements wie var that = this vermieden werden und es müssen keine Funktionen zum richtigen Kontext gebunden werden. Hier ist ein Beispiel (Hinweis: this.title vs. that.title in der ES5 Version):

let book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers() {
      this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));
   }
}

// ES5 equivalent:
var book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers: function() {
      var that = this;
      this.sellers.forEach(function(seller) {
         console.log(seller + ' sells ' + that.title)
      })
   }
}

String

Methoden

Einige Methoden sind zum String Protoyp hinzugefügt worden. Die meisten davon eliminieren den Workaround mit der indexOf() Methode.

'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true

Einfach aber sehr effektiv. Eine weitere bequeme Methode ist nun möglich, um einen sich wiederholenden String zu kreieren:

'my '.repeat(3); // 'my my my '

TEMPLATE LITERAL

Template Literale ermöglichen einen sauberen Weg, um einen String zu erstellen und String Interpolationen durchzuführen. Der Syntax dafür basiert auf dem Dollarzeichen und geschweiften Klammern $ {..}.

let name = 'John',
   apples = 5,
   pears = 7,
   bananas = function() { return 3; }

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);

// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');

Im obigen Beispiel und im Vergleich zu ES5 sehen wir den einfachen Weg von String-Verkettungen. Allerdings können Template Literale auch für mehrzeilige Zeichenfolgen verwendet werden:

let x = `1...
2...
3 lines long!`; // Yay

// ES5 equivalents:
var x = "1...\n" + 
"2...\n" +
"3 lines long!";

var x = "1...\n2...\n3 lines long!";

Array

Ab sofort hat das Array Objekt neue statische Klassenmethoden, sowie neue Methoden des Array Protoypen. Array.form erstellt eine Array Instanz von Array ähnlichen und abzählbaren Objekten. Beispiele für Array ähnlichen Objekten:
• Argumente innerhalb einer Funktion
• Eine nodeList die bei document.getElementsByTagName() zurückgegeben wird
• Die neuen Map und Set Data Strukturen

let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);
items.forEach(function(element) {
    console.log(element.nodeType)
});		

// A workaround often used in ES5:
let items = Array.prototype.slice.call(itemElements);

Einige neue Methoden sind jetzt beim Array möglich:

• Find: Gibt das erste Element zurück, bei dem der Callback true zurückgibt
• findIndex: Gibt den Index des ersten Elements zurück, bei dem der Callback true zurückgibt
• fill: überschreibt das Element eines Arrays mit dem gegebenen Argument

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]