Es6 Bootcamp Next Generation Javascript

Learn and Use the Future of JavaScript - Today!

Last updated 2022-01-10 | 4.6

- Understand and Use the new Features and Concepts introduced with ES6
- Get an Overview over the Language Additions and Changes
- Confidently apply the new Syntax
- new APIs and other new Features in Web Applications

What you'll learn

Understand and Use the new Features and Concepts introduced with ES6
Get an Overview over the Language Additions and Changes
Confidently apply the new Syntax
new APIs and other new Features in Web Applications

* Requirements

* Basic to advanced JavaScript knowledge or resources on ES5 JavaScript follow along
* are required
* Basic Web Development Skills (HTML
* CSS
* JavaScript) are assumed
* Advanced JavaScript Knowledge is a Plus

Description

Learn modern JavaScript!

Knowing modern JavaScript, ES6 (ECMAScript 6), is extremely important in the world of JavaScript! ES6 adds tons of new features, methods, objects and helpers and the earlier you feel confident using them, the better!

JavaScript is the most important programming language in the web and it's constantly evolving. This course introduces you to the biggest "feature update" in the last couple of years: ES6 - which added a lot of new syntax features and improvements.

Get the "All-In-One" package today!

This course follows a hands-on, example-driven approach to show and explain all the important features added to JavaScript. This includes important syntax changes and additions like let, const, rest & spread operators and continues with Promises, the Reflect API, the Proxy API, Maps & Sets, tons of new methods and functions and much more!

At the end of the course, we'll even build a complete project, using many of the new Features shown throughout the Course!

Benefit from my knowledge as both a freelance web developer and a top-rated instructor with many years of experience.

As a freelance web developer, using JavaScript is my day-to-day work and therefore I always found it annoying the ES6 Resources are scattered out all over the web. I created this Course to share my knowledge on ES6 with you!

I also love passing my knowledge to other people and my various, top-rated courses as well as my successful YouTube channel are the best proof of that.

Who this course is for:

  • Students who have experience with "current-generation" JavaScript (ES5) and know the basics of the language
  • Students also taking my JavaScript Bootcamp course to have a nice follow-up on it
  • Everyone interested in the new Features and Additions, ES6 brings to JavaScript

Course content

12 sections • 115 lectures

Introduction Preview 03:26

Let me give you an introduction to this course and its content!

Join our Online Learning Community Preview 00:21

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

JavaScript Languages - ES6 vs ES5 Preview 01:23

What does ES5 and ES6 mean? This lecture answers this question.

Course Format Preview 01:28

I use a very "hands-on" format in this Course. Learn more about it, in this lecture.

ES6 Compatibility with Browsers Preview 00:14

ES6 isn't natively supported by all Browser yet, or at least not all Features are. It's important to know which Features may or may not be used. This compatibility chart should be helpful to you.

Using ES6 Today Preview 02:56

Learn how to use ES6 today!

Let & Block Scope Preview 04:57

The "let" keyword is a brand-new addition to JavaScript and whilst it allows us to create variables like "var" does, it also introduces "Block Scope" to JavaScript. What all that is? Have a look at this lecture to learn more!

Constants with "const" Preview 03:31

Besides "let", "const" was added to make the declaration of constants easy.

Hoisting in ES6 Preview 02:29

With let & const, Hoisting changed a bit in ES6, learn how it changed, with this lecture.

(Fat) Arrow Functions Preview 07:46

ES6 introduces a new way to write Functions - the (Fat) Arrow Syntax. Learn how it works and what's special about it, in this lecture.

(Fat) Arrow Functions and the "this" Keyword Preview 04:46

Besides a different Syntax, (Fat) Arrow Functions introduce one huge new feature/ change to functions. Learn which change it is, with this video.

Functions and Default Parameters Preview 06:22

This lectures teaches you how to set and work with Default Parameters in JavaScript Functions.

Object Literal Extensions Preview 07:44

When creating Objects with the Literal Notation, you now got some new tools available. Learn more in this lecture.

The Rest Operator Preview 04:18

A couple of new operators were added with ES6, one important one is the Rest Operator, which is explained in this lecture.

The Spread Operator Preview 02:16

Closely related to the Rest Operator, the Spread Operator is another new operator added with ES6. This lecture shows you how to work with it.

The for-of Loop Preview 01:44

A new Loop was added with ES6. Learn all about it in this lecture.

Template Literals Preview 04:30

There's also a new way to create (complex) strings. This lecture dives into Template Literals and gets you going with them.

Destructuring - Arrays Preview 07:57

A new concept was added with ES6: Destructuring. Learn more about it and see how it is used with Arrays, in this lecture.

Destructuring - Objects Preview 03:50

Like Arrays, Objects may be destructured as well.  Learn more about it, in this lecture.

Destructuring - Summary Preview 00:58

Time to summarize Destructuring and tie all things together.

Wrap Up Preview 01:15

A quick wrap up of this module.

Module Resources Preview 00:02

Introduction Preview 00:28

