Apprenez ES6 + dans ce cours gratuit et interactif en 23 parties

JavaScript est sans aucun doute l'un des langages de programmation les plus populaires au monde. Il est utilisé presque partout: des applications Web à grande échelle aux serveurs complexes en passant par les appareils mobiles et IoT.

Nous nous sommes donc associés à Dylan C. Israel - un programmeur YouTuber et diplômé de freeCodeCamp - et lui avons demandé de créer un cours d'introduction à ES6 sur Scrimba.

Le cours contient 17 leçons et 4 défis interactifs. Il est destiné aux développeurs JavaScript qui souhaitent découvrir les fonctionnalités modernes de JavaScript introduites dans ES6, ES7 et ES8.

Jetons un coup d'œil à la structure du cours:

Partie # 1: Introduction

Dans la vidéo d'introduction, Dylan donne un aperçu de ce à quoi ressemblera son cours et des principaux sujets qu'il abordera. Il vous donne également une intro sur lui-même, afin que vous le connaissiez avant de vous lancer dans le codage.

Partie # 2: Littéraux de modèle

La première fonctionnalité d'ES6 couverte par le cours est celle des modèles littéraux. Les modèles littéraux sont une manière plus propre et plus belle de jouer avec des chaînes. Ils suppriment le besoin de nombreux +signes pour concaténer des chaînes.

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

Les littéraux de modèle commencent par un backtick, et nous utilisons le $signe et les accolades pour introduire une variable entre les deux.

Partie # 3: Destructuration d'objets

Dans la partie 3, vous apprendrez à dé-structurer un objet et à extraire les propriétés qui vous intéressent.

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

Dans le code ci-dessus, nous extrayons les propriétés firstNameet lastNamede l'objet et nous les attribuons à des variables en utilisant la destruction d'objets.

Partie 4: Destructuration des baies

Dans cette partie, vous apprendrez comment obtenir le pointeur de l'élément qui nous intéresse à partir du tableau en utilisant la destruction de tableau.

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

Ici, firstNamepointe vers le premier élément du tableau sur le côté droit. Nous pouvons également créer plus de pointeurs sur le côté gauche des éléments de notre tableau.

Partie # 5: littéral d'objet

Dans la partie 5 de notre cours, nous allons apprendre une autre fonctionnalité intéressante d'ES6, qui est le littéral objet. Les littéraux d'objet vous permettent d'omettre la clé dans l'objet si le nom de la clé et la valeur sont identiques.

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

Ainsi, dans l'exemple ci-dessus, nous voulions ajouter la propriété de firstNamedans notre informationobjet. La firstNamevariable est une autre variable du même nom. Nous omettons la clé et passons simplement le nom de la variable, et cela créera la propriété et assignera la valeur elle-même.

Partie # 6: Object Literal (Challenge)

Il est maintenant temps pour le premier défi du cours! Le but ici est de consigner la nouvelle ville, la nouvelle adresse et le pays avec elle.

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

Vous êtes encouragé à utiliser les sujets que nous avons appris jusqu'à présent pour résoudre ce problème. Cela inclut les littéraux de modèle, la destruction d'objets et les littéraux d'objet.

Partie 7: For… Of Loop

Dans la partie 7, vous découvrirez une nouvelle façon de parcourir les éléments en boucle. ES6 a introduit une instruction de boucle For… Of, qui crée une boucle qui itère sur des objets itérables comme des objets String, Array, NodeList, etc.

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

Dans l'exemple de code ci-dessus, la boucle For… Of boucle sur une chaîne et déconnecte les caractères.

Partie # 8: Défi For… Of Loop

Dans ce défi, il vous est demandé de deviner ce qui se passe lorsque vous utilisez letover constinside une for…ofboucle et d'essayer de manipuler les valeurs à l'intérieur de la boucle.

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

Partie # 9: Opérateur de propagation

Dans la partie 9 du cours, vous découvrirez l'une des fonctionnalités les plus intéressantes incluses dans ES6: le Spread Operator.

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

Le code ci-dessus illustre l'une des nombreuses implémentations intéressantes de l'utilisation de l'opérateur de propagation. Ici, nous combinons deux tableaux en les plaçant dans un nouveau tableau avec trois points (…) devant le nom du tableau.

Partie # 10: Opérateur de repos

Dans cette leçon, vous apprendrez quelques cas d'utilisation de l'opérateur Rest. L'opérateur Rest nous aide à mieux gérer les paramètres de fonction en nous permettant de représenter le nombre variable des paramètres de fonction sous forme de tableau.

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

Ici, nous appelons la même fonction avec un nombre de paramètres différent, et l'opérateur Rest gère cela parfaitement pour nous.

Partie # 11: Fonctions fléchées

Cette leçon nous enseigne l'une des fonctionnalités les plus intéressantes et les plus parlées introduites dans ES6: les fonctions de flèche. Les fonctions fléchées ont changé la façon dont nous écrivons les fonctions.

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

En utilisant la fonction de flèche, l'aspect d'une fonction de quadrature a été complètement changé. En une seule ligne de code, nous pouvons renvoyer le carré d'un nombre. Les fonctions de flèche ont beaucoup d'autres implémentations impressionnantes, qui sont expliquées dans la leçon.

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.