JavaScript es, sin duda, uno de los lenguajes de programación más populares del mundo. Se utiliza en casi todas partes: desde aplicaciones web a gran escala hasta servidores complejos, dispositivos móviles y de IoT.
Así que nos asociamos con Dylan C. Israel, un YouTuber de programación y graduado de freeCodeCamp, y le pedimos que creara el curso Introducción a ES6 en Scrimba.
El curso contiene 17 lecciones y 4 desafíos interactivos. Es para desarrolladores de JavaScript que desean aprender las características modernas de JavaScript introducidas en ES6, ES7 y ES8.
Echemos un vistazo a la estructura del curso:
Parte # 1: Introducción
En el video introductorio, Dylan ofrece una descripción general de cómo será su curso y qué temas principales tocará. También te da una introducción sobre sí mismo, para que te familiarices con él antes de comenzar con la codificación.
Parte # 2: Literales de plantilla
La primera característica de ES6 que cubre el curso son los literales de plantilla. Los literales de plantilla son una forma más limpia y hermosa de jugar con cuerdas. Eliminan la necesidad de muchos +letreros para conectar cadenas.
let str1 = 'My name is:' let name = 'Dylan'; let str2 = `${str1} ${name}` // --> 'My name is: Dylan' Los literales de plantilla comienzan con una comilla invertida, y usamos el $signo y las llaves para introducir una variable intermedia.
Parte # 3: Desestructurar objetos
En la parte 3, aprenderá a desestructurar un objeto y extraer las propiedades que le interesan.
let information = { firstName: 'Dylan', lastName: 'Israel'}; let { firstName, lastName } = information; En el código anterior, extraemos las propiedades firstNamey lastNamedel objeto y las asignamos a las variables mediante la Desestructuración de objetos.
Parte # 4: Desestructuración de matrices
En esta parte, aprenderá cómo obtener el puntero del elemento que nos interesa de la matriz utilizando la destrucción de matriz.
let [ firstName ] = ['Dylan', 'Israel']; Aquí, firstNameapunta hacia el primer elemento de la matriz en el lado derecho. También podemos crear más punteros en el lado izquierdo de los elementos de nuestra matriz.
Parte # 5: Objeto literal
En la parte 5 de nuestro curso, aprenderemos otra característica interesante de ES6, que es Object Literal. Los literales de objeto le permiten omitir la clave en el objeto si el nombre de la clave y el valor son iguales.
let firstName = 'Dylan'; let information = { firstName }; Entonces, en el ejemplo anterior, queríamos agregar la propiedad de firstNameen nuestro informationobjeto. La firstNamevariable es otra variable con el mismo nombre. Omitimos la clave y simplemente pasamos el nombre de la variable, y creará la propiedad y asignará el valor.
Parte # 6: Objeto literal (desafío)
¡Ahora es el momento del primer desafío del curso! El objetivo aquí es registrar en la consola la nueva ciudad, la nueva dirección y el país con ella.
function addressMaker(address) { const newAddress = { city: address.city, state: address.state, country: 'United States' }; ... } Se le anima a utilizar los temas que hemos aprendido hasta ahora para resolver este problema. Esto incluye Literales de plantilla, Destrucción de objetos y Literales de objeto.
Parte # 7: Para… de bucle
En la parte 7, aprenderá sobre una nueva forma de recorrer elementos. ES6 introdujo una instrucción de bucle For… Of, que crea un bucle que itera sobre objetos iterables como objetos String, Array, NodeList y más.
let str = 'hello'; for (let char of str) { console.log(char);}// "h"// "e"// "l"// "l"// "o" En el ejemplo de código anterior, el bucle For… Of recorre una cadena y desconecta los caracteres.
Parte # 8: Desafío For… Of Loop
En este desafío, se le pide que adivine qué sucede cuando usa letover constdentro de un for…ofbucle y que trate de manipular los valores dentro del bucle.
let incomes = [62000, 67000, 75000]; for (const income of incomes) { } console.log(incomes); Parte # 9: Operador de propagación
En la parte 9 del curso, aprenderá sobre una de las características más interesantes incluidas en ES6: el operador de propagación.
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; // arr3 = [1, 2, 3, 4, 5, 6]; El código anterior demuestra una de las muchas implementaciones interesantes del uso del operador de propagación. Aquí estamos combinando dos matrices colocándolas en una nueva matriz con tres puntos (…) delante del nombre de la matriz.
Parte # 10: Operador de descanso
En esta lección, aprenderá algunos casos de uso para el operador Rest. El operador Rest nos ayuda a manejar los parámetros de función de una mejor manera al permitirnos representar el número de variable de los parámetros de función como una matriz.
function findLength(...args) { console.log(args.length);} findLength(); // 0 findLength(1); // 1 findLength(2, 3, 4); // 3 Aquí, estamos llamando a la misma función con un número diferente de parámetros, y el operador Rest lo está manejando perfectamente para nosotros.
Parte # 11: Funciones de flecha
Esta lección nos enseña una de las características más interesantes y de las que más se habla introducido en ES6: Funciones de flecha. Las funciones de flecha han cambiado la forma en que escribimos funciones.
const square = num => num * num; square(2); // 4 Al usar la función de flecha, el aspecto de una función de cuadratura se ha cambiado por completo. Con una sola línea de código, podemos devolver el cuadrado de un número. Las funciones de flecha tienen muchas otras implementaciones asombrosas, que se explican en la lección.
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?
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.
