ES6 => ES7 => ES8 => ES9 => ES10 A lo largo del curso ♥️
.
Bienvenida al curso
Qué es ECMAScript
¿Qué se implementó en ES6?
Default Params y Concatenación
LET y CONST, Multilínea, Spread Operator y Desestructuración
Arrow Functions, Promesas y Parámetros en objetos
Clases, Módulos y Generadores
¿Qué se implementó en ES7?
¿Qué se implementó en ES7?
¿Qué se implementó en ES8?
¿Qué se implementó en ES8?
Async Await
Actualidad y próximos pasos de ECMAScript
¿Qué se implementó en ES9?
¿Qué se implementó en ES10?
ECMAScript 2020
ECMAScript 2020 - características importantes
ECMAScript 2021
TC39 y Cierre del curso
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 175
Preguntas 5
ES6 => ES7 => ES8 => ES9 => ES10 A lo largo del curso ♥️
.
5 Características de ES2020 (ES11) que debes conocer
.
.
.
.
.
.
.
Les dejo mi resumen del curso (algunos scripts los modifiqué por diversión jaja
Default params
function myFunction(param1 = 'default', param2) { ... }
Concatenación
let hello = 'welcome';
let world = 'to the jungle!';
let guns = `${hello} ${world}` // Welcome to the jungle!
Let, const, multilínea, spread and destructuration
let variable1; // Block scope
const constant1; // Block scope and constant
const stringmultiline = `this is a multi
line string`;
const array = ['item1', 'item2'];
const array2 = ['item3', 'item4'];
const allArrays = [...array, ...array2] // ['item1', 'item2' , 'item3', 'item4']
const object = {
name: 'manuel',
age: 24,
country: 'PE',
};
const { name, age } = object; // 'manuel', 24
Arrow functions
const myFunction = (params) => { ... };
const square = num => num * num; // returns num * num
Parámetros en objetos
const name = 'manuel';
const age = 24,
const object = { name, age }; // { name: 'manuel', age: 24 }
Promesas
const myPromise = () => new Promise((resolve, reject) => {
if (success) { // Make some logic to capture when the promise have success
return resolve(succesfullResponse);
}
return reject(failedResponse);
}
myPromise
.then(response => doSomething)
.catch(error => doSomethingWithError);
Clases
class myClass {
constructor(param1, param2) {
this.param1 = param1;
this.param2 = param2;
}
sum() {
return this.param1 + this.param2
}
}
const calc = new myClass(2, 2);
calc.sum(); // 4
Generadores
function* myGenerator () {
yield 'Paradise';
yield 'city';
}
const generatorHello = myGenerator();
console.log(generatorHello.next());
console.log(generatorHello.next());
console.log(generatorHello.next());
/* { value: 'Paradise ', done: false }
{ value: 'city', done: false }
{ value: undefined, done: true } */
Módulos
// module.js
const hello = () => console.log('Welcome to the jungle');
export default hello;
// index.js
import hello from './module.js';
hello(); // 'Welcome to the jungle'
Includes
let numbers = [1, 2, 4, 5, 9];
console.log(numbers.includes(5)); // true
console.log(numbers.includes(15)); // false
Exponencial
const base = 2;
const exponent = 16;
console.log(base ** exponent); // 65536
Async y await
const coolSong = (iAmABadass) => {
return new Promise((resolve, reject) => {
if (iAmABadass === true) {
return setTimeout(() => resolve('Welcome to the jungle'), 2000);
}
return setTimeout(() => reject('All about that bass'), 2000);
})
};
const coolSongAsync = async (iAmABadass) => {
const cool = 'The coolest song is...';
console.log(cool);
try {
const song = await coolSong(iAmABadass);
console.log(song);
} catch (error) {
console.log(`Aparently something went wrong: The result is ${error}`);
}
};
coolSongAsync(true); // The coolest song is... Welcome to the jungle
Object.entries
const data = {
name: 'Manuel',
age: 24,
rocks: true,
};
const entries = Object.entries(data);
console.log(entries);
// [ [ 'name', 'Manuel' ], [ 'age', 24 ], [ 'rocks', true ] ]
Object.values
const data = {
name: 'Manuel',
age: 24,
rocks: true,
};
const entries = Object.values(data);
console.log(entries);
// [ 'Manuel', 24, true ]
padStart
const string = 'hunt';
const theWitcher = string.padStart(9, 'wild ');
// specifies a string of 9 characters
console.log(theWitcher); // 'wild hunt'
padEnd
const string = 'the wild ';
const theWitcher = string.padEnd(13, 'hunt');
console.log(theWitcher); // 'the wild hunt'
Si se especifican más o menos caracteres, el string original se mantiene y el segundo se repite hasta completar los caracteres o se corta dependiendo del caso
Ecmascript 8 también introduce las trailing commas 😃
Spread en objetos (rest)
const data = {
name: 'Manuel',
age: 24,
rocks: true,
}
const { name, ...rest } = data;
console.log(rest); // { age: 24, rocks: true }
Composición de objetos
const data = {
name: 'Manuel',
age: 24,
rocks: true,
}
const additionalData = {
country: 'PE',
city: 'Trujillo',
}
const person = {
...data,
...additionalData,
}
console.log(person);
/* {
name: 'Manuel',
age: 24,
rocks: true,
country: 'PE',
city: 'Trujillo'
} */
Finally en promesas
const coolSong = (iAmABadass) => {
return new Promise((resolve, reject) => {
if (iAmABadass === true) {
return setTimeout(() => resolve('Welcome to the jungle'), 2000);
}
return setTimeout(() => reject('All about that bass'), 2000);
})
};
console.log('The coolest song is...');
coolSong(true)
.then((song) => {
console.log(song);
})
.catch((error) => {
console.log(`Aparently something went wrong: The result is ${error}`);
})
.finally(() => {
console.log('They are all good songs :D');
})
/* The coolest song is...
Welcome to the jungle
They are all good songs :D */
Regex
const regex = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regex.exec('2020-06-02');
const year = match[1];
const month = match[2];
const day = match[3];
console.log(year, month, day); // 2020 06 02
Array.flat
const messedArray = [1, 2, 3, [1, 2, 3, [1, 2, 3]], [4, 5, 6]];
const flatedArray = messedArray.flat();
const flatedArray2 = messedArray.flat(2);
console.log(flatedArray); // [ 1, 2, 3, 1, 2, 3, [ 1, 2, 3 ], 4, 5, 6 ]
console.log(flatedArray2); // [ 1, 2, 3, 1, 2, 3, 1, 2, 3, 4, 5, 6 ]
Flatmap
const messedArray = [1, 2, 3, 4, 5, 6];
const mapFlatArray = messedArray.flatMap((value) => [value * 2, value * 3]);
console.log(mapFlatArray); // [ 2, 3, 4, 6, 6, 9, 8, 12, 10, 15, 12, 18 ]
trimStart
const hello = ' welcome to the jungle '
console.log(`${hello} here is the end`);
// welcome to the jungle here is the end
console.log(`${hello.trimStart()} here is the end`);
// welcome to the jungle here is the end
console.log(`${hello.trimEnd()} here is the end`);
// welcome to the jungle here is the end
Optional catch bind
try {
...
} catch {
...
} // no es necesario pasar error al catch
Object.fromEntries
const data = [
['name', 'Manuel'],
['age', 24],
['rocks', true],
];
const object = Object.fromEntries(data);
console.log(object); // { name: 'Manuel', age: 24, rocks: true }
Symbol description
const symbolDescription = 'My Symbol description';
const mySymbol = Symbol(symbolDescription);
console.log(mySymbol.description); // My symbol description
En el exámen se pregunta cosas irrelevantes … No entiendo cómo aprender de MEMORIA las innovaciones introducidas en cada versión ecmaScrpit X, me hará un mejor programador o ingeniero.
Así parece estar ocurriendo en los exámenes de cursos liderados por este instructor.
Hola! Les dejo mi resumen! ❤️
. pero la explicacion es muy vaga parece que solo lee el codigo que escribe sin explicar nada.
si real quieren aprender es6 les recomiendo esta serie de ejercicios de freecodecamp
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
Stage 0 : Idea
Stage 1 : Proposal
Stage 2 : Draft
Stage 3 : Candidate
Stage 4 : Ready
quiero aprender algo y todo en ingles, los artículos se pueden traducir pero los vídeos de youtobe no, creo que va tocar invertirle mas tiempo all aprendizaje de este idioma.
Les recomiendo el siguiente video para complementar el tema de TC39.
El enlace al Examen no esta disponible, siempre vuelve al final del ultimo video.
Articulo de Ecmascript para el 2020. Aqui
Realmente frustrante el exámen. La mayor parte de las preguntas es “En que versión de ECMAScript salió tal cosa”. ¿Les parece mas importante preguntar en que versión salió una caracteristica, a que preguntar qué es lo que hace una nueva caracteristica? Parece mas un examen de memorización que de aprendizaje. Es mi primer curso y deja mucho que desear.
RESUMEN:
//ES.Next habla sobre las proximas incorporaciones. TC39 grupo de programadores que revisan los estándares.
//tc39.es evaluan las propuestas.
//Stage 0 Image Data
//Stage 1 proposal
//Stage 3 draft
//Stage 4 ready
La respuesta es muy simple, como se vio en el curso cada año sale una nueva especificación para JS pero esta no es implementada de inmediato.
Actualmente, E6 tiene una compatibilidad de 98% esa es la razón por la cuál es el estándar más usado.
kangax es un proyecto donde muestra la compatibilidad actual de ES6+ en navegadores y Node.js para saber si ya es posible de implementar las nuevas funciones en proyectos.
Si quieren un poco mas de conocimientos en el tema, les dejo este link a Youtube, al canal de FalconMasters.
Realmente explica muy bien. Espero les sea util.
https://www.youtube.com/watch?v=LWiMWZ9-cdw&list=PLhSj3UTs2_yX_ct0OfHrmMwKL8wpz-N2j
Muy buen curso y muy buen maestro, lamentablemente es demasiado avanzado para solo tener el Curso Basico de JS, a mi parecer se necesita el dde fundamentos.
Hay diploma?
Me gustó el curso, aclaró dudas que tenía cuando hice el de fundamentos.
En verdad ya quería terminar este curso, fue cansino y abrumador, muy apresurado y atrabancado… una lástima… OJALÁ saquen otro curso más entendible y que se tome su tiempo para que el alumno entienda…
ES11 lo que hay de nuevo
https://techaffinity.com/blog/what-is-new-for-developers-in-javascript-ecmascript/
Excelente curso, vengo del básico y práctico y creo debí empezar por aquí. Muchos conceptos más aclarados que complementan al final lo que he visto antes. Y sí, JS parece exigirnos a nunca parar de aprenderlo
Hola compañeros, les dejo el resumen que hice del curso
https://platzi.com/tutoriales/1815-ecmascript-6/11015-resumen-del-curso-de-ecmascript-6/
Muchas gracias por el curso! Cumple de sobra con su propósito de repasar las novedades más importantes de las últimas revisiones. Oscar me ha encantado como profesor.
Me pareció un gran curso. Explicado de manera rápida pero clara.
Tuve que atrasar varias veces el video para poder entender algunas cosas.
Felicitaciones a Oscar.
excelente, un resumen de las versiones de ecmascript.
Resumen de lo que cada ECMa añadio:
Caracteristicas añadidas:
Caracteristas ECMAScript 7
Caracteristicas ECMAScript 8
Caracteristicas ECMAScript 9
Caracteristicas ECMAScript 10
Versión ES6
# Versión ES6
## Defautl params
```js
function nameFunction (name, age, country){
var name = name || 'my_name';
var age = age || 23;
var country = country || 🇪🇨;
console.log(name, age, country)
}
//es6
function defaultParams (name = 'my_name', age = 23, country = 🇪🇨){
console.log(name, age, country)
}
let name = 'Sam';
let lastName = 'Pilay Muñoz';
let fullName = name + ' ' + lastName;
console.log(fullName);
//es6
fullName = `${name} ${lastName}`;
console.log(fullName);
let lorem1 = 'Qui reprehenderit non officia qui \n' + 'nim nulla ut sit tempor incididunt voluptate.';
console.log(lorem1);
//es6
let lorem2 = `Qui reprehenderit non officia qui
enim nulla ut sit tempor incididunt voluptate.`;
console.log(lorem2);
let person = {
'name': 'Sam',
'age': 23,
'country': 'EC'
}
console.log(person.name, person.age);
//es6
let {name, age} = person;
console.log(name, age);
let team1 = ['Sam','Orlando','Bismar'];
let team2 = ['Alexis','Ivan','Aaron'];
let office = ['Arleth', ...team1, ...team2];
console.log(office);
//let
{
var global = 'I am global';
}
{
let scope = 'I am global';
console.log(scope);
}
console.log(global);
console.log(scope);
//const
const a = 'b';
a = 'a';
console.log(a);
let name = 'Sam';
let lastName = 'Pilay Muñoz';
let age = 23;
let obj = {name: name, age: age};
console.log(obj);
//es6
let obj2 = {name, age, lastName};
console.log(obj2);
function a(){
console.log('a');
}
//es6
const PrintA = () => {
console.log('a');
}
const PrintA2 = () => console.log('a');
const PrintA3 = (item1, item2) => console.log(item1, item2);
const PrintA4 = itm => console.log(`po...${itm}`);
a();
PrintA();
PrintA2();
PrintA3(2,6);
PrintA4(800);
const helloPromise = () => {
return new Promise((resolve, reject) => {
if(true){
resolve('Hello..!!');
}else {
resolve('Bye..!!');
}
});
}
helloPromise()
.then(response => console.log(response))
.catch(error => console.error('Error:',error));
class MyClass {
constructor(){
this.a = 0;
this.b = 2;
}
sum(number1 , number2){
this.a = number1;
this.b = number2;
return this.a + this.b;
}
}
const cal = new MyClass();
console.log(cal.sum(2,6));
// hello.js
const hello = () => {
return 'hello';
}
export default hello;
// file2.js
import {hello} from './hello'
hello();
function* helloWorld(){
if (true)
yield 'step 1';
if (true)
yield 'step 2';
if (true)
yield 'step 3';
};
const generatorHello = helloWorld();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
Versión ES10
# Versión ES10
## flat/ flatMap
```js
let array = [1,2,3,[1,2,3,[1,2,3]]];
console.log(array.flat()); //[ 1, 2, 3, 1, 2, 3, [ 1, 2, 3 ] ]
console.log(array.flat(1)); // [ 1, 2, 3, 1, 2, 3, [ 1, 2, 3 ] ]
console.log(array.flat(2)); // [ 1, 2, 3, 1, 2, 3, 1, 2, 3 ]
let numbers = [1,2,3,4,5];
console.log(numbers.flatMap(value => [value, value * 2])); //[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
let hello1 = ' Hello 1';
console.log(hello1);
console.log(hello1.trimStart());
let hello2 = 'Hello 2 ';
console.log(hello2);
console.log(hello2.trimEnd());
try {
} catch {
error
}
console.log('::: Object frontEntries :::');
let entries = [["name","oscar"], ["age",32]];
console.log(Object.fromEntries(entries)); // { name: 'oscar', age: 32 }
let mySymbl = '@Sum';
let symbol = Symbol(mySymbl);
console.log(symbol.description); // @Sum
Excelente curso…es increíble como se va mejorando un lenguaje a lo largo del tiempo, de ahí la importancia del ** #NuncaParesDeAprender**
YA me actualize ahora tengo que reiniciar … Windows
Me gusto el curso, hay mucha información, consejos y tips, les comparto mis notas del curso.
Buen día, aquí te comparto mis notas sobre el curso, espero te sea de utilidad:
Actualicen el curso! Agreguen ECMAScript 11
Grande que es JS
no pense que el examen fuese de esa forma para memorizar tanto, el examen debio ser mas bien en la sintaxis de estas nuevas funciones, no saber en que version se lanzo cada funcion ._.
Qué tal, conita comunidad. Les comparto los apuntes que realicé para éste curso.
.
Enlace a Notion.
al finnnn. me e actualizadoooo
Hola este es mi resumen apreciaria que me dieran feedback creo que es bastante util
Versión ES9
# Versión ES9
## Object Rest/Spread Properties
```js
let data = {
fontEnd: 'React',
backEnd: 'AdonisJs',
data: '2020-07-30 02:04:50',
}
let {fontEnd, ...all} = data;
console.log(fontEnd); // React
console.log(all); //{ backEnd: 'AdonisJs', data: '2020-07-30 02:04:50' }
let data1 = {
fontEnd: 'React',
backEnd: 'AdonisJs',
data: '2020-07-30 02:04:50',
}
let data2 = {
cssFramework: 'bulma',
...data1
}
console.log(data2);
/*
{ cssFramework: 'bulma',
fontEnd: 'React',
backEnd: 'AdonisJs',
data: '2020-07-30 02:04:50' }
*/
console.log('::: Promise finally :::');
fetch('http://example/endpoint')
.then(data => data.json())
.catch(err => console.error(err))
.finally(() => console.log('Promise finally')) //the new
const regexData= /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2020-07-30')
let year = match[1];
let mounth = match[2];
let day = match[3];
console.log(year, mounth, day); //2020 07 30
nunca pares de aprender! ❤️
Excelente curso, 👍
excelente curso!
Tremendo curso!
Excelente curso! Muy buen contenido explicado de manera clara y directa.
Muy bueno este curso, nos ahorrará mucho tiempo al momento de programar con estos nuevos conocimientos!
Excelente curso
Exclente curso para manterce actualizado con las versiones de ES 6+
Muchas gracias por el curso! Estoy satisfecho!
muy buen resumen de las caracteristicas y actualizaciones de ecmascript…
Excelente contenido con un excelentísimo profesor
Muchas gracias Oscar
Todo estuvo muy preciso y conciso
Cuanto tiempo tardaron en terminar el curso ?
Excelente curso! Aprendí muchísimo
Grandioso curso, muy claro el profesor en la explicacion.
Qué buen profe!
Gracias Oscar, muy buen curso!
Hola, les comparto todos los codigos de la clase, pueden ir a mi repositorio y encontraran todos
El comite tecnico “TC39” es un grupo de desarrolladores e implementadores que estan a cargo de revisar cada una de las propuestas y que cumplan el estandard que esto implica para asi agregarlas a la siguiente version de JavaScript
Stage 0 Idea -> Stage 1 Proposal -> Stage 2 Draft -> Stage 3 Candidate -> Stage 4 Ready
Para este punto me siento como si estuviera mirando a un vacío gigantesco, mil gracias por este curso; ahora sé que no sabía casi nada
Excelente curso, muy interesante todos los temas.
Bastante interesante el curso, ahora comprendo porque se adquieren ciertas formas de escribir el codigo y lo importante que es tener en cuenta el estandar, la unica pega que le encuentro es que este curso deberia estar al principio del challenge o por lo menos de segundo, para de esa forma entender un poco mejor porque se escriben por ejemplo las funciones de manera digamos explicita y luego de forma mas resumida, igual gracias por colocar a dispocision esta informacion 😃
Muchas Gracias profesor por este gran curso!
Admiro todo el conocimiento que tiene. He estado aprendiendo javascript y me emociona que con este curso he repasado todo lo que he estado aprendiendo y he podido entender de mejor manera cada concepto.
//Muy buen curso gracias =>
const actualCourse = {
name: “ecmaScript”,
score: 5
}
const nextCourse = {
…actualCourse,
name: “Async”
}
muy bueno aunque basico el curso, espero que al momento de empezar a programar se amplien las funcionalidades de las caracteristicas
Excelente curso, me gusto mucho Oscar! Tus explicaciones son muy claras!
Gracias por el curso!
Excelente asi podemos estar al pendiente de las cosas que se agregan al lenguaje
Excelente curso, es corto pero preciso
Me pareció un muy gran curso en el cual explica de forma fácil varias herramientas y funciones
gran curso
buen curso, es importante saber qué ha agregado cada especificación.
Siempre es un gustaso hacer un curso con oscar barajas !
Muy bien resumidos todos los features nuevos
Excelente curso para aprender las nuevas actualizaciones de Javascript.
Excelente curso, recomendado!
Buen Curso!.
Excelente curso profesor oscar 😄!
Muy completos los temas para repasar Ecma moderno.
Sobre todo aprendi promesas y asincronia que aún tenia como dudas
Buen curso! #TeamOscar
Muy buen curso!
curso muy bueno mostrando puntualmente, muchas Gracias!
Gracias!! Aprendí mucho. Un excelente curso.
Excelente curso. Me gustó mucho la verdad. La importancia de saber que se implementa en cada versión de ECMAScript es super bien.
Excelente curso 👏
muy buen curso
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.