Let me give you a brief module introduction and explain what Modules and Classes are.

Alternative Plunker Setup Preview 00:07

Modules Setup Preview 05:04

As ES6 doesn't run natively in the Browser yet, we need to set up some things in our workspace before we can use Modules. This lecture shows the necessary steps.

Modules Basics Preview 05:57

Time to dive into Modules and cover their basics.

Import & Export Syntax Preview 06:09

There are different ways to export or import code with ES6 Modules. This lecture shows and explains the different ways to do it.

Modules - Strict Mode and Global Scope Preview 00:10

There are some important things to know, when working with ES6 Modules. Have a look at this article to quickly understand it.

Class Basics Preview 04:01

Classes make the creation of Object Blueprints even easier than before. Learn how to work with classes, in this lecture.

Classes & Prototypes Preview 01:37

It's important to understand how Classes work together with Prototypes. This lecture will get you there.

Inheritance Preview 05:46

A big feature of ES6 is, that the classes may also inherit from each other. This lecture shows how that works.

Inheritance & Prototypes Preview 01:28

With ES5, Prototypes were the way to implement Inheritance in JavaScript. With Inheritance now also available with the ES6 classes, the question is how both concepts are related. This lecture dives into that question.

Static Methods Preview 02:48

ES6 classes may also expose static methods which can be used without instantiating a class. This lecture explores this concept.

Classes & Modules Preview 00:47

Time to combine Classes and Modules and see how both concepts work together.

Getters & Setters Preview 04:58

You may also encapsulate certain properties in your classes and use Getters and Setters for that.

Extending Built-in Objects Preview 03:10

You may not only extend your own Classes, you can also extend built-in Objects. This lecture dives into that concept.

Extendable Built-in Objects Preview 00:05

Learn which built-in Objects may be extended.

Wrap Up Preview 01:03

A quick module wrap up.

Module Resources Preview 00:01

Introduction Preview 02:10

Let me give you a brief introduction to this modules and ES6 Symbols.

Symbols Basics Preview 04:31

What are Symbols? This lecture answers this question.

Shared Symbols Preview 04:34

We just learned that Symbols provide a unique ID. But there's also the possibility of sharing one ID over multiple Symbols. How and why? Have a look at this lecture.

Advantages of (unique) IDs / Symbols Preview 01:13

Let's have a look at the advantages (unique) IDs/ Symbols offer us.

Well-Known Symbols Preview 05:56

Built-in Objects in JavaScript use Symbols and we can take advantage of those "well-known" Symbols. This lecture dives deeper into this topic.

Module Resources Preview 00:01

Introduction Preview 01:53

A quick module introduction.

Iterator Basics Preview 04:42

Let's dive into Iterators first. This lecture gives you the basics about them.

Iterators in Action Preview 04:29

Now that we know what Iterators are, it's important to see them in action. This lecture will do just that.

Creating a Custom, Iterateable Object Preview 03:51

The cool thing about Iterators is, that we can use them in our own objects. Learn how to do that, with this lecture.

Generators Basics Preview 02:56

Iterators are one half of that module, Generators are the other. What are Generators? Have a look at this lecture to learn more.

Generators in Action Preview 03:14

As with Iterators, it's best to see Generators in Action and also learn how they are related to Iterators.

Controlling Iterators with throw and return Preview 03:00

What if you wanted to control the execution flow of your Iterator? You can do that with throw() and return(), as this lecture shows.

Module Resources Preview 00:01

Introduction Preview 01:42

Let me introduce the concept of Promises and this module to you.

Creating & Resolving Promises Preview 04:00

The first important step is to understand how Promises are created and how to work with them. This lecture explores those topics.

Rejecting Promises Preview 01:21

A Promise might not be resolved due to various reasons, therefore, you can also reject it. Learn how, in this lecture.

Chaining Promises Preview 03:59

What's better than one Promise? Multiple Promises, used together! 

Catching Errors Preview 02:25

You already learned how to reject Promises and handle that case. But there's also another way to handle rejected Promises. This lecture shows which way I mean.

Built-in Methods - All and Race Preview 04:20

There exist some cool, built-in methods for Promises. Learn more about them, in this lecture.

Wrap Up Preview 00:36

A quick wrap up of the concepts learned in this module.

Module Resources Preview 00:01

Introduction Preview 01:37

A quick module introduction.

The Object Preview 08:51

The built-in Object object received some additions and new features. Learn more about it in this lecture.

The Math Object Preview 03:37

The Math Object also saw some additions. Let's dive into some of them!

Strings Preview 03:08

There are now even more things you can do with Strings in JavaScript. Let's have a closer look in this video.

The Number Object Preview 03:47

You already guessed it, the Number Object also has some new tricks to show. Let's have a look at them.

Arrays (1/2) Preview 09:06

Arrays got loads of new features and methods, time to have a look at them.

Arrays (2/2) Preview 04:48

Arrays got loads of new features and methods, time to have a look at them.

Wrap Up Preview 00:42

A quick module wrap up.

Module Resources Preview 00:01

