Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
2

Todos mis apuntes.

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.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/77d36524-feee-400b-be9c-34197034c1a9/Untitled.png

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?

  • Array.prototype.flat(nivel_de_profundidad): un nuevo método que nos permite aplanar arreglos.
  • Array.prototype.flatMap() lo mismo que flat con el beneficio de que primero manipular la data para luego poder aplanar.
  • String.prototype.trimStart() | String.prototype.trimEnd() permite quitar los espacios al inicio o al final dependiendo de la funciona.
  • try/catch: ahora puedes utilizarlo sin necesidad de especificaro como catch(error) sino directamente usarlo en el scope del catch.
  • Object.fromEntries() lo inverso a Object.entries(), es decir podemos convertir un objeto en una matriz clave/valor con Object.entries(), y hace lo inverso es decir de una matriz clave/valor a un objeto con Object.fromEntries().
  • Symbol.prototype.description: permite regresar el descripcion opcional del Symbol

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.

Escribe tu comentario
+ 2