Lernen Sie ES6 + in diesem kostenlosen und interaktiven 23-teiligen Kurs

JavaScript ist zweifellos eine der beliebtesten Programmiersprachen der Welt. Es wird fast überall verwendet: von großen Webanwendungen über komplexe Server bis hin zu Mobil- und IoT-Geräten.

Deshalb haben wir uns mit Dylan C. Israel zusammengetan - einem Programmierer von YouTuber und freeCodeCamp - und ihn gebeten, einen Einführungskurs in ES6 auf Scrimba zu erstellen.

Der Kurs enthält 17 Lektionen und 4 interaktive Herausforderungen. Es ist für JavaScript-Entwickler gedacht, die die modernen Funktionen von JavaScript kennenlernen möchten, die in ES6, ES7 und ES8 eingeführt wurden.

Werfen wir einen Blick auf die Kursstruktur:

Teil 1: Einführung

Im Einführungsvideo gibt Dylan einen Überblick darüber, wie sein Kurs aussehen wird und welche Hauptthemen er ansprechen wird. Er gibt Ihnen auch ein Intro über sich selbst, damit Sie ihn kennen, bevor Sie sich mit dem Codieren befassen.

Teil 2: Vorlagenliterale

Das erste Feature von ES6, das im Kurs behandelt wird, sind Vorlagenliterale. Vorlagenliterale sind eine sauberere und schönere Art, mit Saiten zu spielen. Sie müssen nicht mehr viele +Zeichen verwenden, um die Saiten zu konkatieren.

let str1 = 'My name is:' let name = 'Dylan'; let str2 = `${str1} ${name}` // --> 'My name is: Dylan' 

Vorlagenliterale beginnen mit einem Backtick, und wir verwenden das $Zeichen und die geschweiften Klammern, um eine Variable dazwischen einzuführen.

Teil 3: Objekte zerstören

In Teil 3 erfahren Sie, wie Sie ein Objekt destrukturieren und die Eigenschaften extrahieren, an denen Sie interessiert sind.

let information = { firstName: 'Dylan', lastName: 'Israel'}; let { firstName, lastName } = information; 

Im obigen Code extrahieren wir die Eigenschaften firstNameund lastNameaus dem Objekt und weisen sie mithilfe der Objektzerstörung Variablen zu.

Teil 4: Arrays zerstören

In diesem Teil erfahren Sie, wie Sie mithilfe der Array-Zerstörung den Zeiger des gewünschten Elements aus dem Array abrufen.

let [ firstName ] = ['Dylan', 'Israel']; 

Hier firstNamezeigt auf das erste Element im Array auf der rechten Seite. Wir können auch weitere Zeiger auf der linken Seite der Elemente in unserem Array erstellen.

Teil 5: Objektliteral

In Teil 5 unseres Kurses lernen wir eine weitere coole Funktion von ES6, das Object Literal. Mit Objektliteralen können Sie den Schlüssel im Objekt weglassen, wenn der Name des Schlüssels und der Wert identisch sind.

let firstName = 'Dylan'; let information = { firstName }; 

Im obigen Beispiel wollten wir also die Eigenschaft von firstNamein unser informationObjekt einfügen. Die firstNameVariable ist eine andere Variable mit demselben Namen. Wir lassen den Schlüssel weg und übergeben nur den Namen der Variablen. Dadurch wird die Eigenschaft erstellt und der Wert selbst zugewiesen.

Teil 6: Objektliteral (Herausforderung)

Jetzt ist es Zeit für die erste Herausforderung des Kurses! Das Ziel hier ist es, die neue Stadt, die neue Adresse und das Land damit zu konsolidieren.

function addressMaker(address) { const newAddress = { city: address.city, state: address.state, country: 'United States' }; ... } 

Wir empfehlen Ihnen, die bisher erlernten Themen zur Lösung dieses Problems zu verwenden. Dies umfasst Vorlagenliterale, Objektzerstörung und Objektliterale.

Teil 7: For… Of Loop

In Teil 7 lernen Sie eine neue Methode zum Durchlaufen von Elementen kennen. ES6 führte eine For… Of-Schleifenanweisung ein, die eine Schleife erstellt, die iterierbare Objekte wie String-, Array-, NodeList-Objekte und mehr durchläuft.

let str = 'hello'; for (let char of str) { console.log(char);}// "h"// "e"// "l"// "l"// "o" 

Im obigen Codebeispiel durchläuft die For… Of-Schleife eine Zeichenfolge und meldet die Zeichen ab.

Teil 8: For… Of Loop Challenge

In dieser Herausforderung werden Sie gefragt , zu erraten , was passiert , wenn Sie letüber constin einer for…ofSchleife, und zu versuchen , die Werte innerhalb der Schleife zu manipulieren.

let incomes = [62000, 67000, 75000]; for (const income of incomes) { } console.log(incomes); 

Teil 9: Spread Operator

In Teil 9 des Kurses lernen Sie eine der coolsten Funktionen von ES6 kennen: den Spread Operator.

let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; // arr3 = [1, 2, 3, 4, 5, 6]; 

Der obige Code zeigt eine der vielen coolen Implementierungen der Verwendung des Spread-Operators. Hier kombinieren wir zwei Arrays, indem wir sie in ein neues Array mit drei Punkten (…) vor dem Namen des Arrays einfügen.

Teil 10: Rest Operator

In dieser Lektion lernen Sie einige Anwendungsfälle für den Rest-Operator kennen. Der Rest-Operator hilft uns dabei, Funktionsparameter besser zu handhaben, indem er es uns ermöglicht, die variable Anzahl der Funktionsparameter als Array darzustellen.

