Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
12d
10h
04m
07s
Default params
Se añadieron parámetros por defecto, significa que podemos establecer ciertos valores que le damos a una función, de forma por defecto.
//Antes de ecma6+functionnewFunction(name, age, country) {
var name = name || 'iris';
var age = age || 32;
var country = country || 'CO';
console.log(name, age, country)
//En ecmas6+ se estableció una forma de hacerlo desde la asignación de los parametros functionnewFunction2(name = 'iris' age = 32, country = "CO"){
console.log(name, age, country);
};
Concatenación
//Anteslet hello = "Hello";
let world = "World";
let epicPhrase = hello + '' + world;
console.log(epicPhrase);
//Nos permite hacer uniones más amigableslet epicPhrase2 = `${Hello}${World}`;
Multilínea
/*Antes usabamos el ''\n'' para separar y
luego se concatenaba.*/let lorem = "Mi nombre es Iris, soy de Bogotá, Colombia \n"
+ "Me gusta la programación"//Ahoralet lorem2 = `Mi nombre es Iris, soy de Bogotá, Colombia
y Me gusta la programación
`;
Desestructuración
//Antes debíamos acceder de una forma más complejalet person = {
'name': 'Iris',
'age': 32,
'country': 'Co'
}
console.log(person.name, person.age);
//Ahora es más amigable y entendiblelet {name, age, country} = person;
console.log(name, age, country);
Operador de propagación
Nos permite expandir de ciertas situaciones varios elementos.
Si quisiéramos unificar 2 arrays.
let team1 = ['Oscar', 'Julian', 'Ricardo'];
let team2= ['Valeria', 'Yesica', 'Camila'];
let education = ['David', ...team1, ...team2];
console.log(education);
Let
Es una nueva forma con la que vamos a trabajar para guardar los elementos en memoria.
Originalmente teníamos ‘‘var’’ que funcionaba de forma global.
Con ‘‘let’’ solo está disponible en el scope, eso quiere decir que funcionará en el bloque de código en el que será llamado.
{
var globalVar = "Global Var";
}
{
let globalLet = "Global let";
console.log(globalLet);
//En el mismo bloque de código sí.
}
console.log(globalVar);
console.log(globalLet); //No podríamos imprimirlo.
Const
Nos permitirá establecer una variable constante. No nos permitiría reasignarlo.
const a = 'b';
a = 'a'; //No se puede.Parámetros en objetos
//Antes teníamos que acceder a los objetos de esta forma.let name = 'Iris';
let age = 19;
obj = {name: name, age: age};
//Ahora es más amigable e intuitivo. Ahorramos código
obj2 = {name, age};
Arrow Functions
Vienen para solventar un problema particular o trabajar con 2 elementos, brindar una sintaxis más reducida y un this no vinculable.
//Antes usabamos el método map para iterar.const names = [
{name: 'Iris', age: 19}
{name: 'Kevin', age: 19}
]
let listOfNames = names.map(function (item){
console.log(item.name);
})
//Ahoralet listOfNames2 = names.map(item => console.log(item.name));
const listOfNames3 = (name, age, country) => {
...
}
const listOfNames4 = name => {
...
}
const square = num => num * num;
Promesas
Vamos a trabajar el asincronismo.
const helloPromise = () => {
returnnewPromise ((resolve, reject) => {
if (true) {
resolve('Hey!');
} else {
reject('Ups!!');
}
});
}
helloPromise()
.then(response => console.log(response))
.then(() => console.log('Hola'))
.catch(error => console.log(error));
Clases
Es una forma en la que vamos a manejar una sintaxis más clara para manejar objetos y la herencia dentro de JS.
classcalculator{
constructor() {
this.valueA = 0;
this.valueB = 0;
}
sum(valueA, valueB) {
this.valueA = valueA;
this.valueB = valueB;
returnthis.valueA + this.valueB;
}
}
const calc = new calculator();
console.log(calc.sum(2,2));
import {hello} from'./module';
hello();
const hello = () => {
return'hello!'
}
exportdefault hello;
Generators
Es una función especial que retorna una serie de valores, según el algoritmo definido.
function* helloWorld() {
if(true) {
yield'Hello, ';
}
if(true) {
yield'World';
}
};
//Ejecutarconst generatorHello = helloWorld();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
¿Qué se implementó en ES7?
let numbers = [1,2.3,7,8];
if(numbers.includes(7)) {
console.log('Sí');
} else {
console.log('No')
}
Elevar a la potencia
let base = 4;
let exponent = 3;
let result = base ** exponent;
console.log(result);
¿Qué se implementó en ES8?
Object entries deveule
Nos permitirá devolver la clave y los valores de una matriz.
const data = {
frontend: 'Iris',
backend: 'Kevin',
design: 'Isabel',
}
//Transformar el objeto a matrizconst entries = Object.entries(data);
console.log(entries);
console.log(entries.length);
const data = {
frontend: 'Iris',
backend: 'Kevin',
design: 'Isabel',
}
const values = Object.values(data);
console.log(values)
console.log(values.length)
Padding
const string = 'Hello';
console.log(string.padStart(7, 'hi'));
console.log(string.padEnd(12, ' ----'))
console.log('food'.padEnd(12, ' ----' ))
const obj = {
name: 'Iris',
}
Async Await
Nos permite ser más claros al construir este tipo de funciones y trabajará de mejor forma con el asincronismo.
const helloWorld = () => {
returnnewPromise((resolve, reject) => {
(true)
? setTimeout(() => resolve('Hello World'), 3000)
: reject (newError('Test Error'))
})
};
const helloAsync = async () => {
const hello = await helloWorld();
console.log(hello);
}
helloAsync();
//otra forma de ejecutarlaconst anotherFunction = async () => {
try{
const hello = await helloWorld();
console.log(hello);
} catch(error) {
console.log(error);
}
};
anotherFunction();
¿Qué se implementó en ES9?
Operador de reposo
Puede extraer las propiedades de un objeto que aún no se ha construido.
const obj = {
name: 'Iris',
age: 32,
country: 'CO'
};
let { name, ...all } = obj;
console.log(all);
const obj = {
name: 'Iris',
age: 19
}
const obj1 = {
...obj,
country: 'CO'
}
console.log(obj1);
//Podemos saber cuando ha terminado el llamadoconst helloWorld = () => {
returnnewPromise((resolve, reject) => {
(true)
? resolve('Hello World')
: reject(newError('Test Error'))
});
};
helloWorld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Finalizó'))
¿Qué se implementó en ES9?
TC39
Es un grupo de desarrolladores e implementadores que se encargan de revisar todas las propuestas. Este comité se encarga de evaluar para llevarlas a las siguientes versiones.
