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
ES6
By Stiven Castillo
ES6
Presentación para el curso de Reactjs en Devhack.co
