Lær ES6 + i dette gratis og interaktive kursus med 23 dele

JavaScript er utvivlsomt et af de mest populære programmeringssprog i verden. Det bruges næsten overalt: fra store webapplikationer til komplekse servere til mobile og IoT-enheder.

Så vi har indgået et samarbejde med Dylan C. Israel - en programmering af YouTuber og freeCodeCamp grad - og bad ham om at oprette Introduktion til ES6 kursus om Scrimba.

Kurset indeholder 17 lektioner og 4 interaktive udfordringer. Det er til JavaScript-udviklere, der ønsker at lære de moderne funktioner i JavaScript introduceret i ES6, ES7 og ES8.

Lad os se på kursusstrukturen:

Del # 1: Introduktion

I introduktionsvideoen giver Dylan et overblik over, hvordan hans kursus vil se ud, og hvilke hovedemner han vil berøre. Han giver dig også en introduktion om sig selv, så du er fortrolig med ham, inden du hopper ind i kodnings tingene.

Del # 2: Skabelonlitteratur

Det første træk ved ES6, som kurset dækker, er skabelonbogstaver. Skabelonbogstaver er en renere og smukkere måde at lege med strenge på. De slipper af med behovet for mange +tegn til at sammenkæde strenge.

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

Skabelonbogstaver starter med et backtick, og vi bruger $tegnet og krøllede parenteser til at introducere en variabel imellem.

Del # 3: Destrukturerende objekter

I del 3 lærer du, hvordan du afstrukturerer et objekt og udtrækker de egenskaber, du er interesseret i.

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

I koden ovenfor udtrækker vi egenskaberne firstNameog lastNamefra objektet, og vi tildeler dem til variabler ved hjælp af Object Destructuring.

Del # 4: Destruktureringsarrays

I denne del lærer du, hvordan du får markøren til det element, vi er interesseret i, fra arrayet ved hjælp af array-destruktion.

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

Her firstNamepeger det mod det første element i arrayet på højre side. Vi kan også oprette flere markører på venstre side af elementerne i vores array.

Del nr. 5: Objekt bogstaveligt

I del 5 af vores kursus lærer vi en anden cool funktion i ES6, som er Objektlitterær. Objektlitteratur giver dig mulighed for at udelade nøglen i objektet, hvis navnet på nøglen og værdien er den samme.

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

Så i eksemplet ovenfor ønskede vi at tilføje egenskaben til firstNamei vores informationobjekt. Den firstNamevariabel er en anden variabel med samme navn. Vi udelader nøglen og videregiver bare navnet på variablen, og den opretter ejendommen og tildeler værdien selv.

Del # 6: Objektlitterær (udfordring)

Nu er det tid til kursets første udfordring! Målet her er at konsoltrere den nye by, den nye adresse og landet med den.

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

Du opfordres til at bruge de emner, vi hidtil har lært, til at løse dette problem. Dette inkluderer skabelonlitteratur, objektdestruktion og objektlitteratur.

Del # 7: For ... Of Loop

I del 7 lærer du om en ny måde at løbe igennem på elementer. ES6 introducerede en For… Of-loop-erklæring, som skaber en loop, der gentager sig over iterable objekter som String, Array, NodeList-objekter og mere.

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

I kodeeksemplet ovenfor løber For ... Of-løkken over en streng og logger tegnene ud.

Del # 8: For ... Of Loop-udfordring

I denne udfordring bliver du bedt om at gætte, hvad der sker, når du bruger letover consti en for…ofløkke, og at prøve at manipulere værdierne inde i sløjfen.

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

Del # 9: Spread operatør

I del 9 af kurset lærer du om en af ​​de sejeste funktioner inkluderet i ES6: Spread Operator.

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

Koden ovenfor viser en af ​​de mange seje implementeringer af brugen af ​​spredningsoperatøren. Her kombinerer vi to arrays ved at placere dem i et nyt array med tre prikker (...) foran arrayets navn.

Del # 10: Hvileoperatør

In this lesson, you’ll be learning a few use cases for the Rest operator. The Rest operator helps us handle function parameters in a better way by allowing us to represent the variable number of the function parameters as an array.

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

Here, we are calling the same function with a different number of parameters, and the Rest operator is handling that perfectly for us.

Part #11: Arrow Functions

This lesson teaches us one of the coolest and most talked about features introduced in ES6: Arrow Functions. Arrow Functions have changed the way we write functions.

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

By using the arrow function, the look of a squaring function has completely been changed. In just a single line of code, we are able to return the square of a number. Arrow Functions have a lot of other awesome implementations, which are explained in the lesson.

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?

Klik på billedet for at komme til kurset

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

Og det er det! Hvis du kommer så langt, kan du give dig selv et klapp på skulderen! Du har gennemført kurset og er et skridt tættere på at blive en JavaScript-ninja.

Tak for læsningen! Mit navn er Per, jeg er medstifter af Scrimba, og jeg elsker at hjælpe folk med at lære nye færdigheder. Følg mig på Twitter, hvis du vil have besked om nye artikler og ressourcer.

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.