ES6 - Review

Stiven Castillo

@bacabange

Definiciones

ECMAScript: estándar que ya va por la versión ES6 y  determina cómo emplear el lenguaje Javascript, que permite a los fabricantes de software desarrollar las herramientas adecuada para interpretarlo correctamente.

 

Javascript: es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, ​ basado en prototipos, imperativo, débilmente tipado y dinámico

Scope

Es el alcance/disponibilidad que tiene una variable en tu código.

function devhack() {
  var course = 'React';
  console.log('Curso dentro es: ' + course);
}

devhack();
console.log('Curso fuera es: ' + course);

Global/Local Scope

var course = 'Angular';

function devhack() {
  var course = 'React';
  console.log('Curso dentro es: ' + course);
}

devhack();
console.log('Curso fuera es: ' + course);

Let

Al Definir variables let o const dentro de un bloque, el alcance o scope que tendrá será sólo dentro de ese bloque

let gender = 'Rock';

if (gender) {
  let gender = 'Reggaeton';
  console.log('El género dentro del IF es: ' + gender);
}

console.log('El género fuera del IF es: ' + gender);

Const

Igual a Let pero este Prohibe la reasignación de valores

const number = 1;

function parent() {
  const number = 12;

  if (number) {
    number = 14; // Error, redeclaración de valor
  }
}
parent();
console.log(number);

Template Strings

Son literales de texto que habilitan el uso de expresiones incrustadas.

const name = 'Stiven';
let job = 'Developer';

// tradicional
console.log('El señor ' + name + ' trabaja como ' + job);

// ES6
console.log(`El señor ${name} trabaja como ${job}`);

Arrow functions

Tiene una sintaxis más corta que una expresión de función convencional y no vincula sus propios this, arguments, super

let sayHello = (name, job) => {
  return `Hola ${name} eres ${job}`;
};

// en una sóla linea
// let sayHello = (name, job) => `Hola ${name} eres ${job}`;

let viaje;

viaje = sayHello('Ana', 'Desarrolladora');

console.log(viaje);

Objetos

Objeto Literal

Objeto Constructor

const person = {
  name: 'Stiven',
  job: 'Developer',
};
function Person(name, job, age) {
  this.name = name;
  this.job = job;
  this.age = age;
}

const person1 = new Person('juan', 'designer', 29);
const person2 = new Person('ana', 'doctor', 22);
console.log(person1);
console.log(person2);

Destructuring

Expresión que facilita la extracción de datos desde arreglos u objetos

const versionToLearn = {
  version: 'ES6+',
  libraries: ['React', 'Vue'],
  frameworks: ['Angular'],
};

// let version = versionToLearn.version;

// new
let { version: versioncita, frameworks } = versionToLearn;
console.log(versioncita);

Object Enhancement

const name = 'Childish Gambino';
const title = 'This is america';

const artist = {
  name: name,
  title: title,
};

console.log(artist);
const name = 'Childish Gambino';
const title = 'This is america';

const artist = {
  name,
  title,
};
console.log(artist);

ES5

ES6

Funciones en Objetos

const person = {
  name: 'Stiven',
  age: 27,
  showMessage: function() {
    console.log(`${this.name} tiene ${this.age} años`);
  },
};

person.showMessage();

forEach

const car = ['Shoes', 'T-shirt', 'Underwear'];

// recorrear arreglo
car.forEach(product => {
  console.log(`select * from products where name = ${product}`);
});

Ejecuta la función indicada una vez por cada elemento del array

Map

const car = ['Shoes', 'T-shirt', 'Underwear'];

let items = car.map((product, index) => `<li>${product}</li>`);

console.log(items);

Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Filter

const persons = [
  { name: 'Joaquín', age: 30 },
  { name: 'Ana', age: 30 },
  { name: 'Andrés', age: 21 },
  { name: 'Maria', age: 20 },
  { name: 'Pedro', age: 25 },
  { name: 'Juan', age: 32 },
];

let youngPersons = persons.filter(person => {
  return person.age < 25;
});

console.log(youngPersons);

Crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada

Find

const persons = [
  { name: 'Joaquín', age: 30 },
  { name: 'Ana', age: 30 },
  { name: 'Andrés', age: 21 },
  { name: 'Maria', age: 20 },
  { name: 'Pedro', age: 25 },
  { name: 'Juan', age: 32 },
];

let joaquin = persons.find(person => {
  return person.name === 'Joaquín';
});

console.log(joaquin);

devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada

Reduce

const persons = [
  { name: 'Joaquín', age: 30 },
  { name: 'Ana', age: 30 },
  { name: 'Andrés', age: 21 },
  { name: 'Maria', age: 20 },
  { name: 'Pedro', age: 25 },
  { name: 'Juan', age: 32 },
];

let ageTotal = persons.reduce((total, person) => {
  return total + person.age;
}, 0);

console.log(ageTotal);

Aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor

Spread Operator

let languages = ['php', 'js'];
let frameworks = ['laravel', 'react'];

// Opción 1
let combine = languages.concat(frameworks);
console.log(combine);

// Opción 2 con spread operator
let combine = [...languages, ...frameworks];
console.log(combine);

Permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales)

Object.assing

let obj = { a: 1 };
let copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

Se utiliza para copiar los valores de todas la propiedades enumerables de uno o más objetos fuente a un objeto destino

Promises

const applyCoupon = new Promise((resolve, reject) => {
  console.log('Verificando...');
  setTimeout(() => {
    let codeExits = true;

    if (codeExits) {
      resolve('Descuento del 50%');
    } else {
      reject('El código no existe');
    }
  }, 2000);
});

applyCoupon
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  });

Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.

Clases

class Character {
  constructor(name, health, type) {
    this.name = name;
    this.health = health;
    this.type = type;
  }

  summary() {
    console.log(`${this.name} has ${this.health} of health`);
  }
}

las nuevas especificaciones ES6 se introduce el manejo de clases(class), estas brindan una mejora de sintaxis en la creación de objetos y herencia basada en prototipos

Herencia

class FireCat extends Character {
  constructor(name, health, type, age) {
    super(name, health, type);
    this.age = age;
  }
}


let character = new Character('Rick', 200, 'fire');
let cat = new FireCat('Misifus', 102, 'fire', 13);
console.log(character);
console.log(cat);

Una clase nueva se crea a partir de una clase existente

Módulos ES6

Export

Import

Made with Slides.com