0:30Introducción al curso. En este curso veremos las nuevas sintaxis que introduce ES6 y cómo se diferencia de la versión ES5.
0:10 Preparando nuestro entorno de trabajo desde la Terminal Shell. Una vez ubicados en la carpeta del proyecto hacemos git init como buena práctica y luego npm init para inicializar el proyecto. Añadiendo descripción, entry point, y definiendo licencia MIT. Lo cual crea un archivo package.json en nuestro proyecto.
1:57Default Params
Antes:
funtion newFuntion(name, age) {
var name = name || "Fel";
var age = age || 32;
console.log(name, age);
}
ES6:
funtion newFuntion2(name = "Fel", age = 32) {
console.log(name, age);
}
newFuntion2(); //imprime default params “Fel 32”
newFuntion2("Ana", 9); //Imprime los parámetros que se han pasado a la función “Ana 9”7:04Template literal (Concatenación). Nos permite unir o concatenar varios elementos.
let hello = "Hello";
let world = "World";
Antes:
let epicPhrase = hello + " " + world;
ES6:
let epicPhrase2 = `${hello}${world}`; //alt+96 para las comillas0:07Multilínea en los strings. Para crear saltos de línea en los strings.
Antes:
let lorem = "texto cualquiera \n"
+ "el texto que quiero imprimir enla siguiente línea.";
ES6:
let lorem = ` texto cualquiera
el texto que quiero imprimir en la siguiente línea. `; //alt+96 para las comillas3:10Desestructuración de elementos.
let person = { 'name': 'oscar', 'age': 32, 'country': 'MX' }
Antes:
console.log(person.name, person.age);
ES6:
let { name, age, country} = person;
console.log(name, age, country);
6:13Spread Operator (Operador de propagación). Nos permite expandir varios elementos.
let team1 = ["Oscar", "Pepe"];
let team2 = ["Ana", "Yesi"];
Antes:
let education = ["Tom", "Oscar", "Pepe", "Ana", "Yesi"]; //había que concatenar todos los elementosES6:
let education = ["Tom", ...team1, ...team2]; //se puede concatenar dentro del array9:20LET. Declara variables que sólo son accesibles desde el Scope de la función. A diferencia de VAR que es una variable global.
13:57CONST. Declara variables que no pueden mutarse.
0:08Propiedad de Objetos mejoradas
letname = "Felix";
letage = 32;
Antes:
obj = {name: name, age:age};
ES6:
obj2 = { name, age };
2:18Arrow Funtions. Las arrows funtion son funciones anónimas.
const names = [
{name: “felix”, age: 32},
{name: “Jessica”, age: 33}
]
Antes:
let listOfNames = names.map(funtion (item) { //pasando una función anónimaconsole.log(item.name);
})
ES6:
//1ra aproximaciónlet listOfNames2 = names.map(item => console.log(item.name));
//2da aproximaciónconst listOfNames3 = (name, age, country) => {
. . . //la función que queremos ejecutar
}
//3ra aproximaciónconst listOfNames4 = name => {
. . . //mi bloque de código
}
//4ta aproximaciónconst square = num => num * num;
7:30Promesas
const helloPromise = () => {
returnnew Promise((resolve, reject) => {
if (false) {
resolve('Hey!');
} else {
reject('Ups!!');
}
});
}
helloPromise()
.then(response => console.log(response))
.catch(error => console.log(error));
//Investigar más para saber cómo trabajar con las promesas para hacer llamados a una API
0:06Clases. Es una forma en la que vamos a manejar una sintaxis más clara para manejar objetos y también la herencia dentro de JS. Lo cual nos permite aplicar la programación orientada a objetos dentro de JS.
classcalculator{
constructor() {
this.valueA = 0;
this.valueB = 0;
}
sum(valueA, valueB) {
this.valueA = valueA;
this.valueB = valueB;
returnthis.valueA + this.valueB;
}
}
4:19Módulos Import y Export. De esta forma podemos encapsular funciones o cierta lógica de nuestro programa para que pueda ser invocado donde se necesite.
const calc = new calculator();
console.log(calc.sum(2, 2));
import { hello } from'./module';
hello();
Archivo a importar:
const hello = () => {
return'hello!'
}
exportdefault hello;
6:14Generators. Retorna una serie de valores según el algoritmo definido. funtion* define a la función como generadora. Un caso bastante común donde encontraremos el uso de Generators es en la secuencia de Fibonacci.
function* helloWorld() {
if (true) {
yield'Hello, ';
}
if (true) {
yield'World';
}
};
const generatorHello = helloWorld();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);0:09 Cada año en Junio sale una versión nueva de ECMAScript.
0:46 ES7 nace en Junio de 2016. Includes(). Valida si dentro de un arreglo se incluye un valor en específico. Antes se usaba indexOf y un código un poco más complejo para asignarlo.
let numbers = [1, 2, 3, 7, 8];
if (numbers.includes(9)) {
console.log('Si se encuentra el valor 7');
} else {
console.log('No se encuentra.')
}
3:07 Elevar la potencia. Con doble asterisco (**).
let base = 4;
let exponent = 4;
letresult = base ** exponent;
console.log(result);
0:44Object.entries(). Nos permite devolver la palabra clave y los valores de una matriz; es decir, de un objeto, en forma de arreglo. Transforma de Objeto a arreglos. La “O” debe estar en mayúscula. Funciona parecido al bucle for ...in.
const data = {
frontend: 'Oscar',
backend: 'ISabel',
design: 'Ana',
}
const entries = Object.entries(data);
console.log(entries);
console.log(entries.length); //para saber cuántos elementos contiene nuestro arreglo, es decir, cuántos elementos contiene el objeto data.3:10Object.values(). Devuelve solo los valores de un objeto a un arreglo. Transforma de objeto a arreglos. La “O” debe estar en mayúscula. Funciona parecido al bucle for …in.
const data = {
frontend: 'Oscar',
backend: 'ISabel',
design: 'Ana',
}
const values = Object.values(data);
console.log(values)
console.log(values.length) //para saber cuántos elementos contiene nuestro arreglo, es decir, cuántos elementos contiene el objeto data.4:57Padding. Nos sirve para presentar estructuras de elementos como por ej. las de una factura.str.padStart(targetLength [, padString]) ystr.padEnd(targetLength [, padString])
conststring = 'hello';
console.log(string.padStart(7, 'hi'));
console.log(string.padEnd(12, ' -----'))
console.log('food'.padEnd(12, ' -----'))
7:56Trailing Commas. También llamadas “final commas”. Pueden ser útiles al agregar nuevos elementos, parámetros o propiedades al código JavaScript. Si desea agregar una nueva propiedad, puede agregar una nueva línea sin modificar la última línea anterior si esa línea ya usa una coma al final. Esto hace que las diferencias de control de versiones sean más limpias y la edición de código puede ser menos problemática.
JavaScript ha permitido comas finales en los literales de matriz desde el principio, y luego las agregó a objetos literales (ECMAScript 5) y más recientemente (ECMAScript 2017) a parámetros de función.
const obj = {
name: 'oscar',
}
0:18Async es una palabra reservada de JS. Con la preposición async convertimos una función en asíncrona que retorna una Promesa.
Construyendo una función que contiene una promesa con la cual vamos a trabajar nuestros Async/Await.
const helloWorld = () => {
returnnew Promise((resolve, reject) => {
(false)
? setTimeout(() => resolve('Hello World'), 3000)
: reject(new Error('Test Error'))
})
};
2:42Lógica del Async/Await.
Usando la promesa anterior continuamos con el async/await
Ejemplo de la clase:
const helloWorld = () => {
returnnew Promise((resolve, reject) => {
(true)
? setTimeout(() => resolve('Hello World'), 3000)
: reject(new Error('Test Error'))
})
};
const helloAsync = async () => {
const hello = await helloWorld();
console.log(hello);
};
helloAsync();
De la MDN extrajimos lo siguiente para profundizar en el tema.
functionhello() {return"Hellowa"};
hello();
"Hellowa"typeof hello
"function"//es una función//Agregando a la misma función: async
asyncfunctionhello() {return"Helowi"};
hello();
Promise {: "Helowi"} //Retorna una promesaObject[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "Helowi"typeof hello
"function"//continúa siendo una funciónTambién se puede presentar como funciones de expresión:
let hello = asyncfunction() { return"Hello" };
hello();
Y también cómo funciones flecha (arrow functions):
let hello = async () => { return"Hello" };
4:53Cómo trabajar el Async/Await de la forma correcta:
const anotherFunction = async () => { //generamos nuestra funcióntry { //prueba lo que vamos a ejecutar y en caso de presentar un error o no coincidir con nuestra lógica la función avanza al catch para capturar el errorconst hello = await helloWorld();
console.log(hello);
} catch (error) {
console.log(error);
}
};
anotherFunction();
0:38Operador de reposo. Puede extraer las propiedades de un objeto que aún no se ha construido.
const obj = {
name: 'oscar',
age: 32,
country: 'MX'
};
let { country, ...all } = obj;
console.log(all);
2:27Spread Operator. Sirve para unir n objetos en un solo objeto.
const obj = {
name: 'Oscar',
age: 32
}
const obj1 = {
...obj,
country: 'MX'
}
console.log(obj1);
3:49Promise Finally. Nos permite saber cuando ha terminado el llamado y poder ejecutar una función o lógica de código según sea el caso. Para demostrar su funcionamiento usaremos una promesa.
const helloWorld = () => {
returnnew Promise((resolve, reject) => {
(true)
? setTimeout(() => resolve('Hello World'), 3000)
: reject(new Error('Test Error'))
});
};
helloWorld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() =>console.log('Finalizo'))
7:32ReGex o Regular Expresion
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
constmatch = regexData.exec('2018-04-20');
constyear = match[1]
constmonth = match[2]
constday = match[3]
console.log(year, month, day);
0:49Array.flat(nivel_de_profundidad): un nuevo método que nos permite aplanar arreglos.
let array = [1,2,3, [1,2,3, [1,2,3]]];
console.log(array.flat()); //sin parámetros se asume cómo primer nivel (valor 1 por default)
[1, 2, 3, 1, 2, 3, [1, 2, 3]] //respuesta aplana solo un nivel
console.log(array.flat(2));
[1, 2, 3, 1, 2, 3, 1, 2, 3] //respuesta aplana 2 niveles
2:06Array.flatMap() permite mapear un elemento, pasarle una función y aplanarlo.
let array = [1,2,3,4,5];
console.log(array.flatMap(value => [value, value * 2])); //mapea cada valor y lo multiplica por dos
[1, 2, 2, 3, 6, 4, 8, 5, 10] //resulta en los valores del arreglo original más los valores del resultado de la multiplicación
3:27String.trimStart() | String.trimEnd() Sirve para remover espacios en blanco al principio o al final del código.
let hello = ' hello world';
console.log(hello);
console.log(hello.trimStart()); //elimina los espacios en blanco al principio del stringlet hello = 'hello World ';
console.log(hello);
console.log(hello.trimEnd()); //elimina los espacios en blanco al final del string5:31Optional catch binding. Nos permite pasar de forma opcional el parámetro de error al valor de catch. Esto significa que puedes utilizarlo sin necesidad de especificarlo como catch(error) sino directamente usarlo en el scope del catch.
try {
} catch {
error
}
6:22Object.fromEntries(). Podemos convertir una matriz clave/valor a un objeto. Hace lo opuesto a Object.entries().
let entries = [["name", "oscar"], ["age", 32]];
console.log(Object.fromEntries(entries));
{ name: `oscar`, age: `32` } //respuesta un objeto7:56Symbol.description: devuelve la descripción del Symbol.
let mySymbl = `My Symbol`;
let symbol = Symbol(mySymbl);
console.log(symbol.description);
TC39. Grupo que evalúa propuestas e implementaciones para las siguientes versiones.
Idea >> Proposal >> Draft >> Candidate >> Ready
con Marcadores que nos llevan directo a la sección de la clase. Si te gustó dale 💚 para hacer más de estos para todos los Platzinateros! 🤘
Muchas gracias por tu aporte amigo!, de verdad me ayudo mucho porque no logre profundizar mucho en algunas características de ECMA y leyendo tu tutorial pude hacerlo.
Me alegra que te haya servido Javier
🙌
Dime algo ¿te parecieron útiles los marcadores (links) que coloco en cada punto al momento de la clase donde se habla del tema?