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+
function newFunction(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 
function newFunction2(name = 'iris' age = 32, country = "CO"){
console.log(name, age, country);
};

Concatenación

//Antes
let hello = "Hello";
let world = "World";
let epicPhrase = hello + '' + world; 
console.log(epicPhrase);
//Nos permite hacer uniones más amigables
	let 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"

//Ahora

let 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 compleja
let person = {
'name': 'Iris',
'age': 32,
'country': 'Co'
}
console.log(person.name, person.age);

//Ahora es más amigable y entendible
let {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);
})
//Ahora

let 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 = () => {
return new Promise ((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.

class calculator {
constructor() {
this.valueA = 0;
this.valueB = 0;
}
sum(valueA, valueB) {
this.valueA = valueA;
this.valueB = valueB;
return this.valueA + this.valueB;
}
}

const calc = new calculator();
console.log(calc.sum(2,2));

import {hello} from './module';

hello();

const hello = () => {
return 'hello!'
}
export default 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';
}
};
//Ejecutar
const 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 matriz

const 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 = () => {
 return new Promise((resolve, reject) => {
(true)
? setTimeout(() => resolve('Hello World'), 3000)
: reject (new Error('Test Error')) 
})
};

const helloAsync = async () => {
 const hello = await helloWorld();
 console.log(hello);
}

helloAsync();

//otra forma de ejecutarla

const 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 llamado

const helloWorld = () => {
return new Promise((resolve, reject) => {
(true)
? resolve('Hello World')
: reject(new Error('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.