Modern JavaScript with ES6-ES13 (JS-Tutorial)

This is what you can expect in this JavaScript ES6 course.

JavaScript has been around in browsers for many years. Almost every website contains more or less JS code. Although the first versions were still very bumpy, it has been possible to work quite well with the ES5 standard so far, at least if you were able to avoid the pitfalls and imponderables skillfully. So why learn something new and not stick with the tried and tested? In this lesson, I will show you the advantages of the new ES6 standard and the reasons why you can't really do without it.

Up to and including ES5, the var keyword was the only way to declare variables, and its peculiarities often caused unwanted behavior or even errors. ES6 introduces the two new keywords let and const, which iron out some of var 's shortcomings.

Every web developer is familiar with the For loop. It is also often used to run through arrays. With ES6, there is a variant of the For loop that allows this to be done in a much shorter and more compact way.

Functions are essential in JS and were previously only declared and defined using the keyword function. ES6 introduces a very elegant and short notation that not only makes the code more readable, but also offers a solution to a tiresome problem with this.

Optional parameters are somewhat awkward to implement in ES5 and are not revealed to the caller of a function. With ES6, optional parameters and their default values can be written directly into the function signature.

Destructuring allows the targeted extraction of elements from objects and arrays. On closer inspection, there are many possible applications that make JS code more elegant and compact.

Until ES6, it was necessary to handle the arguments variablein order to allow a variable number of parameters for functions. This is much easier in ES6 with the so-called rest parameters.

The ... operatoris not only used for residual parameters in function definitions, it can also be used in array structuring to catch the "rest" of the elements and make them available as an array.

The remainder operator can not only be used with arrays, it can also be used with objects to collect the remaining properties and make them available as an object.

The opposite of the remainder operator is the spread operator. It looks the same (...), but is on the other side of an assignment and spreads the array into its individual parts.

The "trick" with the spread operator also works very well with objects. It can be used to "mix" objects into other objects. However, there is also a very good alternative for this with Object.assign().

Functions in object literals are very cumbersome to write with the function keyword. With ES6, however, they can also be written in a much shorter and catchier way.

There's no other way to put it: up to ES6, multi-line string literals with integrated variable values were a pain and also very unpleasant to read. The new template literals of ES6 are a syntactic blessing.

Objects could always be used as a key-value store or dictionary, but with some disadvantages. The new map data structure gets rid of these disadvantages and offers solid dictionary functionality, as known from other programming languages.

After the callback hell can be avoided with Promises, the async/await constructtakes syntactic sugar one step further. It is based on Promises and allows asynchronous processes to be programmed almost like synchronous ones. Once you have programmed with async/await, you will avoid the direct use of the then methodof Promises (and even more so the use of callbacks).

In addition to the static import of modules with the keyword import, ES6 also supports dynamic import with the import function. As the whole thing works asynchronously, a promise is returned, the resolution of which can be waited for using await. This means that nothing stands in the way of reloading modules at any time during runtime.

Inheritance is also still based on prototypes, but is much easier and clearer to write in ES6 with the keyword extends. If you use it, you have to call the constructor of the base class with super at the right time. How to do this is of course also explained in this lesson.

Private fields can now also be declared, and you are guaranteed not to be able to access them from the outside. The declaration takes a little getting used to, as it is noticeably different from other programming languages.

With the new keyword class and the associated features such as inheritance and data encapsulation (private fields), all OO programmers should be happy, right? In this lesson, I would like to present an alternative for creating objects that works without classes, prototypes and this, but allows a more flexible type of "inheritance" or rather "composition".

The most important features of version ES6 and newer should now be covered. However, new features are always being added. Some less frequently used functions have not yet been mentioned. This lesson explains what can still be expected in the future and which functions could still be of interest in special cases.