function findLength(...args) { console.log(args.length);} findLength(); // 0 findLength(1); // 1 findLength(2, 3, 4); // 3 

Hier rufen wir dieselbe Funktion mit einer anderen Anzahl von Parametern auf, und der Rest-Operator erledigt das perfekt für uns.

Teil 11: Pfeilfunktionen

Diese Lektion lehrt uns eine der coolsten und am meisten diskutierten Funktionen, die in ES6 eingeführt wurden: Pfeilfunktionen. Pfeilfunktionen haben die Art und Weise, wie wir Funktionen schreiben, geändert.

const square = num => num * num; square(2); // 4 

Durch die Verwendung der Pfeilfunktion wurde das Aussehen einer Quadrierungsfunktion vollständig geändert. In nur einer Codezeile können wir das Quadrat einer Zahl zurückgeben. Pfeilfunktionen haben viele andere großartige Implementierungen, die in der Lektion erklärt werden.

Part #12: Default Parameters

Default parameters allow us to initialise functions with the default value. In this lesson, you will learn how helpful this feature can be in real life coding tasks, as it helps you avoid errors and bugs. A simple example of default parameters would be:

function sum (a, b = 1) { return a + b; } sum(5); // 6 

Here we are setting the default value of b so that when we do not pass any value of b, it will use the default value for calculating the result.

Part #13: includes()

Using the includes method, we can find out if any string contains a particular character or a substring. In this lesson, you will learn in detail about the practical use-cases of this function.

let str = 'Hello World'; console.log(str.includes('hello')); // true 

Here, we find out if our string contains the substring of hello. As you can see, the includes method returns either true or false depending on whether or not the condition is matching.

Part #14: Let and Cost

Perhaps the most important feature of ES6 is the two new keywords for declaring variables: let and const.

let str = 'Hello World'; const num = 12345; 

Using let, we can create variables which can be changed later in the program. Variables declared with const can never be changed. We will learn about them in this lesson.

Part #15: Import and Export

We all know how important it is to have modular code, especially if you are working on large-scale applications. With import and export statements in JavaScript, it has become extremely easy and clean to declare and use modules.

In part 15 of this course, you will learn how to use export and import statements to create modules.

// exports function export function double(num) { return num * num; } 

In the code above, we are exporting a function by the name of double. We’re then importing the function in a separate file:

// imports function import { double } from '..filepath/filename 

Part #16: padStart() and padEnd()

ES2017 introduced two new methods to manipulate strings, which you will learn in detail in this part. padStart and padEnd will simply add padding at the start and end of the string.

let str = 'Hello'; str.padStart(3); // ' Hello' str.padEnd(3); // 'Hello ' 

Part #17: padStart() and padEnd() challenge

In this part, you’ll tackle the third challenge of this course. It’s a small quiz in which Dylan first asks you to guess, and then explains what happens when the following code runs

let example = 'YouTube.com/CodingTutorials360'; // console.log(example.padStart(100)); // console.log(example.padEnd(1)); 

Part #18: Classes

Classes were introduced in ES6, and they have completely stepped up the game for using Object Oriented Patterns in JavaScript. Although it is simply syntactical sugar over JavaScript’s existing prototypical inheritance, it has made it easier to write in a more object-oriented way.

So in this lesson, you will learn in detail how you can use classes and take the benefit of OOP features like, for example, inheritance. Below is a simple example of using classes.

class Car { constructor(wheels, doors) { this.wheels = wheels; this.doors = doors; } describeMe() { console.log(`Doors: ${this.doors} and Wheels: ${this.wheels}`); }} const car1 = new Car(4, 2); car1.describeMe(); // Doors: 2 and Wheels: 4 

Here, we create a simple Car class in which we have a constructor assigning the wheels and doors. We also have a method which logs the number of doors and wheels of the car.

Then, we create a new instance and pass the values of wheels and doors. Finally, we call the describeMe method on it.

Part #19: Trailing Commas

In lesson 19, you will be learning how to use trailing commas. They make it easier to add new elements, properties, or attributes to your code, as you can do so without having to worry about adding a comma to the previous element.

let arr = [ 1, 2, 3, ];arr.length; // 3 

This was just a simple example of using trailing commas. You will learn more about them in our lesson during our course.

Part #20: Async & Await

Async & Await is my favourite features of ES6. With Async & Await, we can write asynchronous code which looks like synchronous code. This is clean, easy to read, and easy to understand. So in this lesson, you’ll learn a few practical examples of how to use it.

let response = await fetch('//example.com/books'); console.log('response'); 

In the example above, we have used the await keyword before the fetch statement, so it will wait until the result of this API has been fetched before moving forward to the next line.

Part #21: Async & Await (Challenge)

This is the last challenge of this course, and it is of course about Async & Await. You will be asked to first try converting the following promise-based code into using Async & Await:

function resolveAfter3Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 3000); }); } 

Don’t worry if you can’t solve it completely. Dylan will explain in detail how to do it. By the end of the lesson, you will be confident enough to start using it immediately.

Part #22: Sets

In the final lecture of the course, you will be learning about a very important data structure, Set. This is an object which lets you store unique values. So whenever you want to have a collection which contains only unique values, you can use Sets.

const set1 = new Set([1, 2, 3, 4, 5]); 

Part #23: What’s next?

Click the image to get to the course

To wrap up the course, Dylan gives some tips on how to take this learning on further and improve the code you write today.

And that’s it! If you get this far you can give yourself a pat on the back! You’ve completed the course and are one step closer to becoming a JavaScript ninja.

Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.