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.

This lesson presents one way of setting up a development environment. We use Visual Studio Code from MS as the IDE and ViteJS as the dev server.

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.

Working with strings is a basic tool for every programmer. It's a good thing that ES6 offers some new and very useful string functions that save a lot of typing work.

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.

ES5 already has some very useful array functions that take a more functional approach. ES6 has added a few others that make working with arrays even more convenient. However, some of the "old" functions already available in ES5 are also acknowledged here.

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.

Asynchronous processes can be handled with callback functions, but there is a risk that the nesting depth will be too great and the code will become confusing (the so-called callback hell). Promises solve this problem by bypassing deep nesting and allowing asynchronous processes to be chained on one level.

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).

Modules have been used in Node.js from the very beginning, but in the beginning it relied exclusively on the CommonJS module format with require. Since ES6, there has been a module definition in the standard and thus the new import/export keywords. This format is now supported by almost all (new) JS libraries, and Node.js can also handle it in the latest versions.

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.

Until ES6, classic object-oriented programming with classes and inheritance only existed via the detour of a prototype in a constructor function. This was cumbersome, did not appear very compact and was therefore also prone to errors. With ES6, the new keyword class now allows the definition in a compact form, as we know it from other programming languages such as Java, C# and C++. Internally, however, it remains a fundamentally prototype-based system, only with a nicer syntax.

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.

The declaration of members or fields has also been made possible with the newer standards. This means that static fields can also be declared and initialized.

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.