├── README.md ├── package-lock.json ├── package.json └── src ├── es10 └── index.js ├── es6 ├── index.js └── modulo.js ├── es7 └── index.js ├── es8 └── index.js └── es9 └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # ECMAScript 2 | 3 | Especificación del lenguage propuesto por ECMA Internacional 4 | - 1996 NetScape, propuesta de JS 5 | - 2015 Julio, nuevas version de JS 6 | 7 | ## ES6 2015 8 | - LET, CONST 9 | ``` 10 | { 11 | var globalVar = 'Global var'; 12 | } 13 | { 14 | let globalLet = 'Global let' // Scope local 15 | } 16 | console.log(globalVar); 17 | console.log(globalLet); 18 | 19 | const a = 'b'; 20 | const a ='c'; 21 | 22 | console.log(a); 23 | ``` 24 | 25 | - Default params 26 | 27 | ``` 28 | function newFunction2(name='Daniel',age=20,country='Perú'){ 29 | console.log(name,age,country) 30 | }; 31 | 32 | newFunction2(); 33 | newFunction2('Dan',45,'MX'); 34 | ``` 35 | 36 | - Template literal 37 | ``` 38 | let epicPhrase = `${'Hello'} ${'world'}`; 39 | console.log(epicPhrase); 40 | ``` 41 | 42 | - Multiline 43 | ``` 44 | let lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 45 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 47 | ut aliquip ex ea commodo consequat. Duis aute irure dolor` 48 | console.log(lorem) 49 | ``` 50 | 51 | - Deestructuration 52 | ``` 53 | let person = { 54 | 'name': 'Dan', 55 | 'age': 45, 56 | 'country': 'Perú' 57 | } 58 | console.log(person.name,person.age,person.country); 59 | let {name, age, country} = person; 60 | console.log(name,age,country); 61 | ``` 62 | 63 | - Spread operator 64 | ``` 65 | let team1 =['Dan','Mario']; 66 | let team2= ['Maria','Pepa','Flor'] 67 | let Education = ['Percy',...team2,...team1]; 68 | console.log(Education) 69 | ``` 70 | 71 | - Param objects 72 | ``` 73 | let name = 'Dan' 74 | let age = 50 75 | //es5 76 | obj1 = {name:name, age:age} 77 | //es6 78 | obj2 = {name,age} 79 | console.log(obj2) 80 | ``` 81 | - Arrow Functions 82 | ``` 83 | const names = [ 84 | {name: 'Dan ',age:16}, 85 | {name: 'Tito',age:37} 86 | ] 87 | let listOfNames = names.map(function (item){ 88 | console.log(item.name); 89 | }) 90 | 91 | let listOfNames2 = names.map(item =>console.log(item.name)); 92 | 93 | const listOfNames3 = (name, age, country) =>{ 94 | //code here 95 | } 96 | const listOfNames4 = name =>{ 97 | //code here 98 | } 99 | const square = num => num*num; 100 | ``` 101 | - Promises 102 | ``` 103 | const helloPromise = ()=>{ 104 | return new Promise((resolve,reject)=> { 105 | if(false){ 106 | resolve('Todo ok') 107 | }else{ 108 | reject('Ups!') 109 | } 110 | }); 111 | } 112 | 113 | helloPromise() 114 | .then(response => console.log(response)) 115 | .then(()=>console.log('Hey there')) 116 | .catch(error=>console.log(error)); 117 | ``` 118 | - Clases 119 | ``` 120 | class calculator { 121 | constructor(){ 122 | this.valueA = 0; 123 | this.valueB = 0; 124 | } 125 | sum(valueA,valueB){ 126 | this.valueA = valueA; 127 | this.valueB = valueB; 128 | return this.valueA + this.valueB; 129 | } 130 | } 131 | const calc = new calculator(); 132 | console.log(calc.sum(2,4)); 133 | ``` 134 | - Modules 135 | ``` 136 | import {hello} from './modulo' 137 | hello(); 138 | ``` 139 | - Generators 140 | ``` 141 | function* helloWorld() { 142 | if(true){ 143 | yield 'Hello, '; 144 | } 145 | if(true) { 146 | yield 'World'; 147 | } 148 | }; 149 | 150 | const generatorHello = helloWorld(); 151 | console.log(generatorHello.next().value); 152 | console.log(generatorHello.next().value); 153 | console.log(generatorHello.next().value); 154 | ``` 155 | 156 | ## ES7 July 2016 157 | - Include Function 158 | ``` 159 | let numbers = [1,2,3,5,43,7,9]; 160 | if(numbers.includes(7)){ 161 | console.log('Si se encuentra') 162 | }else{ 163 | console.log('No se encuentra') 164 | } 165 | ``` 166 | - Math 167 | ``` 168 | let base = 4; 169 | let exponente = 3; 170 | let resultado = base**exponente; 171 | console.log(resultado); 172 | ``` 173 | 174 | ## ES8 July 2017 175 | - Object.entries 176 | ``` 177 | const data = { 178 | frontend: 'Daniel', 179 | backed: 'Dan', 180 | design: 'Paul' 181 | } 182 | 183 | const entries = Object.entries(data); 184 | console.log(entries); 185 | console.log(entries.length) 186 | ``` 187 | - Return Values 188 | ``` 189 | const data2 = { 190 | frontend: 'Daniel', 191 | backed: 'Dan', 192 | design: 'Paul' 193 | } 194 | 195 | const values = Object.values(data2); 196 | console.log(values) 197 | console.log(values.length) 198 | ``` 199 | - Add in strings 200 | ``` 201 | const string = 'Hello'; 202 | console.log(string.padStart(7,'hi')) 203 | console.log(string.padEnd(12,'_________')) 204 | ``` 205 | - Trailing comma 206 | ``` 207 | const comma = { 208 | name: 'Dan', 209 | } 210 | ``` 211 | - Async Await 212 | ``` 213 | const helloWorld = ()=> { 214 | return new Promise((resolve,reject)=>{ 215 | if(true){ 216 | setTimeout(()=> resolve('Hello world'), 3000) 217 | }else{ 218 | reject(new Error('Test error')) 219 | } 220 | }) 221 | } 222 | 223 | const helloAsync = async () => { 224 | const hello = await helloWorld(); 225 | console.log('Despues del await') 226 | console.log(hello); 227 | } 228 | 229 | helloAsync(); 230 | ``` 231 | - Try catch 232 | ``` 233 | const anotherFunction = async () => { 234 | try { 235 | const hello = await helloWorld(); 236 | console.log(hello); 237 | } catch (error) { 238 | console.log(error); 239 | } 240 | } 241 | ``` 242 | ## ES9 July 2018 243 | 244 | - Idle Operators 245 | ``` 246 | const obj = { 247 | name: 'Dan', 248 | age: 78, 249 | country: 'Perú' 250 | }; 251 | 252 | let {country, ...all } =obj; 253 | console.log(all) 254 | ``` 255 | 256 | - Concatenate items in objects 257 | ``` 258 | const obj2 = { 259 | name: 'Dan', 260 | age: 78, 261 | }; 262 | 263 | const obj3 = { 264 | ...obj2, 265 | country: 'Perú' 266 | } 267 | console.log(obj3) 268 | ``` 269 | 270 | - Promise.finally 271 | ``` 272 | const helloWorld = ()=> { 273 | return new Promise((resolve,reject)=>{ 274 | (true) 275 | ? setTimeout(() => { 276 | resolve('Hello world') 277 | }, 3000 ) 278 | : reject(new Error('Test de error')) 279 | }); 280 | }; 281 | 282 | helloWorld() 283 | .then(response => console.log(response)) 284 | .catch(error=>console.log(error)) 285 | .finally(()=>console.log('Finalizó')) 286 | ``` 287 | - Regex 288 | ``` 289 | const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/ 290 | const match = regexData.exec('2020-04-20'); 291 | const year = match[1] 292 | const month = match[2] 293 | const day = match[3] 294 | console.log(year,month,day) 295 | ``` 296 | 297 | ## ES10 July 2019 298 | 299 | - flat 300 | ``` 301 | let array = [1,2,3, [4,5,6, [4,9,0]]]; 302 | console.log(array.flat(2)); 303 | 304 | let array2 = [1,2,3,4,5]; 305 | console.log(array2.flatMap(value => [value,value*2])); 306 | ``` 307 | - trim start/end 308 | ``` 309 | let hello = ' hello world '; 310 | console.log(hello.trimStart()); 311 | console.log(hello.trimEnd()); 312 | ``` 313 | - try catch 314 | ``` 315 | try{ 316 | 317 | }catch(error){ 318 | console.log(error) 319 | } 320 | 321 | try{ 322 | 323 | }catch{ 324 | console.log(error) 325 | } 326 | ``` 327 | - key value to object 328 | ``` 329 | let entries = [ 330 | ['name', 'Daniel'],['age',67] 331 | ] 332 | console.log(Object.fromEntries(entries)); 333 | ``` 334 | 335 | - Description in symbol objects 336 | ``` 337 | let mySymbol = `My symbol`; 338 | let symbol = Symbol(mySymbol); 339 | console.log(symbol.description) 340 | ``` 341 | 342 | ## COMING SOON 343 | TC39 group, evaluate proposals and implement in next versions 344 | Steps 345 | 346 | Idea >> Proposal >> Draft >> Candidate >> Ready 👌 -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecmascript", 3 | "version": "1.0.0", 4 | "description": "Course of ECMAScript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/danielpqe/ECMAScript6-.git" 12 | }, 13 | "keywords": [ 14 | "ecmascript", 15 | "javascript" 16 | ], 17 | "author": "@danielpqe", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/danielpqe/ECMAScript6-/issues" 21 | }, 22 | "homepage": "https://github.com/danielpqe/ECMAScript6-#readme" 23 | } 24 | -------------------------------------------------------------------------------- /src/es10/index.js: -------------------------------------------------------------------------------- 1 | // flat, aplanar 2 | let array = [1,2,3, [4,5,6, [4,9,0]]]; 3 | console.log(array.flat(2)); 4 | 5 | let array2 = [1,2,3,4,5]; 6 | console.log(array2.flatMap(value => [value,value*2])); 7 | 8 | //trim start/end 9 | let hello = ' hello world '; 10 | console.log(hello.trimStart()); 11 | console.log(hello.trimEnd()); 12 | 13 | //try catch 14 | try{ 15 | 16 | }catch(error){ 17 | console.log(error) 18 | } 19 | 20 | try{ 21 | 22 | }catch{ 23 | console.log(error) 24 | } 25 | 26 | // clave valor a objeto 27 | let entries = [ 28 | ['name', 'Daniel'],['age',67] 29 | ] 30 | console.log(Object.fromEntries(entries)); 31 | 32 | //Description in symbol objects 33 | let mySymbol = `My symbol`; 34 | let symbol = Symbol(mySymbol); 35 | console.log(symbol.description) -------------------------------------------------------------------------------- /src/es6/index.js: -------------------------------------------------------------------------------- 1 | //LET, CONST 2 | { 3 | var globalVar = 'Global var'; 4 | } 5 | { 6 | let globalLet = 'Global let' // Scope local 7 | } 8 | console.log(globalVar); 9 | console.log(globalLet); 10 | 11 | const a = 'b'; 12 | const a ='c'; 13 | 14 | console.log(a); 15 | 16 | // Default Params 17 | function newFunction(name, age, country){ 18 | var name = name || 'Oscar'; 19 | var age = age || 32; 20 | var country = country || 'Perú'; 21 | console.log(name,age,country); 22 | } 23 | 24 | //es6 25 | function newFunction2(name='Daniel',age=20,country='Perú'){ 26 | console.log(name,age,country) 27 | }; 28 | 29 | newFunction2(); 30 | newFunction2('Dan',45,'MX'); 31 | 32 | // Template literal 33 | let epicPhrase = `${'Hello'} ${'world'}`; 34 | console.log(epicPhrase); 35 | 36 | // Multilinea 37 | let lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 38 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 39 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 40 | ut aliquip ex ea commodo consequat. Duis aute irure dolor` 41 | console.log(lorem) 42 | 43 | // Desestructuración 44 | let person = { 45 | 'name': 'Dan', 46 | 'age': 45, 47 | 'country': 'Perú' 48 | } 49 | console.log(person.name,person.age,person.country); 50 | let {name, age, country} = person; 51 | console.log(name,age,country); 52 | 53 | //Spread operator 54 | let team1 =['Dan','Mario']; 55 | let team2= ['Maria','Pepa','Flor'] 56 | let Education = ['Percy',...team2,...team1]; 57 | console.log(Education) 58 | 59 | // Parámetros en objetos 60 | let name = 'Dan' 61 | let age = 50 62 | //es5 63 | obj1 = {name:name, age:age} 64 | //es6 65 | obj2 = {name,age} 66 | console.log(obj2) 67 | 68 | //Arrow Functions 69 | const names = [ 70 | {name: 'Dan ',age:16}, 71 | {name: 'Tito',age:37} 72 | ] 73 | let listOfNames = names.map(function (item){ 74 | console.log(item.name); 75 | }) 76 | 77 | let listOfNames2 = names.map(item =>console.log(item.name)); 78 | 79 | const listOfNames3 = (name, age, country) =>{ 80 | //code here 81 | } 82 | const listOfNames4 = name =>{ 83 | //code here 84 | } 85 | const square = num => num*num; 86 | 87 | // Promises 88 | const helloPromise = ()=>{ 89 | return new Promise((resolve,reject)=> { 90 | if(false){ 91 | resolve('Todo ok') 92 | }else{ 93 | reject('Ups!') 94 | } 95 | }); 96 | } 97 | 98 | helloPromise() 99 | .then(response => console.log(response)) 100 | .then(()=>console.log('Hey there')) 101 | .catch(error=>console.log(error)); 102 | 103 | // Clases 104 | class calculator { 105 | constructor(){ 106 | this.valueA = 0; 107 | this.valueB = 0; 108 | } 109 | sum(valueA,valueB){ 110 | this.valueA = valueA; 111 | this.valueB = valueB; 112 | return this.valueA + this.valueB; 113 | } 114 | } 115 | const calc = new calculator(); 116 | console.log(calc.sum(2,4)); 117 | 118 | // Módulos 119 | import {hello} from './modulo' 120 | hello(); 121 | 122 | // Generadores 123 | function* helloWorld() { 124 | if(true){ 125 | yield 'Hello, '; 126 | } 127 | if(true) { 128 | yield 'World'; 129 | } 130 | }; 131 | 132 | const generatorHello = helloWorld(); 133 | console.log(generatorHello.next().value); 134 | console.log(generatorHello.next().value); 135 | console.log(generatorHello.next().value); 136 | -------------------------------------------------------------------------------- /src/es6/modulo.js: -------------------------------------------------------------------------------- 1 | const hello = () => { 2 | return 'hello'; 3 | } 4 | 5 | export default hello(); -------------------------------------------------------------------------------- /src/es7/index.js: -------------------------------------------------------------------------------- 1 | // Función Includes 2 | let numbers = [1,2,3,5,43,7,9]; 3 | if(numbers.includes(7)){ 4 | console.log('Si se encuentra') 5 | }else{ 6 | console.log('No se encuentra') 7 | } 8 | 9 | //Potencia 10 | let base = 4; 11 | let exponente = 3; 12 | let resultado = base**exponente; 13 | console.log(resultado); -------------------------------------------------------------------------------- /src/es8/index.js: -------------------------------------------------------------------------------- 1 | // Object.entries 2 | const data = { 3 | frontend: 'Daniel', 4 | backed: 'Dan', 5 | design: 'Paul' 6 | } 7 | 8 | const entries = Object.entries(data); 9 | console.log(entries); 10 | console.log(entries.length) 11 | 12 | // Return Values 13 | const data2 = { 14 | frontend: 'Daniel', 15 | backed: 'Dan', 16 | design: 'Paul', 17 | } 18 | 19 | const values = Object.values(data2); 20 | console.log(values) 21 | console.log(values.length) 22 | 23 | // Agregar valores a cadenas de texto 24 | const string = 'Hello'; 25 | console.log(string.padStart(7,'hi')) 26 | console.log(string.padEnd(12,'_________')) 27 | 28 | // Training comma 29 | const comma = { 30 | name: 'Dan', 31 | } 32 | 33 | // Async Await 34 | const helloWorld = ()=> { 35 | return new Promise((resolve,reject)=>{ 36 | if(true){ 37 | setTimeout(()=> resolve('Hello world'), 3000) 38 | }else{ 39 | reject(new Error('Test error')) 40 | } 41 | }) 42 | } 43 | 44 | const helloAsync = async () => { 45 | const hello = await helloWorld(); 46 | console.log('Despues del await') 47 | console.log(hello); 48 | } 49 | 50 | helloAsync(); 51 | 52 | // Try catch 53 | const anotherFunction = async () => { 54 | try { 55 | const hello = await helloWorld(); 56 | console.log(hello); 57 | } catch (error) { 58 | console.log(error); 59 | } 60 | } -------------------------------------------------------------------------------- /src/es9/index.js: -------------------------------------------------------------------------------- 1 | //Operador de reposo 2 | const obj = { 3 | name: 'Dan', 4 | age: 78, 5 | country: 'Perú' 6 | }; 7 | 8 | let {country, ...all } =obj; 9 | console.log(all) 10 | 11 | // Unir elementos de objetos 12 | const obj2 = { 13 | name: 'Dan', 14 | age: 78, 15 | }; 16 | 17 | const obj3 = { 18 | ...obj2, 19 | country: 'Perú' 20 | } 21 | console.log(obj3) 22 | 23 | // Promise.finally 24 | const helloWorld = ()=> { 25 | return new Promise((resolve,reject)=>{ 26 | (true) 27 | ? setTimeout(() => { 28 | resolve('Hello world') 29 | }, 3000 ) 30 | : reject(new Error('Test de error')) 31 | }); 32 | }; 33 | 34 | helloWorld() 35 | .then(response => console.log(response)) 36 | .catch(error=>console.log(error)) 37 | .finally(()=>console.log('Finalizó')) 38 | 39 | // Agrupar bloques de regex 40 | const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/ 41 | const match = regexData.exec('2020-04-20'); 42 | const year = match[1] 43 | const month = match[2] 44 | const day = match[3] 45 | console.log(year,month,day) --------------------------------------------------------------------------------