Introduction Preview 01:02

Let me give a brief introduction to Maps and Sets and this Module in general.

Maps - Creation & Adding Items Preview 02:42

How does a Map work, how is it created and how can you add items to it? This lecture answers these questions.

Maps - Managing Items Preview 02:32

We got items in the Map. And now what? There are a couple of ways to work with those items. This lecture explores your possibilities.

Maps - Looping through Maps Preview 03:11

As a Map is a collection, you may loop through it. This lecture shows how.

Maps - Wrap Up Preview 01:11

Time for a quick summary of the concepts learned and the Map Object.

The WeakMap Preview 05:43

Besides the Map, there also is the WeakMap. What's that? This lecture explains it, as well as the differences between the "normal" Map and the WeakMap.

Sets - Creation and Adding Items Preview 02:42

Besides Maps, Sets are another new form of Collections in ES6. Let's learn what they are, how they work, how to create a Set and how to add items to it.

Sets - Managing Items Preview 02:26

Like Maps, Sets also don't hold Items to then do nothing with them. Therefore, let's have a look at the interaction possibilities we have.

Sets - Looping through Sets Preview 01:18

Of course you may also loop through sets. There's an interesting behavior, as we will see in this lecture.

Sets - Wrap Up Preview 00:46

Let me summarize the different concepts learned.

The WeakSet Preview 05:20

We not only have Maps and WeakMaps, we also have WeakSets. Not what's that? Learn more, in this lecture.

Module Resources Preview 00:01

Introduction Preview 02:27

A quick module introduction.

Creating Objects with Reflect.construct() Preview 05:22

The Reflect API offers you a method to create objects. Yet another way? Yes, but you'll also learn why it has this method.

Calling Functions with Reflect.apply() Preview 05:28

You may also call functions with the Reflect API. Why and how? Have a look at this lecture.

Reflect and Prototypes Preview 04:40

The Reflect API also offers some new methods to work with Prototypes. Learn which methods that are and how you may use them.

Reflect.construct(), apply() and Prototypes Interaction Preview 02:11

See how you can combine the various Reflect API methods discussed until now.

Accessing Properties with Reflect Preview 08:31

 You may also access Properties through the Reflect API. Learn more, in this lecture.

Analyzing Objects with Reflect.ownKeys() Preview 01:02

Accessing Properties is great, but what if you want to find out which Properties an object has? The ownKeys() method might be helpful!

Creating & Deleting Properties with Reflect Preview 04:54

Accessing Properties, analyzing Properties - can we also create and delete Properties? Of course we can!

Preventing Object Extensions & Wrap Up Preview 03:42

You can also control if an Object should be extendable or not. Additionally, I'll give a short wrap up of that module.

Module Resources Preview 00:01

Basics Preview 01:38

What are Proxies? And why might they be useful? This lecture will answer these questions.

Traps in Action Preview 05:51

So, Traps are an important part of Proxies. Let's see how they actually work.

Proxies and Reflect Preview 04:06

I mentioned it all the time: Proxies and the Reflect API work together very well. Let's see that in action.

Using Proxies as Prototypes Preview 03:02

Now we're getting fancy - you may use Proxies as Prototypes. This lecture shows you how to do that.

Proxies as Proxies Preview 01:47

We're getting even fancier - you can also wrap Proxies! Why and how? Let's have a look.

Wrapping Functions Preview 03:34

Back to "more normal" use cases. You may also wrap functions, not only objects.

Revocable Proxies Preview 03:09

Sometimes, you only temporarily want to use a Proxy. For such an use case, you may use revocable Proxies.

Wrap Up Preview 00:51

A quick module wrap up.

Module Resources Preview 00:01

Introduction Preview 01:15

Let me show you what we're actually going to build!

Getting Started Preview 04:44

Since Modules will be used (of course!), we again have to setup our workspace accordingly. That's what we'll do in this lecture.

DOM Interaction / Selecting Elements Preview 05:49

We need to select and store a couple of elements from the DOM, so let's start with that.

Listening to User Events Preview 03:54

We certainly need to be able to interact with the User, therefore this part works on that.

Fetching User Input Preview 02:46

Not only do we need to listen to Events, it would also be great to fetch the data a user enters.

Http & Promises Preview 07:52

Time to implement the Http Request needed for this app. Of course, we'll use a Promise for that.

Sending the Http Request Preview 03:48

A prepared request is great, a sent one is even better.

The Weather Data Class together with Reflect & Proxies Preview 04:16

That's a big one! We're going to create our WeatherData Class and also use the Reflect API and Proxies to add some extra flavor to our app.

Fetching and Storing Weather Data Preview 04:10

With all the pieces being set up, it's time to actually fetch and store the Weather Data.

Displaying Data & Wrap Up Preview 05:30

The Data is here, but you're probably not seeing anything. Time to change this and actually output our data to the page. I'll also give a wrap up after this is being done.

Project Code Preview 00:02

Using ES6 Today & Local Setup Preview 00:23

Have a look at this article to learn how to use ES6 today.