Bienvenida al curso

Bienvenida al curso y qué es ECMAScript

JavaScript

Lenguaje de programación que utiliza esta especificación (ECMAScript), para trabajar con estas características que van siendo agregadas anualmente a partir del año 2015, en el cual se lanzó la versión 6.Estuvo sin sacar ninguna nueva version (16 años, 1996 - 2001)

ECMAScript

ECMAScript es la especificación del lenguaje propuesto por ECAM internacional una institución encargada de los estándares. JS es el lenguaje que esta especificación usa para trabajar sobre las características que son añadidas año con año. Iniciando en el 2015 con la versión 6.

Ecma International

Organización internacional basada en membresías de estándares para la comunicación y la información.

Lecturas recomendadas

ECMA-262 - Ecma International

¿Qué se implementó en ES6?

Default Params y Concatenación

• Default params

  functionmyFunction(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, Promesas y Parámetros en objetos

• composicion - newPromise()

  • resolve() - comportamiento al cumplir la promesa
  • reject() - comportamiento al fallar la promesa
  • .then (⇒) - obtener el valor del resolve
  • .error(⇒) - obtener el valor del reject()

• Arrow functions

  const myFunction = (params) => { ... };
  const square = num => num * num; // returns num * num
  

• Clases

  classmyClass {
  constructor(param1, param2) {
  this.param1 = param1;
  this.param2 = param2;
  	}
  
  	sum() {
  returnthis.param1 +this.param2
  	}
  }
  
  const calc =new myClass(2, 2);
  calc.sum(); // 4
  java
  

• Parámetros en objetos

  const name = 'manuel';
  const age = 24,
  const object = { name, age }; // { name: 'manuel', age: 24 }
  

  • 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 } */
    

• 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);
  

• Módulos

  // module.js
  const hello = () => console.log('Welcome to the jungle');
  
  exportdefault hello;
  
  // index.js
  import hellofrom './module.js';
  hello(); // 'Welcome to the jungle'
  

¿Qué se implementó en ES7?

• 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
  

¿Qué se implementó en ES8?

En esta clase vimos las algunas implementaciones de ES8, como Object entries, Object Values, Padding y Trailing-Comas.

En el siguiente código se lista los ejemplos comentaríamos.

• Async y await

  const coolSong = (iAmABadass) => {
  returnnew 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 😃

Actualidad y próximos pasos de ECMAScript