├── README.md ├── package.json └── src ├── es10 ├── 00-flat-map.js ├── 01-trimstart-trimend.js ├── 02-try-catch.js └── 03-fromentries.js ├── es11 ├── 00-optional-chaining.js ├── 01-bigint.js ├── 02-nullish.js ├── 03-promise-allsettled.js ├── 04-globalthis.js ├── 05-matchall.js ├── 06-dynamic-import.js ├── 06-m-module.js └── index.html ├── es12 ├── 00-numeric-separators.js ├── 01-replaceAll.js ├── 02-promise-any.js └── 03-private.js ├── es6 ├── 00-let-const.js ├── 01-arrow-function.js ├── 03-strings.js ├── 04-default-params.js ├── 04-rest-spread.js ├── 05-object-literals.js ├── 06-promise.js ├── 07-clases.js ├── 08-module.js ├── 09-generator.js ├── 10-set-add.js └── module.js ├── es7 ├── 00-exponential.js └── 01-array-includes.js ├── es8 ├── 00-object-entries.js ├── 01-object-values.js ├── 02-string-padding.js ├── 03-trailing-commas.js └── 04-async-functions.js └── es9 ├── 00-regex.js ├── 01-spread.js ├── 02-finally.js └── 03-async.js /README.md: -------------------------------------------------------------------------------- 1 | # ECMAScript-Updates 2 | In this repository you will find several ECMAScript Updates, since ES6 to ES13. 3 | 4 | By the way, these are my personal notes about this updates. and I invite you to help me improve them by pulling requests. 5 | 6 | ![](https://i.imgur.com/NzBWRfa.png) 7 | 8 | ## ECMASCRIPT 6 (2015) 9 | - Let & Const variables 10 | - Arrow Functions 11 | - Strings applying backticks (Template literals) 12 | - Default params 13 | - Rest Spread 14 | - Objects literals 15 | - Promises 16 | - Clases 17 | - Module 18 | - Generator 19 | - Set & Add 20 | 21 | ## ECMASCRIPT 7 (2016) 22 | - Exponetials 23 | - Array Includes 24 | 25 | ## ECMASCRIPT 8 (2017) 26 | - Object Entries 27 | - Object Values 28 | - String Padding 29 | - Trailing Commas 30 | - Async Functions 31 | 32 | ## ECMASCRIPT 9 (2018) 33 | - Regex 34 | - Spread (update) 35 | - Finally 36 | - Async (update) 37 | 38 | ## ECMASCRIPT 10 (2019) 39 | - Flat-Map 40 | - Trim Start y End 41 | - Try Catch 42 | - From entries 43 | 44 | ## ECMASCRIPT 11 (2020) 45 | - Optional Chaining 46 | - Big Ints 47 | - Nullish 48 | - Promise allSettled & all 49 | - Globalthis 50 | - Match All 51 | - Dynamic Imports with modules 52 | 53 | ## ECMASCRIPT 12 (2021) 54 | - Numeric Separator 100_000 55 | - Replace All 56 | - Promises Any 57 | - Private methods 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "curso-ecmascript", 3 | "version": "1.0.0", 4 | "description": "Curso de ECMASCript con Oscar Barajas", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "javascript", 11 | "ecmascript", 12 | "ecma" 13 | ], 14 | "author": "Juan Camilo Campo ", 15 | "license": "MIT", 16 | "type": "module" 17 | } 18 | -------------------------------------------------------------------------------- /src/es10/00-flat-map.js: -------------------------------------------------------------------------------- 1 | //nos devuelve una matriz de cualquier submatriz, 2 | // una matriz es el concepto de arreglo, tenemos arreglos aninados dentro de arreglos y así es una matriz 3 | //FLAT 4 | const array = [1,2,3,4,5,[1,5,3,8,9,[2,8,10,9,1]]] 5 | console.log(array.flat(3)) 6 | 7 | //FLATMAP por cada elemento del array, retorna un array con el valor de un elemento y el mismo multiplicado por 2 8 | const array2 = [1,2,3,4,5] 9 | console.log(array2.flatMap(value=>[value, value*2])) 10 | -------------------------------------------------------------------------------- /src/es10/01-trimstart-trimend.js: -------------------------------------------------------------------------------- 1 | const hello = ' Hello World! ' 2 | console.log(hello.trimStart()) 3 | console.log(hello.trimEnd()) 4 | //Recordo los espacios vacios y los guardo en la variable hello Update 5 | let helloUpdate = hello.trimStart() 6 | helloUpdate = helloUpdate.trimEnd() 7 | console.log(helloUpdate) -------------------------------------------------------------------------------- /src/es10/02-try-catch.js: -------------------------------------------------------------------------------- 1 | try{ 2 | hello() 3 | }catch(error){ 4 | console.log(error) 5 | } 6 | 7 | try{ 8 | anotherFn() 9 | }catch{ 10 | console.log('Esto es un Error') 11 | } -------------------------------------------------------------------------------- /src/es10/03-fromentries.js: -------------------------------------------------------------------------------- 1 | //convertirmos un array de arrays en un objeto 2 | 3 | const entries = new Map([["name","oscar"],["age",34]]) 4 | console.log(entries) 5 | console.log(Object.fromEntries(entries)) -------------------------------------------------------------------------------- /src/es11/00-optional-chaining.js: -------------------------------------------------------------------------------- 1 | const users = { 2 | camilo:{ 3 | country:'CO' 4 | }, 5 | ana:{ 6 | country:'MX' 7 | } 8 | } 9 | //así puedo crear una validación si existe algun dato 10 | console.log(users?.bebeloper?.country) -------------------------------------------------------------------------------- /src/es11/01-bigint.js: -------------------------------------------------------------------------------- 1 | const aBigNumber = 219380291839012092n 2 | const anotherBigNumber = BigInt(219380291839012092) 3 | 4 | console.log(aBigNumber) 5 | console.log(anotherBigNumber) -------------------------------------------------------------------------------- /src/es11/02-nullish.js: -------------------------------------------------------------------------------- 1 | const anotherNumber = null; 2 | // algo muy parecido al || para colocar un valor por defecto en una validación 3 | const validate = anotherNumber ?? 5 4 | 5 | console.log(validate) -------------------------------------------------------------------------------- /src/es11/03-promise-allsettled.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject)=> reject("Rejected")) 2 | const promise2= new Promise((resolve,reject)=>resolve('Resolved')) 3 | const promise3= new Promise((resolve,reject)=>resolve('Resolved 2')) 4 | 5 | Promise.allSettled([promise1,promise2,promise3]).then(res=>console.log(res)) 6 | 7 | //funciona cuando todas las promesas son resolve 8 | Promise.all([promise1,promise2,promise3]).then(res=>console.log(res)).catch(err=>console.log(err)) 9 | Promise.all([promise2,promise3]).then(res=>console.log(res)).catch(err=>console.log(err)) -------------------------------------------------------------------------------- /src/es11/04-globalthis.js: -------------------------------------------------------------------------------- 1 | console.log(window) // navegador 2 | console.log(global) // node 3 | console.log(global)// webworker 4 | console.log(globalThis) //a todos -------------------------------------------------------------------------------- /src/es11/05-matchall.js: -------------------------------------------------------------------------------- 1 | const regex = /\b(White)+\b/g; 2 | 3 | const colors = 'Red, Green, Yellow, Black, White, Grey'; 4 | 5 | for (const match of colors.matchAll(regex)){ 6 | console.log(match); 7 | } -------------------------------------------------------------------------------- /src/es11/06-dynamic-import.js: -------------------------------------------------------------------------------- 1 | let btn = document.getElementById("btn") 2 | 3 | //cuando se realice click en el boton, importará el modulo js 4 | btn.addEventListener('click',async ()=>{ 5 | const module=await import('./06-m-module.js') 6 | console.log(module) 7 | module.hello() 8 | }) 9 | console.log('Segumos trabajando') -------------------------------------------------------------------------------- /src/es11/06-m-module.js: -------------------------------------------------------------------------------- 1 | export function hello(){ 2 | console.log('Hola Mundo') 3 | } -------------------------------------------------------------------------------- /src/es11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dynamic Import 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/es12/00-numeric-separators.js: -------------------------------------------------------------------------------- 1 | const value = 123_213_213_124 2 | console.log(value) 3 | 4 | -------------------------------------------------------------------------------- /src/es12/01-replaceAll.js: -------------------------------------------------------------------------------- 1 | const string = 'JavaScript es un maravilloso lenguaje de programación' 2 | 3 | const replaceString = string.replace('JavaScript','TypeScript') 4 | console.log(replaceString) -------------------------------------------------------------------------------- /src/es12/02-promise-any.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject)=> reject("Rejected")) 2 | const promise2= new Promise((resolve,reject)=>resolve('Resolved')) 3 | const promise3= new Promise((resolve,reject)=>resolve('Resolved 2')) 4 | 5 | //va a capturar la primera que resuelva de forma satisfactoria 6 | Promise.any([promise1,promise2,promise3]).then((res)=>console.log(res)) -------------------------------------------------------------------------------- /src/es12/03-private.js: -------------------------------------------------------------------------------- 1 | //SETTERS y GETTERS 2 | class user { 3 | //methodo constructor 4 | constructor(name,age){ 5 | this.name = name 6 | this.age = age 7 | } 8 | //methods 9 | #speack(){ 10 | return "Hello" 11 | } 12 | saludar(){ 13 | return `${this.speak()} ${this.name}` 14 | } 15 | 16 | get #uAge(){ 17 | return this.age 18 | } 19 | set #uAge(n){ 20 | this.age = n 21 | } 22 | } 23 | 24 | const babyloper = new user('Carlitos', 8) 25 | console.log(babyloper.uAge) 26 | console.log(babyloper.uAge = 20) -------------------------------------------------------------------------------- /src/es6/00-let-const.js: -------------------------------------------------------------------------------- 1 | var lastName = 'David';//asignación 2 | var lastName = 'Oscar';//reasignación 3 | console.log(lastName) 4 | 5 | let fruit = 'Apple'; 6 | fruit = 'Kiwi'; 7 | 8 | const animal ="Dog"; 9 | 10 | const fruits = ()=>{ 11 | if(true){ 12 | var fruit1 = 'Apple'; //function scope 13 | let fruit2 = 'Kiwi'; // block scope 14 | const fruit3 = 'Banana'; //block scope 15 | } 16 | console.log(fruit1) 17 | console.log(fruit2) 18 | console.log(fruit3) 19 | } 20 | fruits() -------------------------------------------------------------------------------- /src/es6/01-arrow-function.js: -------------------------------------------------------------------------------- 1 | // Es una expresión que nos permitirá tener una alternativa a function x(){} 2 | function square(num){ 3 | return num * num; 4 | } 5 | const square = (num)=>{ 6 | return num*num; 7 | } 8 | const square2 = num => num*num; -------------------------------------------------------------------------------- /src/es6/03-strings.js: -------------------------------------------------------------------------------- 1 | //Template literals comillas francesas o backticks 2 | 3 | let hello ="Hello" 4 | let world ="World" 5 | let epicPhrase = `${hello} ${world}` 6 | console.log(epicPhrase) -------------------------------------------------------------------------------- /src/es6/04-default-params.js: -------------------------------------------------------------------------------- 1 | //Parametros por defecto 2 | 3 | function newUser(name,age,country){ 4 | var name =name || 'Oscar' 5 | var age = age || 27 6 | var country = country || 'Colombia' 7 | console.log(name, age, country) 8 | } 9 | newUser() 10 | newUser('Juan',15,'USA') 11 | 12 | function newAdmin(name = 'Carlos',age=24,country='Chile'){ 13 | console.log(name,age,country) 14 | } 15 | newAdmin() 16 | newAdmin('Juan',15,'USA') -------------------------------------------------------------------------------- /src/es6/04-rest-spread.js: -------------------------------------------------------------------------------- 1 | // arrays destructuring 2 | let fruits = ['Apple','Banana','Strawberry'] 3 | let [a,,c]=fruits 4 | 5 | console.log(a,c) 6 | console.log(a,fruits[1]) 7 | 8 | //Object Destructuring 9 | let user = {username:'Oscar', age:34} 10 | let {username,age}=user 11 | 12 | console.log(username,age) 13 | 14 | //Spread operator 15 | let person = {name:'Oscar',age:27} 16 | let country = 'COL' 17 | 18 | let data = {id:1,...person, country} 19 | console.log(data) 20 | 21 | //rest paramas 22 | function sum(num,...values){ 23 | console.log(values) 24 | console.log(num+values[0]) 25 | return num+values[0] 26 | } 27 | sum(2,1,2,3,4,5) 28 | 29 | 30 | 31 | function solution(json1, json2) { 32 | // Tu código aquí 33 | var json1 = json1 || { name:'Mr Michi', food:'Pescado' }; 34 | var json2 = json2 || { age:12, color:'Blanco' }; 35 | 36 | var fusion = {...json1,...json2} 37 | console.log(fusion) 38 | return fusion 39 | } 40 | solution() -------------------------------------------------------------------------------- /src/es6/05-object-literals.js: -------------------------------------------------------------------------------- 1 | //enhanced object literals 2 | 3 | function newUser(user,age,country){ 4 | return { 5 | user, 6 | age, 7 | country 8 | } 9 | } 10 | console.log(newUser('camilo',25,'Colombia')) 11 | -------------------------------------------------------------------------------- /src/es6/06-promise.js: -------------------------------------------------------------------------------- 1 | const anotherFunction = ()=>{ 2 | return new Promise((resolve, reject)=>{ 3 | if(false){ 4 | resolve('Hey!!! esto está resuelto') 5 | }else{ 6 | reject("This isn't working") 7 | } 8 | }) 9 | } 10 | 11 | anotherFunction() 12 | .then(response => console.log(response)) 13 | .catch(error => console.log(error)) 14 | 15 | -------------------------------------------------------------------------------- /src/es6/07-clases.js: -------------------------------------------------------------------------------- 1 | //declaracion de clase 2 | class User { 3 | } 4 | //creando instancia de una clase 5 | const camilo = new User() 6 | 7 | //----------------------------------- 8 | class Persona{ 9 | //methods 10 | greeting(){ 11 | return "Hello" 12 | } 13 | } 14 | const juan = new Persona() 15 | console.log(juan.greeting()) 16 | 17 | const bebeloper = new Persona() 18 | console.log(bebeloper.greeting()) 19 | 20 | //constructor 21 | 22 | class Humano { 23 | constructor(){ 24 | console.log("Nuevo usuario") 25 | } 26 | greeting(){ 27 | return "Hello soy un Humano" 28 | } 29 | } 30 | 31 | const david = new Humano() 32 | console.log(david.greeting()) 33 | 34 | 35 | // THIS 36 | class Personaje{ 37 | constructor(name){ 38 | this.name = name 39 | } 40 | //methods 41 | speak(){ 42 | return 'Hello' 43 | } 44 | greeting(){ 45 | return `${this.speak()} ${this.name}` 46 | } 47 | } 48 | 49 | const pibe = new Personaje('Pibe Valderrama') 50 | console.log(pibe.greeting()) 51 | 52 | //SETTERS y GETTERS 53 | class user { 54 | //methodo constructor 55 | constructor(name,age){ 56 | this.name = name 57 | this.age = age 58 | } 59 | //methods 60 | speack(){ 61 | return "Hello" 62 | } 63 | saludar(){ 64 | return `${this.speak()} ${this.name}` 65 | } 66 | 67 | get uAge(){ 68 | return this.age 69 | } 70 | set uAge(n){ 71 | this.age = n 72 | } 73 | } 74 | 75 | const babyloper = new user('Carlitos', 8) 76 | console.log(babyloper.uAge) 77 | console.log(babyloper.uAge = 20) -------------------------------------------------------------------------------- /src/es6/08-module.js: -------------------------------------------------------------------------------- 1 | import hello from "./module.js" 2 | //es importante que en el package.json tengamos el type:"module" para que sea reconocido el import. 3 | hello() -------------------------------------------------------------------------------- /src/es6/09-generator.js: -------------------------------------------------------------------------------- 1 | // Definimos un generator con un asterisco en function 2 | function* iterate(array){ 3 | for (let value of array){ 4 | // yield palabra reservada: va a retornar cada uno de los valores según el caso 5 | yield value; 6 | } 7 | } 8 | 9 | const it = iterate(['juan','carlos','david','ana','isabela','karen','diego']); 10 | // next reservado de ejecución que se crea dentro del generator 11 | console.log(it.next().value); 12 | console.log(it.next().value); 13 | console.log(it.next().value); 14 | 15 | function* idGenerator(){ 16 | let id = 1 17 | while(true){ 18 | yield id ++ 19 | } 20 | } -------------------------------------------------------------------------------- /src/es6/10-set-add.js: -------------------------------------------------------------------------------- 1 | // instanciamos un Set 2 | const list = new Set() 3 | 4 | list.add('item 1') 5 | // Aquí se puede encadenar 6 | list.add('item 2').add('item 3') 7 | 8 | console.log(list) 9 | console.log(typeof(list)) -------------------------------------------------------------------------------- /src/es6/module.js: -------------------------------------------------------------------------------- 1 | const hello = ()=>{ 2 | console.log('Hello!') 3 | } 4 | 5 | export default hello -------------------------------------------------------------------------------- /src/es7/00-exponential.js: -------------------------------------------------------------------------------- 1 | //nos va a permitir trabajar para hacer la potencia 2 | //normal 3 | const data1 = Math.pow(3,4) 4 | console.log(data1) 5 | 6 | //ES7 7 | const data = 3 ** 4 8 | console.log(data) -------------------------------------------------------------------------------- /src/es7/01-array-includes.js: -------------------------------------------------------------------------------- 1 | // nos permite trabajar sobre un array y saber si existe un elemento. 2 | 3 | let numbers = [1,2,3,4,5,6,7,8,9] 4 | //Preguntamos si existe el 4 en el array numbers 5 | console.log(numbers.includes(4)) //true 6 | console.log(numbers.includes(10)) //false 7 | 8 | const list = ['jose','paola','maxi'] 9 | 10 | console.log(list.includes('jose'))//true 11 | console.log(list.includes('Jose'))//false -------------------------------------------------------------------------------- /src/es8/00-object-entries.js: -------------------------------------------------------------------------------- 1 | // convierte el objecto en un arregle, y cada uno de las propiedades en arrays independientes. 2 | const countries = {MX:'Mexico',CO:'Colombia',CL:'Chile',PE:'Peru'} 3 | 4 | console.log(Object.entries(countries)) -------------------------------------------------------------------------------- /src/es8/01-object-values.js: -------------------------------------------------------------------------------- 1 | //nos devuelve un array con los valores correspondientes a las propiedades ennumerables de un objeto. 2 | 3 | const countries = {MX:'Mexico',CO:'Colombia',CL:'Chile',PE:'Peru'} 4 | //solamente nos trae los valores del objeto y crea un array de strings 5 | console.log(Object.values(countries)) 6 | //nos trae la llave 7 | console.log(Object.keys(countries)) -------------------------------------------------------------------------------- /src/es8/02-string-padding.js: -------------------------------------------------------------------------------- 1 | 2 | const string = 'Hello' 3 | //padStart( donde inicia, qué va a agregar) 4 | console.log(string.padStart(20,'*')) 5 | console.log(string.padEnd(20,'*')) -------------------------------------------------------------------------------- /src/es8/03-trailing-commas.js: -------------------------------------------------------------------------------- 1 | const numbers = [12,321,423,45,7867,23,123,,,,45] 2 | console.log(numbers) 3 | console.log(numbers.length) -------------------------------------------------------------------------------- /src/es8/04-async-functions.js: -------------------------------------------------------------------------------- 1 | let fnAsync = ()=>{ 2 | return new Promise((resolve, reject)=>{ 3 | (true) ? setTimeout(()=>resolve('Async!!!'),2000) : reject(new Error('Error!') ) 4 | }) 5 | } 6 | //nos permitirá identicicar la funcion con el concepto async 7 | const anotherFunction = async ()=>{ 8 | const something = await fnAsync() 9 | 10 | console.log(something) 11 | console.log('Hello') 12 | } 13 | 14 | console.log('Before') 15 | anotherFunction() 16 | console.log('After') 17 | -------------------------------------------------------------------------------- /src/es9/00-regex.js: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 4 | // 5 | const regex = /(\d{4})-(\d{2})-(\d{2})/ 6 | 7 | const matchers = regex.exec('2022-01-01') 8 | 9 | console.table(matchers) 10 | console.log(matchers) -------------------------------------------------------------------------------- /src/es9/01-spread.js: -------------------------------------------------------------------------------- 1 | const user = {username : 'camilo', age:27, country:'CO'} 2 | 3 | const {username, ...values} = user 4 | 5 | console.log(username) 6 | console.table(values) -------------------------------------------------------------------------------- /src/es9/02-finally.js: -------------------------------------------------------------------------------- 1 | const anotherFunction = ()=>{ 2 | return new Promise((resolve, reject)=>{ 3 | (true)?resolve('Hey!!! esto está resuelto'):reject("This isn't working") 4 | }) 5 | } 6 | 7 | anotherFunction() 8 | .then(response => console.log(response)) 9 | .catch(error => console.log(error)) 10 | //se agrega para tener alguna función luego de terminar una promesa, independiente del resultado. 11 | .finally(()=>console.log('Promise Done')) 12 | 13 | -------------------------------------------------------------------------------- /src/es9/03-async.js: -------------------------------------------------------------------------------- 1 | //aquí aplicamos un asyncronismo en un generator, se seguirá interpretando el código mientras, se trabaja en la promesa, 2 | //await significa a la "espera de" en este caso a la espera de la promesa, que retorna un numero y todos los demás. 3 | //mientras eso sucede, saludamos con el Hello, porque es más rápdio. 4 | async function* anotherGenerator(){ 5 | yield await Promise.resolve(1) 6 | yield await Promise.resolve(2) 7 | yield await Promise.resolve(3) 8 | } 9 | 10 | const other = anotherGenerator() 11 | 12 | other.next().then(res => console.log(res.value)) 13 | other.next().then(res => console.log(res.value)) 14 | other.next().then(res => console.log(res.value)) 15 | console.log('Hello!') 16 | 17 | async function arrayOfNames(array){ 18 | for await (let value of array){ 19 | console.log(value) 20 | } 21 | } 22 | const names = arrayOfNames(['Camilo','Paola','Sara']) 23 | console.log('After') --------------------------------------------------------------------------------